화살표 함수

function 키워드를 화살표로 축약해서 표시하는 함수를 표시하는 다른 방법이다.

화살표 함수(arrow function)와 일반 함수 비교

함수 표현식

const add = function(x, y) {
  return x + y;
}

화살표 함수

const add = (x, y) => { 
  return x + y
}

화살표 함수는 function 키워드를 화살표로 축약해서 표시한다.
함수의 본문(body)에 return 문만 있는 경우, 화살표 함수는 return 을 생략할 수 있다.( {} 중괄호(curly brace) 도 생략한다.)

const add = (x, y) => x + y // O, 정상 작동
const add = (x, y) => {x + y} // X, undefined 리턴

()소괄호(parentheses)를 사용하는 것은 가능하다. 이는 일반적인 수식에서의 "괄호 치기"와 동일하다

const add = (x, y) => (x + y) // O, 정상작동

만일 함수 내의 표현식이 두 줄 이상일 경우에는, return을 생략하기 보다는 중괄호와 return을 명시적으로 쓰는 것이 좋다.

bad

const getStudentAvg = arr => arr.filter(person => person.job === 'student').reduce((sum,person) => (sum + person.grade),0)

good

const getStudentAvg = arr => {
  return arr
  	.filter(person => person.job === 'student')
    .reduce((sum, person) => (sum + person), 0)
}

화살표 함수 예시

화살표 함수는 클로저를 표현할 때 더욱 강력하다.

함수 표현식

const adder = function(x) {
  return function(y) {
    return x + y;
  }
}
adder(5)(7) // 12

화살표 함수

먼저 function 키워드 없애기

const adder = (x) => {
  return (y) => {
    return x + y;
  }
}

가장 안쪽 return 부터 없애보자.
return 생략시에는 중괄호를 사용하지 않는다.
추가적으로, 파라미터가 단 한개라면, 소괄호를 생략할 수 있다.

const adder = x => {
  return y => x + y
}

마지막 남은 return 도 생략

const adder = x => y => x + y

이와같이 클로저는 연속된 여러개의 화살표로 표시할 수 있다.