ES6 추가 기능

자바스크립트의 함수는 일반적인 함수로서 호출할 수도 있고, new연산자와 함께 호출하여 인스턴스를 생성할 수 있는

생성자 함수로서 호출할 수도 있으며, 객체에 바인딩되어 메서드로서 호출할 수 도 있다. 이는 언뜻 보면 편리한 것 같지만 실수를 유발시킬 수 있으며 성능면에서도 손해라고 한다. 왜 일까?

 

ES6 이전에 일반적으로 메서드라고 부르던 객체에 바인딩된 함수도 호출할 있는 함수 객체 callable이며 constructor이다 인스턴스를 생성할 수 있는 함수 객체를 === constructor,  인스턴스 생성 불가 함수 객체 === non-constructor

 

 

 

 

 

 

객체에 바인딩된 함수를 생성자 함수로 호출 가능하다는 것은 문제가 있다고 한다.

객체에 바인딩된 함수가 constructor라는 것은 객체에 바인딩된 함수가 prototype 프로퍼티를 가지며

프로토타입 객체도 생성한다는 것을 의미하기 때문이다.

콜백함수도 constrctor이기 때문에 불필요한 프로토타입 객체를 생성한다.

 

ES6에서는 함수를 사용목적에 따라 세가지 종류로 명확히 구분했다.

메서드

ES6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다.

ES6 사양에서 정의한 메서드는 인스턴스를 생성할 수 없는 non-constructor이다.

ES6메서드는 메서드 생성자로 호출 불가능하다

추가로 ES6 메서드는 자신을 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObjec]]를 갖는다.

super 키워드는 내부 슬롯 [[HomeObject]]를 사용하여 super클래스의 메서드를 참조하므로 내부 슬롯 

[[HomeObject]]를 갖는 ES6 메서드는 super키워드를 사용할 수 있다.

화살표 함수

화살표 함수화 일반함수의 차이

화살표 함수는 인스턴스를 생성할 수 없는 non-constructor 이다.

중복된 매개변수 이름을 선언할 수 없다.

화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다.

상위 스코프의 this, arguments, super, new target을 참조한다.

 

화살표 함수는 함수 자체의 this바인딩을 갖지 않는다, 따라서 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조한다. 이를 렉시컬 this라 부른다.

 

화살표 함수 자체의 super 바인딩을 갖지 않는다. super를 참조하면 this와 마찬가지로  상위 스코프의 this를 참조한다.

arguments

arguments객체는 함수를 정의할 때 매개변수의 개수를 확정할 수 없는 가변 인자 함수를 구현할 때 사용 가능하다

화살표 함수는 함수 자체의 arguments 바인딩을 갖지 않는다. this와 마찬가지로 상위 스코프의 arguments를 참조한다.

 

책 : Modern 자바스크립트 deep dive