Arrow Function에 대해 알아보자.

Arrow Function

함수를 화살표로 표현한 방식이다. 코드가 간결하다는 장점이 있다.
바깥에 있던 this 값을 내부에서 그대로 사용하기에 함수 내의 this값을 변경시키지 않는다.
예시를 살펴보자.

document.addEventListener("click", function (e) {
  console.log(this); // event.currentTarget
});

일반 함수의 this는 event.currentTarget을 가르킨다.

document.addEventListener("click", e => {
  console.log(this); // window
});

화살표 함수의 this는 부모의 this에 영향(lexical context)을 받아 window객체를 가르킨다.

아래는 다른 예시이다.

const obj = {
  names: ["김", "이", "박"],
  fnc: function () {
    console.log(this); // obj를 가르킨다.
    obj.names.forEach(function () {
      console.log(this); // window를 가르킨다.
    });
  },
};

일반함수에서의 this이기에 window객체를 가르키는 것을 볼 수 있다. 그렇기에 window객체가 아닌 다른 객체를 사용하고 싶다면 bind, aplly, call을 사용하여 window가 아닌 다른 객체로 적용 시켜줘야한다.

Arrow function으로 변경해보자.

const obj = {
  names: ["김", "이", "박"],
  fnc: function () {
    console.log(this); // obj를 가르킨다.
    obj.names.forEach(() => {
      console.log(this); // obj를 가르킨다.
    });
  },
};

상위에 this가 오브젝트이기에 Arrow function 안에 있는 this도 오브젝트를 가르키는 것을 볼 수 있다.

그래서 bind, call, apply를 사용할 이유가 없다.

참고

https://codingapple.com/unit/es6-3-arrow-function-why/?id=2447