자바스크립트 화살표 함수의 특징

모던자바스크립트 화살표함수를 읽고 정리하였다.

---

화살표 함수는 컨텍스트가 있는 긴 코드보다는 자체 '컨텍스트’가 없는 짧은 코드를 담을 용도로 만들어졌다.

 

그리고 이 목적에 잘 들어맞는 특징을 보인다.

 

화살표 함수가 일반 함수와 다른점은 다음과 같다.

 

• this를 가지지 않는다.
• arguments를 가지지 않는다.
• new와 함께 호출할 수 없다.
• super가 없다.

 

이 중 쉽게 확인할 수 있는 this와 arguments를 사용하지 않는 특징의 예시를 써보았다.

 

화살표 함수에는 this가 없다.

화살표 함수 내에서 this에 접근하면 외부에서 값을 가져온다.

• 화살표 내부에서 this 사용

다음 예시를 보자

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

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

group.showList();

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

위 예시를 실행시키면 alert창이 3번 뜨게 된다.

• 일반 함수 내부에서 this 사용

다음 예시를 보자.

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에 의해 접근하기 때문에 생기는 에러이다.

 

화살표 함수에는 arguments가 없다.

arguments는 함수의 모든 인수에 접근할 수 있게 해주는 유사 배열 객체이다.

화살표 함수는 arguments가 없다.

아래 코드를 개발자 도구 콘솔창에 복붙해보자.

function func1(a,b,c){
    console.log(arguments)
}

const func2 = (a,b,c) => {
    console.log(arguments)
}

func1(1,2,3)
func2(1,2,3)