JavaScript 및 TypeScript에서는 화살표 함수와 익명 함수가 변수에 대한 접근을 다르게 다룹니다. 이러한 동작 차이를 이해하는 것은 프로그래밍 중에 버그를 줄이고 성능을 최적화하는 데 도움이 됩니다.

익명 함수와 화살표 함수의 차이

화살표 함수는 익명 함수의 축약형이지만, 주요 차이점이 있습니다. 가장 주목할 만한 차이점 중 하나는 컨텍스트 바인딩(context binding)입니다. 익명 함수는 자신만의 this 컨텍스트를 가지지만, 화살표 함수는 화살표 함수가 생성된 시점의 this 컨텍스트를 그대로 유지합니다.

이러한 차이로 인해 화살표 함수와 익명 함수가 외부에서 접근 가능한 변수에 대한 접근도 다양합니다.

외부 변수에 접근

예를 들어, 다음과 같이 외부 변수를 참조하고 있는 화살표 함수와 익명 함수가 있다고 가정해보겠습니다.

// 외부 변수
let externalVar = 10;

// 익명 함수
let anonymousFunc = function() {
  console.log(externalVar);  // 10을 출력
};

// 화살표 함수
let arrowFunc = () => {
  console.log(externalVar);  // 10을 출력
};

위의 코드에서 보듯이, 화살표 함수와 익명 함수는 외부 변수에 모두 접근할 수 있습니다. 그러나 컨텍스트에서 this 키워드가 사용되는 경우 차이가 발생합니다.

컨텍스트에서의 차이

다음 예제를 통해 컨텍스트에서의 차이점을 살펴보겠습니다.

let obj = {
  value: 10,
  anonymousFunc: function() {
    console.log(this.value);  // 10을 출력
  },
  arrowFunc: () => {
    console.log(this.value);  // 'undefined'를 출력
  }
};

obj.anonymousFunc();
obj.arrowFunc();

화살표 함수는 자체적인 this 컨텍스트를 생성하지 않아서, 화살표 함수 내부에서 this 키워드를 사용하면 외부 컨텍스트에서의 this 값을 얻게 됩니다. 따라서 this.value는 undefined를 출력합니다.

이와 달리, 익명 함수는 자체적인 this 컨텍스트를 가지기 때문에 this는 obj 객체를 가리키게 되어 this.value는 10을 출력합니다.

따라서, 화살표 함수와 익명 함수는 컨텍스트에서의 this 차이와 관련된 변수에 대한 접근 방식이 다르다는 점을 유의해야 합니다.

결론

화살표 함수와 익명 함수는 다르게 외부 변수 및 컨텍스트를 처리하므로, 프로그래밍 시 해당 동작 차이를 고려하고 적절히 활용해야 합니다.

참고문헌: MDN Web Docs

이상으로, TypeScript의 화살표 함수와 익명 함수의 변수 접근에 대한 비교를 살펴보았습니다.