자바스크립트에서 애로우 함수는 기존의 function 키워드로 정의된 함수와는 조금 다른 동작을 합니다. 이것은 애로우 함수에서의 호출 방식에 영향을 미치며, 이에 대해 자세히 살펴보도록 하겠습니다.

애로우 함수란 무엇인가?

애로우 함수는 다음과 같은 간단한 문법으로 정의됩니다:

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

또는 단일 표현식의 경우 중괄호와 return 키워드를 생략하여 간략하게 작성할 수 있습니다:

const add = (a, b) => a + b;

호출 방식의 차이

애로우 함수는 일반 함수와는 다르게 this 컨텍스트를 생성하지 않습니다. 이것은 애로우 함수에서의 호출 방식이 다른 객체에 의해 호출되더라도 this가 현재 스코프의 this와 동일하게 유지된다는 것을 의미합니다.

예를 들어, 일반 함수 내에서 this는 호출 문맥에 따라 동적으로 결정되지만, 애로우 함수에서는 this가 함수가 정의된 시점에서 lexical binding(정적 바인딩)된다는 차이가 있습니다.

이를 통해 애로우 함수는 일반 함수보다는 더 예측 가능하고 명확한 this 동작을 제공한다는 장점을 가집니다.

이러한 특성으로 인해 애로우 함수는 일반적으로 이벤트 핸들링이나 콜백 함수와 같이 this가 중요하지만 변경되는 것을 피하고 싶은 경우에 많이 활용됩니다.

결론

애로우 함수는 자신만의 this 컨텍스트를 생성하지 않으며, 항상 정적으로 바인딩되므로 호출 방식에 따라 this가 변경되지 않는다는 특징을 가집니다.

이를 통해 코드의 가독성과 예측 가능성을 높이며, this에 대한 혼란을 줄일 수 있습니다.