이번 글에서는 타입스크립트에서 화살표 함수와 익명 함수의 this 처리 방식을 비교하고, 각각의 사용 사례와 장단점에 대해 알아보겠습니다.

화살표 함수 (Arrow Function)

화살표 함수는 함수를 정의할 때 function 키워드 대신 =>를 사용하여 간결한 문법으로 함수를 표현할 수 있는 ES6 문법입니다. 화살표 함수는 자신의 this, arguments, super 또는 new.target을 바인딩하지 않기 때문에 함수가 호출된 문맥에서의 this를 따르게 됩니다.

let myObject = {
  value: 100,
  getValue: function () {
    console.log(this.value); // 'this'는 'myObject'를 참조
  }
};

let getValue = myObject.getValue;
getValue(); // 'this'는 'undefined'를 참조

위 예제에서 getValue 함수를 호출하게 되면 getValue는 myObject의 메서드가 아니기 때문에 this는 전역 객체를 참조하게 됩니다.

익명 함수 (Anonymous Function)

익명 함수는 함수의 이름이 없는 함수 표현식으로, 대부분의 경우에는 콜백 함수로 사용됩니다. 일반적으로 익명 함수는 function 키워드를 사용하여 정의됩니다.

let myObject = {
  value: 100,
  getValue: function () {
    // 내부 함수에서의 'this'는 'myObject'를 참조
    let innerFunction = function () {
      console.log(this.value);
    };
    innerFunction();
  }
};

myObject.getValue(); // 'this'는 'myObject'를 참조

위 예제에서 innerFunction안에서 this는 현재 문맥의 myObject를 참조하게 됩니다.

결론

화살표 함수와 익명 함수는 각각 다른 this 처리 방식을 가지고 있습니다. 화살표 함수는 자신의 this를 바인딩하지 않으며, 익명 함수는 자신의 this를 바인딩하기 때문에 각각의 사용 사례와 상황에 맞게 적절히 활용해야 합니다.

이상으로 타입스크립트에서의 화살표 함수와 익명 함수의 this 처리 방식에 대해 알아보았습니다.

참고 자료

• MDN web docs: 화살표 함수
• MDN web docs: 함수 표현식