화살표 함수

화살표 함수는 단순히 함수를 ‘짧게’ 쓰기 위한 용도가 아니다. 몇 가지 독특하고 유용한 기능을 제공한다.

1️⃣ 화살표 함수에는 ‘this’가 없다.

---

화살표 함수엔 this가 없다. 화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 동적으로 결정되는 일반 함수와는 달리 화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다. 때문에 ‘화살표 함수 본문에서 this에 접근하면, 외부에서 값을 가져온다’ 는 말이 그 뜻이다.
객체의 메서드(showList())안에서 동일 객체의 프로퍼티(students)를 대상으로 순회를 하는 데 사용할 수 있다.

let group = {
  title: "1모둠",
  students: ["보라", "호진", "지민"],

  showList() {
    this.students.forEach(
      student => alert(this.title + ': ' + student)
    );
  }
};

group.showList();

예시의 forEach에서 화살표 함수를 사용했기 때문에 화살표 함수 본문에 있는 this.title은 화살표 함수 바깥에 있는 메서드인 showList가 가리키는 대상과 동일해진다. 즉 this.title은 group.title과 같다.

위 예시에서 화살표 함수 대신 ‘일반’ 함수를 사용했다면 에러가 발생했을 거다.

let group = {
  title: "1모둠",
  students: ["보라", "호진", "지민"],

  showList() {
    this.students.forEach(function(student) {
      // TypeError: Cannot read property 'title' of undefined
      alert(this.title + ': ' + student)
    });
  }
};

group.showList();

에러는 forEach에 전달되는 함수의 this가 undefined 이어서 발생했다. alert 함수에서 undefined.title에 접근하려 했기 때문에 얼럿 창엔 에러가 출력된다.
그런데 화살표 함수는 this 자체가 없기 때문에 이런 에러가 발생하지 않는다.

⭐️⭐️ 화살표 함수 자체에는 this가 없기 때문에 this에 접근하면 외부에서 값을 가져온다.

화살표 함수엔 ‘arguments’가 없다.

---

화살표 함수는 일반 함수와는 다르게 모든 인수에 접근할 수 있게 해주는 유사 배열 객체 arguments를 지원하지 않는다.

이런 특징은 현재 this 값과 arguments 정보를 함께 실어 호출을 포워딩해 주는 데코레이터를 만들 때 유용하게 사용된다.

아래 예시에서 데코레이터 defer(f, ms)는 함수를 인자로 받고 이 함수를 래퍼로 감싸 반환하는데, 함수 f는 ms 밀리초 후에 호출된다.

function defer(f, ms) {
  return function() {
    setTimeout(() => f.apply(this, arguments), ms)
  };
}

function sayHi(who) {
  alert('안녕, ' + who);
}

let sayHiDeferred = defer(sayHi, 2000);
sayHiDeferred("철수"); // 2초 후 "안녕, 철수"가 출력됩니다.

화살표 함수를 사용하지 않고 동일한 기능을 하는 데코레이터 함수를 만들면 다음과 같다.

function defer(f, ms) {
  return function(...args) {
    let ctx = this;
    setTimeout(function() {
      return f.apply(ctx, args);
    }, ms);
  };
}

일반 함수에선 setTimeout에 넘겨주는 콜백 함수에서 사용할 변수 ctx와 args를 반드시 만들어줘야 한다.

참조 :
https://ko.javascript.info/arrow-functions
https://poiemaweb.com/es6-arrow-function