[블로깅]JaveScript Koans

이틀에 걸쳐 코드스테이츠에서 페어와 함께 Koans 문제를 풀었다.

배웠던 내용들이고 쉽게 풀 수 있는 문제들이었지만 생각이 정리되지 않은 상태에서 풀기엔 쉽지 않은 문제들이 중간중간 나왔다.

생각을 정리하는데 페어분의 도움이 컸다. 생각할 시간을 주시고 잘못 생각한 부분을 함께 고민해가면서 알려주셨다,,🙏

문제를 풀면서 다시 한 번 배웠던 내용을 정리하고, 내가 잘 알고있는 내용과 모르는 부분을 구분해 확실하게 알 수 있게 된 시간이었다.

 

풀면서 어려웠던 문제들을 블로그를 쓰면서 다시 한번 복습해보는 시간을 가지려한다.

 

---

 

✓    Types_part1   표현식의 평가(evaluation) 결과를 예측. 

  it('expect의 전달인자로 들어간 표현식의 평가(evaluation) 결과를 예측해 봅니다.', function () {
    expect(1 + '1').to.equal('11');
  }); 
  //숫자와 문자를 더하면 숫자를 문자 취급하다.

  it('expect의 전달인자로 들어간 표현식의 평가(evaluation) 결과를 예측해 봅니다.', function () {
    expect(123 - '1').to.equal(122);
  }); 
  //숫자와 문자을 빼는 경우 문자를 숫자 취급한다.

  it('expect의 전달인자로 들어간 표현식의 평가(evaluation) 결과를 예측해 봅니다.', function () {
    expect(1 + true).to.equal(2);
  }); 
  //숫자와 불린타입을 더했을 경우엔 true를 1로 취급한다.

  it('expect의 전달인자로 들어간 표현식의 평가(evaluation) 결과를 예측해 봅니다.', function () {
    expect('1' + true).to.equal('1true');
  }); 
  // 문자와 불린타입을 더했을 경우는 '문자+불린타입'으로 내보낸다.

 

• 숫자와 문자를 더했을 때, 숫자를 문자 취급하는건 알았지만 '2'로 입력했을 때 오류가 났었다.
  숫자가 문자로 변했기 때문에 계산식으로 더하면 안되고 옆에 붙이는 방식으로 더해줬어야 했다.
• 불린 타입을 숫자와 더했을 때, true는 1로 취급하고 false는 0으로 취급한다. 

 

 

✓    Types_part4    lexical scope와 closure에 대해 다시 확인합니다. 

it('lexical scope와 closure에 대해 다시 확인합니다.', function () {
    let age = 27;
    let name = 'jin';
    let height = 179;

    function outerFn() {
      let age = 24;
      name = 'jimin';
      let height = 178;

      function innerFn() {
        age = 26;
        let name = 'suga';
        return height;
      }

      innerFn();  //innerFn() 실행 -> innerFn()외부(=outerFn()) 실행

      🔸 expect(age).to.equal(26); 
      🔸 expect(name).to.equal('jimin');
      return innerFn;
    }

    const innerFn = outerFn(); //변수 innerFn은 outerFn()내부에 있는 innerFn()과 동일하게 동작
    

    🔸expect(age).to.equal(27); 
    🔸expect(name).to.equal('jimin'); 
    🔸expect(innerFn()).to.equal(178); 
  });

 

스코프와 클로저에 관한 문제였다.

전역변수와 지역변수를 완벽히 이해를 해야 풀 수 있었던 문제였다. 변수의 선언이 되어있는지 알아채는게 중요하다.

🔸 expect(age).to.equal(26);  
// outerFn() 함수 안에서 age를 물었다.
let age = 24이지만 innerFn()함수에서 age = 26이라고 재할당을 해줬기 때문에 age는 26이 된다.

🔸 expect(name).to.equal('jimin');  
// innerFn()에서 name은 선언이 된 변수 이기 때문에 outerFn()의 name = 'jimin'과 같은 변수가 아니다.
따라서 'jimin' 그대로 출력 된다.

🔸expect(age).to.equal(27);   
// let age = 27과 let age = 24는 다른 변수이다.
innerFn()의 age = 26은 outerFn()의 age를 재할당 하기 때문에 전역스코프의 변수에는 영향을 주지 않는다.

🔸 expect(name).to.equal('jimin');   
//outerFn()에서 name을 재할달 해주었다. 따라서 let name = 'jin'은 let name = 'jimin'으로 바뀌게 된다.

🔸 expect(innerFn()).to.equal(178);   
//innerFn()은 heigth를 리턴하기때문에 선언된 heigth변수 중에서 가까운 변수 outerFn()의 heigth 값을 리턴하게 된다.