자바스크립트 (화살표 함수)

1. 화살표 함수(Arrow Function)의 선언

// 매개변수 지정 방법
    () => { ... } // 매개변수가 없을 경우
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

// 함수 몸체 지정 방법
x => { return x * x }  // single line block
x => x * x             // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다.

() => { return { a: 1 }; }
() => ({ a: 1 })  // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.

() => {           // multi line block.
  const x = 10;
  return x * x;
};

위와 같은 방식으로 선언할 수 있는데, 객체를 반환할 땐 꼭 소괄호를 사용해서 return 해야한다

2. 화살표 함수의 호출방법

화살표 함수는 익명 함수로만 사용이 가능하다.
화살표 함수를 호출할 땐, 함수 표현식을 사용하거나 콜백함수에서 사용된다.

// 함수 표현식으로 사용
const pow1 = x => x * x;
console.log(pow1(10)); // 100

// 콜백 함수에서 사용
const arr = [1, 2, 3];
const pow2 = arr.map(x => x * x);

console.log(pow2); // [ 1, 4, 9 ]

3. 일반 함수와 다른 this 바인딩

화살표 함수의 this는 일반 함수와 달리 언제나 상위 스코프의 this를 가리킨다. 이를 Lexical this라 한다.

화살표 함수의 this 바인딩 객체 결정 방식은 함수의 상위 스코프를 결정하는 방식인 렉시컬 스코프와 유사하다. 즉, 클로저를 생각하면 쉽게 이해할 수 있다.

화살표 함수는 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.

var x = 1;
const normal = function () { return this.x; };
const arrow = () => this.x;

console.log(normal.call({ x: 10 })); // 10
console.log(arrow.call({ x: 10 }));  // 1

4. 화살표 함수를 사용하면 안되는 경우

메소드를 정의하는 경우

메소드로 정의한 화살표 함수 내부의 this는 메소드를 소유한 객체, 즉 메소드를 호출한 객체를 가리키지 않고 상위 컨택스트인 전역 객체 window를 가리킨다.

// Bad
const person = {
  name: 'Lee',
  sayHi: () => console.log(`Hi ${this.name}`)
};

person.sayHi(); // Hi undefined

addEventListener 함수의 콜백 함수

addEventListener 함수의 콜백 함수를 화살표 함수로 정의하면 this가 상위 컨택스트인 전역 객체 window를 가리킨다.

// Bad
var button = document.getElementById('myButton');

button.addEventListener('click', () => {
  console.log(this === window); // => true
  this.innerHTML = 'Clicked button';
});

일반 함수를 사용하면 this는 e.target.currentTarget 이다.

4. 화살표 함수에서는 arguments 프로퍼티가 없다.

화살표 함수에서는 함수 객체의 arguments 프로퍼티가 없다. 따라서 가변 인자를 구해야할 때 반드시 rest 파라미터를 사용해야 한다.

const arrowFunc = () => {};
console.log(arrowFunc.hasOwnProperty('arguments')); // false

참고
자바스크립트 기본