자바스크립트 화살표 함수(Arrow Function) 정의 방법과 사용 예제

화살표 함수(Arrow Function)는 자바스크립트에서 '팻 애로우(Fat Arrow) 함수'라고도 불리는 함수 표기법입니다. 이름 그대로 => 기호가 화살표처럼 생겼으며, 이 문법을 활용하면 코드를 훨씬 간결하게 작성할 수 있습니다. 또한 기존 함수 선언 시 반복해서 작성해야 했던 function 키워드를 생략할 수 있다는 장점이 있습니다.

화살표 함수의 기본 문법

화살표 함수의 기본 문법은 다음과 같습니다.

argument => expression

매개변수가 두 개 이상인 경우에는 소괄호로 감싸서 작성합니다.

(argument1 [, argument2]) => expression

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

실제 예제를 통해 일반 함수와 화살표 함수의 차이를 살펴보겠습니다.

1. 일반 함수로 작성한 경우

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

2. 화살표 함수로 작성한 경우

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

위 예제를 비교해 보면, 화살표 함수를 사용했을 때 return 문과 중괄호가 생략되면서 코드 줄 수가 확연히 줄어든 것을 확인할 수 있습니다. 특히 map, filter, reduce 같은 배열 메서드와 함께 사용하면 코드의 가독성이 크게 향상됩니다.

정리

화살표 함수는 코드를 간결하게 만들고 가독성을 높여주는 유용한 문법입니다. 단순한 표현식 하나로 이루어진 콜백 함수를 작성할 때 특히 효과적이므로, 자바스크립트 개발 시 적극적으로 활용해 보시기 바랍니다.