javascript 에서 this 키워드와 함수 종류에 대해 정리

함수 종류

함수 선언식

function f() {
  return 'JS STUDY!';
}

함수 표현식

const f = function() {
  return 'JS STUDY!';
}

• this는 그 함수를 호출하는 시점의 자기 자신 오브젝트를 가리킨다. 하지만 아래 정리할 익명 함수에서 this 는 다른 context 를 가리켜 문제가 된다.
• 함수 선언식으로 내부 함수를 구현하면, 내부 함수 안에서 this 를 사용할 수 없다.

  const obj = {
    name: 'bk',
    getName: function() {
      let firstName = 'choe';
      function getFullName() {
        return firstName + ' ' + this.name;
      }
      return getFullName();
    }
  }
  
  obj.getName();
  // 출력결과 : "choe " (this.name 이 제대로 동작하지 못한다.)
  

• this 를 self 변수에 저장한 후 사용

  const obj = {
    name: 'bk',
    getName: function() {
      let self = this;
      let firstName = 'choe';
      function getFullName() {
        return firstName + ' ' + self.name;
      }
      return getFullName();
    }
  }
  
  obj.getName();
  // 출력결과 : "choe bk"
  

익명 함수

const f = () => 'JS STUDY!';

• return 문에 익명함수를 사용해보니 문자열이 아닌 함수 그 자체를 리턴한다.

  const obj = {
    name: 'bk',
    getName: function() {
      // inner function 에서 this 
      let firstName = 'choe';
      return () => firstName + ' ' + this.name;
    }
  }
  
  obj.getName();
  // 출력결과 : () => firstName + ' ' + this.name
  

arrow function

• 아래 처럼 arrow function 으로 내부 함수를 정의하면, 내부 함수 안에서 this 를 사용할 수 있다.

  const obj = {
    name: 'bk',
    getName: function() {
      // inner function 에서 this 
      let firstName = 'choe';
      const getFullName = () => firstName + ' ' + this.name;
      return getFullName();
    }
  }
  
  obj.getName();
  // 출력결과 : "choe bk"
  

• arrow function 과 동일한 레벨의 context 에 접근시 undefined 발생.

  const obj = {
    name: 'bk',
    getName: function() {
      // inner function 에서 this 
      let firstName = 'choe';
      const getFullName = () => this.firstName + ' ' + this.name;
      return getFullName();
    }
  }
  
  obj.getName();
  // 출력결과 : "undefined bk"
  

Javascript Test Framework, Mocha

• mocha를 사용하여 테스트 코드를 작성해보던 중 arrow function 을 사용하지 못한다는 것을 알게 되었다. arrow function 을 사용하면, 테스트 코드 내부의 this 가 mocha context 접근하지 못한다는 것이다. mocha 의 context 에 접근하지 않으면 동작하겠지만, 결과적으론 좋지 않은 방법이라고 하는 것 같다.
  • mochajs documentation

    describe('my suite', () => {
      it('my test', () => {
        // should set the timeout of this test to 1000 ms; instead will fail
        this.timeout(1000);
        assert.ok(true);
      });
    });