1. 함수의 구분
ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론, 생성자 함수로서 호출할 수 있다.
ES6 이전까지는 JS의 함수는 큰 구분 없이 다양한 목적으로 사용됨.
일반함수로서, 생성자 함수로서도 호출이 가능했으며, 객체에 바인딩되어 매서드로서도 호출할 수 있었으나, 코드 작성시 실수를 유발했으며 성능 면에서도 좋지 못했음.
이러한 문제를 해결하기 위해 ES6부터는 함수 사용 목적을 세가지 종류로 구분지었다.
| ES6 함수 구분 | constructor | prototype | super | arguments |
|---|---|---|---|---|
| 일반함수(Normal) | O | O | X | O |
| 메서드(Method) | X | X | O | O |
| 화살표 함수(Arrow) | X | X | X | X |
2. 메서드
ES6에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미함.
ES6에서 정의한 메서드는 인스턴스를 생성할 수 없는 non-constructor임.
따라서, ES6 메서드는 생성자 함수로서 호출이 불가능함.
(참고로, 표준 빌트인 객체가 제공하는 프로토타입 메서드와 정적 메서드는 모두 non-constructor이다.)
ES6 메서드는 자신을 바인딩한 객체를 가리키는 내부 슬록 [[HomeObject]]를 가지며, 이러한 [[HomeObject]]를 갖는 ES6 메서드는 super 키워드를 사용할 수 있음.
3. 화살표 함수
1) 함수 정의
함수 선언문으로 정의할 수 없으며, 함수 표현식으로 정의해야 함. (호출 방식은 기존 함수와 동일)
2) 매개변수 선언
매개변수가 한개일때는 소괄호를 생략 가능하며,
한개 이상인 경우일 때는() 소괄호 안에 매개변수를 선언해야 한다.
(또한, 매개변수가 없을때도 ()로 표시해야 함.)
const example1 = () => {~~~};
const example2 = a => {~~~};
const example3 = (b,c) => {~~~};3) 함수 몸체 정의
함수 몸체가 하나의 문으로 구성된다면 중괄호를 생략 할 수 있으며,
함수 몸체 내부의 문이 값으로 평가될 수 있는 표현식인 문이라면 암묵적으로 반환된다.
또한, 객체 리터럴 반환하는 경우 객체 리터럴을 소괄호로 감싸야 한다.
※ 화살표 함수와 일반함수 차이
- 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor.
- 중복된 매개변수 이름 선언이 불가능.
- 화살표 함수에서는 함수 자체의
this,arguments,super,new,target바인딩을 갖지 않는다.
3. this, super, arguments
this
화살표 함수는 함수 자체의 this를 갖지 않음.
화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 참조하는데, 이를 lexical this 라고 한다.
super
함수 자체의 super 바인딩을 갖지 않으며,
화살표 함수 내부에서 super를 참조하면 this와 마찬가지로 상위 스코프의 super를 참조하게 된다.
arguments
함수 자체의 arguments 바인딩을 갖지 않으며,
arguments를 참조하면 상위 스코프의 arguments를 참조한다ㅏ.
또한, 화살표 함수로 가변 인자 함수를 구현해야할때는 반드시 Rest 파라미터를 사용해야 한다.
4. Rest 파라미터
함수에 전달된 인수들의 목록을
배열로 전달받는다.
유사 배열 객체 arguments 객체를 배열로 변환할 필요 없다는 장점이 있으며,
함수와 ES6 메서드는 Rest 파라미터와 arguments 객체 모두 사용 가능하지만
화살표 함수는 Rest 파라미터만 사용이 가능하다
(함수 자체의 arguments 객체를 갖지 않기 때문!)
