자바스크립트 화살표 함수(=>) 완벽 정리

함수를 더 짧게 쓰는 방법

자바스크립트 화살표 함수(arrow function)는 함수를 더 간결하게 정의할 수 있는 문법입니다. ES2015에서 처음 도입된 뒤로, 지금은 짧은 인라인 함수를 작성할 때 가장 많이 쓰이는 스타일로 자리 잡았습니다. 특히 배열 메서드에 넘기는 콜백 함수, 프로미스 핸들러, 이벤트 리스너를 작성할 때 자주 보게 됩니다.

형태는 간단합니다. 매개변수를 적고, =>를 쓰고, 그다음에 함수 본문이 옵니다.

전통적인 방식과 결과는 동일합니다:

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

타이핑이 줄어드는 것도 좋지만, 화살표 함수를 써야 하는 진짜 이유는 암묵적 return과 this를 다루는 방식입니다. 이 두 가지는 바로 이어서 살펴볼게요.

암묵적 return

본문이 단일 표현식이라면 중괄호와 return을 생략할 수 있습니다. 그러면 해당 표현식의 값이 자동으로 반환됩니다.

화살표 함수가 진가를 발휘하는 지점이 바로 여기예요. 한 줄짜리 변환 코드는 마치 수식처럼 깔끔하게 읽힙니다:

여러 문장을 써야 하는 순간, 다시 중괄호와 명시적 return으로 돌아가야 합니다:

중괄호 안에서 return을 빼먹는 것이 화살표 함수에서 가장 흔하게 저지르는 실수다. x => { x * 2 }는 undefined를 반환한다. 중괄호가 붙는 순간 함수 본문이 블록으로 해석되기 때문에, 안에 있는 표현식은 그냥 버려진다.

매개변수 괄호

매개변수가 딱 하나라면 괄호는 생략해도 된다.

매개변수가 없거나 2개 이상일 때는 괄호가 꼭 필요합니다:

팀에 따라서는 일관성을 위해 파라미터가 하나여도 항상 괄호를 붙이는 스타일을 선호하기도 합니다. 두 방식 모두 괜찮으니 하나를 정해서 꾸준히 쓰면 됩니다.

객체 리터럴 반환하기

여기서 흔히 빠지는 함정이 하나 있습니다. 화살표 함수로 객체를 암묵적으로 반환하려고 하면, 중괄호가 함수 본문으로 해석돼 버립니다:

이렇게 하면 undefined가 출력됩니다. 자바스크립트는 { name: name }을 객체 리터럴이 아니라 레이블이 붙은 문장을 가진 블록으로 해석하기 때문이죠. 객체를 반환하려면 소괄호로 감싸서 표현식으로 만들어줘야 합니다:

{ ... } 앞뒤로 ()를 감싸주는 게 해결책이다. 이건 꼭 기억해 두자. 화살표 함수를 쓰기 시작하면 일주일도 안 돼서 반드시 마주치게 되는 상황이다.

렉시컬 this (lexical this)

화살표 함수가 존재하는 진짜 이유는 문법이 짧아서가 아니다. 바로 자기만의 this를 가지지 않는다는 점이다. 화살표 함수는 자신을 감싸고 있는 스코프의 this를 그대로 물려받는다.

이게 왜 중요한지 보려면, 콜백 함수로 쓰인 일반 함수를 한번 살펴보자:

setInterval에 넘긴 function () { ... } 내부에서는 this가 counter가 아닙니다. 일반 함수는 호출되는 방식에 따라 자기만의 this를 갖게 되는데, setInterval은 콜백을 호출할 때 this를 undefined(strict 모드)나 전역 객체로 넘기기 때문이죠.

반면 화살표 함수는 자신을 감싸고 있는 메서드의 this를 그대로 물려받습니다(lexical this):

화살표 함수 내부에서도 this는 여전히 counter를 가리킵니다. 화살표 함수는 자기 자신의 this를 새로 만들지 않기 때문이죠. 화살표 함수가 나오기 전에는 const self = this;로 변수에 따로 담아두거나 .bind(this)를 걸어주는 방식으로 우회했는데요. 지금도 쓸 수는 있지만, 굳이 쓸 일이 거의 없어졌습니다.

화살표 함수에 없는 것들

이 lexical this 규칙은 사실 더 큰 그림의 일부입니다. 화살표 함수는 일반 함수가 가진 몇 가지 기능을 아예 갖고 있지 않습니다.

• 자신만의 this가 없음 — 바깥 스코프의 this를 그대로 물려받습니다.
• arguments 객체가 없음 — 대신 나머지 매개변수(...args)를 쓰면 됩니다.
• new와 함께 쓸 수 없음 — 화살표 함수는 생성자로 사용할 수 없습니다.
• prototype 프로퍼티가 없음 — new를 못 쓰니 당연한 결과입니다.

...args는 arguments와 똑같이 "인자를 몇 개든 받을 수 있는" 기능을 제공하는데, 덤으로 진짜 배열이라는 장점까지 있습니다. 한편 new Greeter(...) 호출이 에러를 내는 이유는 화살표 함수는 생성자로 쓸 수 없기 때문입니다.

화살표 함수를 쓰면 안 되는 경우

콜백을 작성할 때는 화살표 함수가 기본 선택이지만, 다음과 같은 상황에서는 오히려 잘못된 선택이 됩니다:

객체의 메서드를 화살표 함수로 정의하면 this가 해당 객체에 바인딩되지 않습니다. 대신 객체 리터럴이 작성된 위치(보통 모듈이나 전역 스코프)의 this를 그대로 물려받게 되죠. 그래서 메서드를 정의할 때는 단축 메서드 문법(greet() { ... })을 쓰는 게 맞습니다.

클래스의 프로토타입 메서드, this가 실제 엘리먼트를 가리켜야 하는 이벤트 핸들러, 그리고 new와 함께 호출할 생성자도 마찬가지입니다. 이런 상황에서는 일반 function이 정답입니다.

한눈에 보는 선택 기준

• 짧은 콜백에 표현식 하나뿐인가? → 화살표 함수.
• 바깥 스코프의 this를 그대로 유지하고 싶은가? → 화살표 함수.
• 객체나 클래스 프로토타입의 메서드를 정의하는가? → 일반 함수(또는 단축 메서드 문법).
• 생성자를 작성하는가? → 일반 함수, 또는 가급적 class를 사용하세요.

실무 자바스크립트 코드베이스에서는 두 스타일이 전부 섞여 있습니다. 어떤 상황에 어떤 걸 써야 하는지는 다른 사람의 코드를 몇 주만 읽다 보면 자연스럽게 감이 잡히고, 그다음부터는 거의 무의식적으로 선택하게 됩니다.

다음: 매개변수와 기본값

화살표 함수든 일반 함수든 매개변수 기능은 똑같이 공유합니다. 기본값, 나머지 매개변수(rest parameter), 구조 분해 할당 등이 전부 그렇죠. 다음 페이지에서 다룰 내용이며, 지금까지 살펴본 모든 형태의 함수에 공통으로 적용됩니다.