javascript 화살표 함수

ES6에서 새로 도입한 화살표 함수(arrow function)에 대하여 알아보자

MDN

화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고  

자신의 this, arguments, super 또는 new.target을 바인딩하지 않습니다. 

 

함수 표현식

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

 

 

화살표 함수

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

 

화살표 함수는 function 키워드를 화살표로 축약해서 표시할 수 있다.

함수에 return 문만 있는 경우,

화살표 함수는 return을 생략할 수 있다.

또한 return을 생략할 시에 ( )를 사용할 수 있지만 { }는 사용해서는 안된다.

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

 

화살표 함수를 클로저에서 적용할 시 간단히 표현 가능하다.

// const adder = function(x) {
//   return function(y) {
//     return x + y
//   }
// }

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

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

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

 

화살표 함수는 자신의 this가 없다. 

대신 화살표 함수를 둘러싼 scope의 this가 사용된다.

function Person(){
  this.age = 0;

  setInterval(() => { // setInterval 함수의 특징으로 this는 전역을 표시
    this.age++; // 하지만 화살표 함수의 특징으로 this는 Person 객체를 참조한다.
  }, 1000);
}

 

화살표 함수는 call, apply, bind 등의 메서드들 또한 사용할 수 없다.

이러한 특징으로 화살표 함수를 사용할 때 용도에 맞게 적절히 사용해야 한다.