[자바스크립트] 다시 보는 화살표 함수

 

화살표 함수

• 화살표 함수는 단순히 함수를 ‘짧게’ 쓰기 위한 용도로 사용되지 않는다.
• 자바스크립트에선 함수를 생성하고 그 함수를 어딘가에 전달하게 되면 함수의 컨텍스트를 잃을 수 있다.
• 이럴 때 화살표 함수를 사용하면 현재 컨텍스트를 잃지 않는다.

​

화살표 함수에는 'this’가 없다!

• 화살표 함수엔 this가 없기 때문에 외부에서 값을 가져온다.

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

  showList() {
    this.students.forEach(
      student => alert(this.title + ': ' + student)
      // 1모둠: 보라, 1모둠: 호진, 1모둠: 지민
    );
  }
};

group.showList();

• forEach에서 화살표 함수를 사용했기 때문에 화살표 함수 본문에 있는 this.title은 화살표 함수 바깥에 있는 메서드인 showList가 가리키는 대상과 동일해진다. (this.title은 group.title과 같다.)
• 위 상황에서 일반 함수를 사용했다면 에러 발생!

 

⚠️ 화살표 함수는 new와 함께 실행할 수 없다.

• this가 없기 때문에 화살표 함수는 생성자 함수로 사용할 수 없다는 제약이 있다.

 

 

화살표 함수엔 'arguments’가 없다!

• 화살표 함수는 모든 인수에 접근할 수 있게 해주는 유사 객체 배열 arguments를 지원하지 않는다.
• 이러한 특징으로 현재 this 값과 arguments 정보를 함께 실어 호출을 포워딩해 주는 데코레이터를 만들 때 유용하게 사용된다.

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

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

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

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

 

 

📌 참고

• 모던 JavaScript 튜토리얼