많은 JavaScript와 TypeScript 개발자들이 화살표 함수(arrow function)와 일반 함수 키워드(function keyword)의 차이와 언제 각각을 사용해야 하는지에 대해 궁금해합니다. 이번 기회에 이 둘의 주요 차이점을 알아보고 각각의 사용 사례를 이야기해보겠습니다.

화살표 함수(Arrow Function)

화살표 함수는 ES6에서 도입된 함수 표현 방식입니다. 화살표 함수를 사용하면 함수를 간결하게 표현할 수 있고, 내부의 this와 arguments를 바인딩하지 않기 때문에 일반 함수와 다르게 동작합니다.

const add = (a: number, b: number): number => {
  return a + b;
};

위 예제에서 볼 수 있듯이 화살표 함수는 함수의 매개변수와 반환 타입 사이에 화살표(=>)를 사용하여 간결하게 표현합니다. 또한, 중괄호 내의 코드 블록에서 명시적으로 return을 사용하여 값을 반환할 수 있습니다.

일반 함수 키워드(Function Keyword)

일반 함수 키워드는 함수를 선언하는 데 사용되는 전통적인 방식입니다. 내부에 this와 arguments를 바인딩하고, 생성자로 사용할 수 있으며, 메소드로도 사용할 수 있습니다.

function multiply(a: number, b: number): number {
  return a * b;
}

위의 예제에서는 function 키워드를 사용하여 일반 함수를 선언했습니다.

주요 차이점

1. this 바인딩

• 화살표 함수: 자신의 this를 바인딩하지 않고, 상위 스코프의 this를 그대로 사용합니다.
• 일반 함수: 함수가 호출된 컨텍스트에 따라 this가 동적으로 결정됩니다.

2. arguments 객체

• 화살표 함수: arguments 객체를 바인딩하지 않습니다.
• 일반 함수: arguments 객체를 사용할 수 있습니다.

3. 생성자로 사용 여부

• 화살표 함수: 생성자로 사용할 수 없습니다. new 키워드로 호출 시 에러가 발생합니다.
• 일반 함수: 생성자로 사용할 수 있으며, new 키워드로 객체를 생성할 수 있습니다.

각 함수의 사용 사례는 생각보다 간단합니다. 화살표 함수는 주로 콜백 함수나 간단한 함수를 정의할 때 사용되며, this 바인딩이 필요 없을 때 유용합니다. 반면에, 일반 함수는 생성자나 메소드로 사용되거나 this가 동적으로 바인딩될 때에는 일반 함수 키워드를 사용합니다.

이러한 차이점을 이해하고, 각 함수를 올바르게 사용하여 코드를 작성하여 자바스크립트 및 타입스크립트 프로그래밍의 효율성을 높일 수 있습니다.

더 알아보기: TypeScript 화살표 함수 문법 - MDN web docs, TypeScript 공식 문서