타입스크립트에서 화살표 함수와 익명 함수는 클래스 내부에서 멤버로 사용될 수 있습니다. 그러나 두 가지 함수 형식을 사용할 때 발생하는 차이점에 대해 알아봅시다.

화살표 함수 (Arrow Function)

화살표 함수는 함수 표현식을 간결하게 만들어주는 기능입니다. 이 함수는 this를 자체적으로 바인딩하지 않고, 호출될 때의 스코프에서 this를 가져다 사용합니다.

다음은 화살표 함수를 클래스 내부의 메서드로 사용하였을 때의 예시입니다.

class ArrowFunctionExample {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  sayHello = () => {
    console.log(`Hello, ${this.name}!`);
  }
}

const example = new ArrowFunctionExample("Alice");
example.sayHello(); // 출력: Hello, Alice!

화살표 함수 내부에서 this는 상위 스코프에서 가져오기 때문에 sayHello 메서드가 인스턴스의 속성에 접근할 수 있습니다.

익명 함수 (Anonymous Function)

익명 함수는 함수의 이름을 지정하지 않고 바로 사용하는 형태의 함수입니다. 클래스 내부에서 익명 함수를 사용할 때에는 this가 해당 메서드를 호출한 객체를 가리키기 때문에 주의가 필요합니다.

class AnonymousFunctionExample {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  sayHello = function() {
    console.log(`Hello, ${this.name}!`);
  }
}

const example = new AnonymousFunctionExample("Bob");
example.sayHello(); // TypeError: Cannot read property 'name' of undefined

위 예시에서 sayHello 메서드 안에서 this.name을 참조할 때 오류가 발생합니다. 이는 익명 함수가 호출 시에 this가 동적으로 바인딩되어 클래스의 인스턴스와 연결되지 않기 때문입니다.

결론

화살표 함수를 사용하면 this를 자체적으로 바인딩하지 않기 때문에 클래스의 멤버로 사용할 때 유용하게 동작합니다. 반면 익명 함수를 사용할 경우 this는 호출 시점에 동적으로 설정되므로 예기치 않은 동작을 일으킬 가능성이 있습니다.

따라서 클래스의 메서드로 사용할 때에는 화살표 함수를 사용하여 this의 정적인 스코프를 확보하는 것이 좋습니다.

이처럼 타입스크립트에서 화살표 함수와 익명 함수의 클래스 멤버 사용 방식을 비교해보았습니다. 화살표 함수를 적절히 활용하면 더욱 안정적인 코드를 작성할 수 있습니다.