기존 함수표현의 컴팩트한 대안으로 나온 ES6 문법

기존과의 차이점

• this, super에 대한 바인딩이 없다.
• arguments, new.target 키워드를 갖지 않는다.
• call, apply, bind메소드에 적합하지 않고, 일반적으로 스코프 설정에 의존적임.
• constructors 사용하지 않음
• yield 를 body안에 사용하지 않음

call, apply, and bind

3가지 메소드는 Arrow function에 적합하지 않다.

Arrow func는 다른 스코프내에서 실행될 수 있도록 설계되었기 때문임.

Arrow func은 정의된 스코프를 기반으로 this 를 설정하기 때문임.

예제

// ----------------------
// Arrow Example
// ----------------------

// A simplistic object with its very own "this".
var obj = {
    num: 100
}

// Setting "num" on window to show how it gets picked up.
window.num = 2020; // yikes!

// Arrow Function
var add = (a, b, c) => this.num + a + b + c;

// call
console.log(add.call(obj, 1, 2, 3)) // result 2026

// apply
const arr = [1, 2, 3]
console.log(add.apply(obj, arr)) // result 2026

// bind
const bound = add.bind(obj)
console.log(bound(1, 2, 3)) // result 2026

Arrow func의 가장 큰 benefits은 DOM level methods인 setTimeout, setInterval, addEventListener을 적절하게 실행하기 위해 클로저, call, apply, bind가 필요한 상황에서 사용할 수 있음.

=> 예제

// Arrow Function방식으로 호출할 때
function objFunction() {
  console.log('Inside `objFunction`:', this.foo);
  return {
    foo: 25,
    bar: () => console.log('Inside `bar`:', this.foo),
  };
}

objFunction.call({foo: 13}).bar(); // objFunction의 `this`를 오버라이딩합니다.

Inside `objFunction`: 13 // 처음에 인자로 전달한 값을 받음
Inside `bar`: 13 // Arrow Function에서 this는 일반 인자로 전달되었기 때문에 이미 값이 13로 지정됩니다.

• 화살표함수의 this 는 호출된 곳을 가리킨다.