October 17, 2021

화살표 함수(arrow function)에 대해 다시 논의해봅시다.

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

자바스크립트를 사용하다 보면 저 멀리 동떨어진 곳에서 실행될 작은 함수를 작성해야 하는 상황을 자주 만나게 됩니다.

예시:

• arr.forEach(func) – func는 forEach가 호출될 때 배열 arr의 요소 전체를 대상으로 실행됩니다.
• setTimeout(func) – func는 내장 스케줄러에 의해 실행됩니다.
• 기타 등등…

이처럼 자바스크립트에선 함수를 생성하고 그 함수를 어딘가에 전달하는 것이 아주 자연스럽습니다.

그런데 어딘가에 함수를 전달하게 되면 함수의 컨텍스트를 잃을 수 있습니다. 이럴 때 화살표 함수를 사용하면 현재 컨텍스트를 잃지 않아 편리합니다.

화살표 함수에는 '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과 같습니다.

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