더북(TheBook)

보다시피, 화살표 함수의 간결한 형태는 말 그대로 받아들이는 매개변수의 이름일 뿐이다. 화살표(=>)는 파서(parser)에게 이것이 화살표 함수임을 알리고, 표현식은 반환하는 값을 정의할 뿐이다. 이게 다다. function 키워드, 함수 본문을 정의하는 중괄호, return 키워드는 없다. 매개변수, 화살표, 본문 표현식만 있다.

화살표 함수가 여러 매개변수를 받아들이도록 하려면 매개변수 목록을 괄호로 묶어 모두가 화살표 함수의 매개변수임을 명확히 해야 한다. 예를 들어 배열을 필터링하는 대신 정렬하려면 다음을 수행한다.

const array = [42, 67, 3, 23, 14];
array.sort((a, b) => a - b);
console.log(array); // [3, 14, 23, 42, 67]

매개변수 주위의 괄호를 확인하자. 문법에 왜 이런 게 들어갔을까? 이게 없었다면 어떻게 보일지 생각해 보자.

array.sort(a, b => a - b);

문제를 찾았는가? 맞다! 정렬 메서드에 두 개의 인수를 전달하는 것처럼 보인다. a라는 변수와 화살표 함수 b => a - b이다. 따라서 매개변수가 여러 개인 경우 괄호가 필요하다(일관성을 유지하려면 매개변수가 하나만 있더라도 괄호를 사용한다).

타이머 콜백에서와 같이 매개변수를 허용할 필요가 없는 경우에도 괄호를 사용한다. 괄호 안은 비워 두면 된다.

setTimeout(() => console.log("timer fired"), 200);

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.