모던 자바스크립트 Deep Dive 읽기 - 26장 : ES6 함수의 추가 기능

ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다. 그러나 객체에 바인딩된 함수나 보조 함수의 기능을 수행하는 콜백 함수도 생성자 함수로서 호출할 수 있는 것은 불필요한 프로토타입 객체를 생성한다. 이는 혼란스러우며 실수를 유발할 가능성이 있고 성능에도 좋지 않다. 이러한 문제를 해결하기 위해 ES6는 메서드와 화살표 함수를 도입했다. 

 

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

const odj = {
 (...)
 foo () {(...)} ;//메서드

ES6에서 정의된 메서드는 인스턴스를 생성할 수 없는 non-constructor다. 따라서 메서드는 생성자 함수로서 호출할 수 없다. ES6 메서드는 자신을 바인딩한 객체를 가리키는 내부 슬롯을 갖는다. 이를 통해 super 키워드를 사용할 수 있다. 

 

화살표 함수는 function 키워드 대신 화살표 =>를 사용하여 기존의 함수 정의 방식보다 간략하게 함수를 정의하며, 동작 또한 간략하다. 특히 화살표 함수는 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용하다. 화살표 함수와 일반 함수의 차이는 다음과 같다.

 

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

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

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

 

화살표 함수가 일반 함수와 구별되는 가장 큰 특징은 바로 this다. this 바인딩은 함수가 어떻게 호출되었는지에 따라 동적으로 결정된다. 그러나 화살표 함수는 함수 자체의 this 바인딩을 가지지 않는다. 화살표 함수 내부에서 this를 참조하면, 상위 스코프의 this를 그대로 참조한다. 이를 통해 화살표 함수는 다른 함수의 인수로 전달되어 콜백 함수로 사용되는 경우가 많다.

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

 

Rest 파라미터는 매개변수 이름 앞에 세개의 점을 붙여서 정의한 매개변수를 의미한다. Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다. 

Rest 파라미터는 이름 그대로 먼저 선언된 매개변수에 할당된 인수를 제외한 나머지 인수들로 구성된 배열이다. 따라서 Rest 파라미터는 반드시 마지막 파라미터어야 하며, 단 하나만 선언할 수 있다. 

 

함수를 호출할 때 매개변수 개수만큼 인수를 전달하는 것이 바람직하지만 그렇지 않은 경우에도 에러가 발생하지 않는다. 이러한 상황을 방지하기 위해 ES6 이전에는 단축 평가를 활용하여 기본값을 할당했다. ES6에는 매개변수 기본값이 도입되어 인수 체크 및 초기화를 간소화 할 수 있다. 

function sum( x = 0, y = 0) {
...