Koans 문제 풀이 오답노트

2. Types-part1.js

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

  it('expect의 전달인자로 들어간 표현식의 평가(evaluation) 결과를 예측해 봅니다.', function () {
    expect(123 - '1').to.equal(122);
  });

자바스크립트에서는 + 연산자는 문자열 연산을 수행하기에 1+'1'을 하면 '11'이라는 문자열이 반환된다.

반면 - 연산자는 123 - '1' 에서 숫자와 문자열 간의 연산이므로 문자열 '1'이 자동으로 숫자 1로 형변환이 되어 표현식이 계산된다.

 

 

 

3. LetConst.js

const obj = { x: 1 };
delete obj.x;
expect(obj.x).to.equal(undefined);

delete는 객체에서 속성을 제거한다. obj에서 x 속성을 제거한다. obj.x는 더이상 존재하지 않으므로 undefined를 반환한다. null이 아닌 undefined인 이유는, null은 객체에 명시적으로 할당된 값으로 속성이 존재하지 않는 경우에는 undefined를 반환해야 한다.

정리하면, delete로 제거된 속성은 undefined를 반환한다.

 

 

 

4. scope.js

    expect(typeof funcDeclared).to.equal('function');
    expect(typeof funcExpressed).to.equal('string');

    //함수선언식
    function funcDeclared() {
      return 'this is a function declaration';
    }

    //함수표현식
    funcExpressed = function () {
      return 'this is a function expression';
    };
    
        // 자바스크립트 함수 호이스팅(hoisting)에 대해서 검색해 봅니다.

    const funcContainer = { func: funcExpressed };
    expect(funcContainer.func()).to.equal('this is a function expression');

    funcContainer.func = funcDeclared;
    expect(funcContainer.func()).to.equal('this is a function declaration');
  });

함수선언식은 function 키워드를 사용해서 함수를 선언하는 방법이다. 함수가 선언되기 이전에도 호출할 수 있는데, 이는 함수 호이스팅 덕분에 가능하다. 즉 함수선언식은 코드의 어느 부분이든 호출 가능하다.

 

함수표현식은 변수에 함수를 할당하는 방법으로 변수의 할당구문이 평가되기 전에는 함수가 호출될 수 없다. 변수에 할당되기 이전에는 해당 함수가 존재하지 않는다.

 

 

  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();

      expect(age).to.equal(26);
      expect(name).to.equal('jimin');

      return innerFn;
    }

    const innerFn = outerFn();  //outerFn 메소드가 실행되었음
    //name: jin -> jimin
    // age: 27
    //height:179

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

1. const innerFn = outerFn() ; //outerFn 메소드가 실행되었음

2. outerFn() 메소드에서는 outerFn 내부의 innerFn() 메소드 자체를 return한다.

3. 마지막 문장에서 innerFn() 을 실행했음 -> innerFn함수에서 return 하는 height의 값 (outerFn() 메소드에서 선언한 지역변수인 height=178) 이 return 되었음

 

 

 

6. Types-part2.js

 it('원시 자료형 또는 원시 자료형의 데이터를 함수의 전달인자로 전달할 경우, 값 자체의 복사가 일어납니다.', function () {
    let currentYear = 2020;
    function afterTenYears(year) {
      year = year + 10;
    } //return 없음
    
    afterTenYears(currentYear);
    expect(currentYear).to.equal(2020);
    
    function afterTenYears2(currentYear) {
      currentYear = currentYear + 10;
      return currentYear;
    } //return 있음
    
    let after10 = afterTenYears2(currentYear);
    expect(currentYear).to.equal(2020);
    expect(after10).to.equal(2030);
    // 사실 함수의 전달인자도 변수에 자료(data)를 할당하는 것입니다.
    // 함수를 호출하면서 넘긴 전달인자가 호출된 함수의 지역변수로 (매 호출 시마다) 새롭게 선언됩니다.
  });

 afterTenYears(currentYear);는 내부에서 10을 증가시키긴 하지만 리턴을 하지 않기에 currentYear에는 아무 영향이 없어서 그대로 2020이 된다.

근데  afterTenYears2(currentYear); 함수는 내부에서 10을 증가시킨 채로 새로운 값을 복사해서 리턴하기 때문에 2030이 된다.

 

 

 

7. Array.js

arr = [1,2,3];

const poppedValue = arr.pop();

expect(poppedValue).to.equal(3);
expect(arr).to.deep.equal([1, 2]);

poppedValue에는 arr에서 pop을 한 값이 저장되므로 3이 저장된다.

arr이라는 배열 안에는 pop을 한 이후가 저장되므로 [1,2] 배열이 저장된다.