자바스크립트(JavaScript) 화살표 함수(Arrow Function) 완벽 가이드

화살표 함수(Arrow Function)는 이름 그대로 코드의 줄 수를 크게 줄여주는 기능입니다. 문법에서 => 기호가 굵은 화살표(fat arrow)처럼 보인다고 해서 '팻 애로우 함수(Fat Arrow Function)'라고도 불립니다. 또한 일반 함수를 작성할 때마다 function 키워드를 반복해서 써야 하는 번거로움을 없애주어 코드를 훨씬 간결하게 만들어 줍니다.

화살표 함수의 기본 문법

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

argument => expression

매개변수가 두 개 이상일 경우에는 아래와 같이 괄호로 묶어서 작성합니다.

(argument1 [, argument2]) => expression

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

실제 예제를 통해 일반 함수와 화살표 함수의 차이를 비교해 보겠습니다. 두 코드 모두 배열의 각 요소에 제곱 연산을 수행하는 동일한 작업을 합니다.

1. 일반 함수 방식

먼저 전통적인 방식으로 function 키워드를 사용해 작성한 코드입니다.

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); // 결과: 49,64,81

화살표 함수의 장점 정리

위의 예제에서 확인할 수 있듯이, 화살표 함수는 다음과 같은 장점을 제공합니다.

• 코드 간결화: 중괄호와 return
• 가독성 향상: 특히 콜백 함수를 사용할 때 한눈에 로직을 파악하기 쉽습니다.
• 간편한 작성: function 키워드를 반복적으로 입력할 필요가 없습니다.

ES6(ECMAScript 2015)부터 도입된 화살표 함수는 현대 자바스크립트 개발에서 필수적인 문법이므로, 꼭 익혀두시기 바랍니다.