화살표함수(arrow function)

Yun Hyuk Ko·2021년 2월 11일
0

ES6에서 새로 도입한 화살표 함수(arrow function)와 일반 함수를 비교해보자. 보통 함수 표현식을 축약한 형태로 표시된다.

함수 표현식

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

화살표 함수

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

화살표 함수는 function 키워드를 화살표로 축약해서 표시할 수 있다.
함수의 본문(body)에 return 문만 있는 경우, 화살표 함수는 return을 생략할 수 있다.
이 때 주의해야 할 점은 {} 중괄호(curly brace)는 사용하면 안됩니다.

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

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

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

화살표 함수는 클로저를 표현할 때 더욱 강력하다. 다음은 클로저의 한 예시이다.

함수 표현식

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

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

화살표 함수의 특징

화살표 함수는 다음과 같은 특징이 있다.

  • call, apply, bind를 사용할 수 없다.
  • 화살표 함수의 실행은 this를 결정짓지 않는다.
profile
기억보다 좋은건 기록이다

0개의 댓글