타입스크립트에서 화살표 함수(arrow function)는 ES6에서 도입된 새로운 함수 표현 방식입니다. 화살표 함수는 기존의 함수 선언 방식과는 조금 다른 동작을 합니다. 이 글에서는 타입스크립트 화살표 함수의 동작 원리에 대해 알아보겠습니다.

화살표 함수란?

화살표 함수는 간단한 문법으로 함수를 정의할 수 있게 해줍니다. 일반적인 함수 선언 방식보다 간결하고 가독성이 좋아서 많이 사용됩니다.

예시:

// 기존 함수 선언 방식
function add(a: number, b: number): number {
  return a + b;
}

// 화살표 함수
const add = (a: number, b: number): number => a + b;

화살표 함수의 this 바인딩

화살표 함수는 일반 함수와는 다르게 자신의 this를 가지지 않고, 상위 스코프의 this를 그대로 이용합니다. 이는 화살표 함수가 호출된 곳이 아닌, 선언된 곳의 this를 가리키게 됩니다.

예시:

class Counter {
  count = 0;
  interval = 1000;

  start() {
    setInterval(() => {
      this.count++;
      console.log(this.count);
    }, this.interval);
  }
}

const counter = new Counter();
counter.start();

위 예시에서 setInterval 함수 안에서의 this는 화살표 함수가 아닌 start 메서드의 this를 가리킵니다.

결론

타입스크립트의 화살표 함수는 기존의 함수 선언 방식과는 다르게 this의 동작 방식이 달라집니다. 화살표 함수는 자신의 this를 가지지 않고, 상위 스코프의 this를 그대로 이용하게 됩니다. 이를 이용해 this 바인딩에 대한 오해를 방지하고, 간결하고 가독성 좋은 코드를 작성할 수 있습니다.

참고 자료: MDN web docs, 타입스크립트 핸드북

이상으로 타입스크립트 화살표 함수의 동작 원리에 대해 알아보았습니다. 추가 질문이 있으시다면 언제든지 물어보세요!