[ES6] 화살표 함수에 대한 추가 정보

[gabrielyoon7]

#10 을 읽고 추가로 글을 작성합니다.

저희가 작업할 때에는 화살표 함수를 사용하지 않았어서 생소하신 분들이 계실 수도 있을 것 같아요.
(정확히는 당시에 화살표 함수를 몰라서 사용하지 못했던 문제입니다.)

예시 자료를 잘 설명해주셨고, 소개해주신 설명이면 프로젝트 하는데 전혀 지장이 없습니다.

이왕 글이 올라온 김에 부연 설명을 드리자면...

1. 화살표 함수는 생성자 함수(new로 인스턴스 생성하는 기능)로 사용이 불가능합니다.
2. 언급하셨던 것 처럼 this 바인딩 방식이 다릅니다. (이전에는 this가 콜백 함수 내부에서 전역 객체를 가리키는 문제가 있었습니다.)
3. 일반 함수와 달리 프로토타입이 없고, 아규먼츠 객체도 생성하지 않습니다.

---

ES6 이전에는 JS의 함수가 명확한 구분이 없어 호출 방식에 대한 특별한 제약이 없었으나, 지금은 일반 함수, 메서드, 화살표 함수로 구분됩니다.

일반 함수는 constructor라고 부르고, 화살표 함수를 non-constructor라고 부르는 이유가 위 3개의 설명과 연관이 있으니 잘 찾아보시면 좋을 것 같아요.

지원하는 기능을 체크해보면 다음과 같습니다.

일반 함수

• constructor
• prototype
• super
• arguments

메서드

• constructor
• prototype
• super
• arguments

화살표 함수

• constructor
• prototype
• super
• arguments

---

주의할 점.

화살표 함수는 선언문으로 정의할 수 없습니다.

함수 표현식으로 정의해야 합니다.
즉, 기존에는 function을 선언 하고, 이후에 function을 사용했다면
화살표 함수에서는 처음부터 함수 표현식으로 정의해야합니다.
함수 표현식은 성원님(@wontory)이 위에 예제를 잘 주셨으니, 참고하시면 좋을 것 같습니다.

화살표 함수는 일급 객체 입니다.

즉, map, filter, reduce, sort 등등 고차함수에 인수로 전달하는 것이 가능합니다.
또, ES6 이전의 function 표현식 보다 훨씬 간결하므로 사용 하는 것을 적극 권장합니다.

// ES5
[1,2,3].map(function(n){
    return n*2;
});

// ES6
[1,2,3].map(n=>n*2);

일반 함수와 달리 중복된 매개 변수 이름을 선언할 수 없습니다.

use strict 모드에서는 에러가 발생하긴 하지만, 기존 일반 함수에서는 오류가 발생하지 않았습니다(...)

함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않습니다.

혹시라도 화살표 함수 내부에서 사용한다면, 상위 스코프에서 찾으려고 할 겁니다.

MDN 참고자료

[wontory]

부연설명 감사합니다.