자바스크립트 화살표 함수(Fat Arrow Function)란? 문법과 사용 예제 총정리

화살표 함수(Fat Arrow Function)는 이름 그대로 코드의 줄 수를 크게 줄여주는 자바스크립트의 간결한 함수 표현 방식입니다. => 기호가 마치 뚱뚱한 화살표처럼 보인다고 하여 '팻 애로우(fat arrow)'라고도 부르며, 일반 함수 선언 시 반복해서 작성해야 하는 function 키워드를 생략할 수 있다는 것이 가장 큰 장점입니다.

화살표 함수의 기본 문법

매개변수가 하나뿐이라면 다음과 같이 간단하게 작성할 수 있습니다.

argument => expression

매개변수가 두 개 이상일 경우에는 괄호로 묶어서 표현합니다.

(argument1 [, argument2]) => expression

일반 함수와 화살표 함수 비교하기

두 방식의 차이를 실제 코드로 비교해 보겠습니다.

일반 JavaScript 함수

var rank = [7, 8, 9];
var display = rank.map(function(num) {
    return num * num;
});

화살표 함수(Fat Arrow Function)

var rank = [7, 8, 9];
var display = rank.map((num) => num * num);
document.write(display);

위 예제에서 확인할 수 있듯이, 화살표 함수를 사용하면 function 키워드는 물론 중괄호({})와 return 문까지 모두 생략할 수 있습니다. 배열의 각 요소를 제곱하는 간단한 연산조차 일반 함수로는 여러 줄이 필요하지만, 화살표 함수로는 단 한 줄로 처리됩니다.

화살표 함수의 추가적인 장점

코드를 짧게 만들어 주는 것 외에도 화살표 함수에는 중요한 특징이 하나 더 있습니다. 바로 일반 함수와 달리 자신만의 this를 생성하지 않고, 상위 스코프의 this를 그대로 사용한다는 점입니다. 이 덕분에 콜백 함수 내부에서 this가 의도치 않게 변경되는 흔한 문제를 피할 수 있어, 실무 개발에서도 매우 널리 활용되고 있습니다.