JavaScript와 TypeScript에서 함수를 정의하는 여러 가지 방법 중 화살표 함수와 익명 함수 표현식은 혼동하기 쉬운 부분입니다. 이들의 문법 차이에 대해 알아보고, 각각의 장단점을 살펴보겠습니다.

익명 함수 표현식

익명 함수 표현식은 기명 함수와 달리 이름이 없는 함수입니다. 주로 다른 변수에 할당되어 사용되거나 다른 함수의 매개변수로 전달됩니다. 아래는 익명 함수 표현식의 간단한 예제입니다.

const myFunction = function() {
  console.log("This is an anonymous function expression");
};

화살표 함수

화살표 함수는 ES6부터 도입된 간결한 문법을 갖는 함수 표현식입니다. 아래는 화살표 함수의 예제입니다.

const myArrowFunction = () => {
  console.log("This is an arrow function");
};

문법 차이

매개변수

• 익명 함수 표현식: 매개변수를 괄호로 감싸야 함. function(param1, param2)
• 화살표 함수: 매개변수가 하나일 때는 괄호 생략 가능. param =>

this 키워드

• 익명 함수 표현식: 자신의 this를 바인딩함.
• 화살표 함수: 부모 스코프의 this를 물려받음.

장단점

익명 함수 표현식

• var 키워드로 선언한 경우, 호이스팅에 의해 변수가 선언되기 전에 호출될 수 있음.
• 함수 내부에서 this 키워드를 이용해 자신의 컨텍스트를 참조할 수 있음.

화살표 함수

• 더 간결한 문법으로 코드를 작성할 수 있음.
• 부모 스코프의 this를 가져와 사용할 수 있어서, 함수가 포함된 객체의 컨텍스트를 그대로 사용할 수 있음.

각각의 함수 표현식은 상황에 따라 적합한 사용법이 있으며, 기능과 컨텍스트에 맞게 선택하여 사용하는 것이 중요합니다.

이상으로 JavaScript와 TypeScript에서 화살표 함수와 익명 함수의 표현식 문법 차이에 대해 알아보았습니다.