[js 딥다이브] 26장 ES6 함수의 추가 기능

ES6 함수의 추가 기능

함수의 구분

ES6 함수의 구분	constructor	prototype	super	arguments
일반 함수(Normal)	◯	◯	✕	◯
메서드(Method)	✕	✕	◯	◯
화살표 함수(Arrow)	✕	✕	✕	✕

결론 : 불필요한 prototype을 없애는게 성능면에서 이득

메서드

메서드 축약 표현으로 정의된 함수만을 의미.
메서드는 생성자 함수로 호출할 수 없음.
자신을 바인딩한 객체를 가리키는 내부 슬롯 HomeObject를 갖는다. 메서드가 아닌 함수는 HomeObject가 없기때문에 super키워드를 사용할 수 없음.

const obj = {
  x: 1,
  foo() { //foo는 메서드
    return this.x;
  },
  bar: function() { //bar는 일반 함수
    return this.x;
  }
}

화살표 함수

객체 리터럴을 반환하는 경우 객체 리터럴을 소괄호 ()로 감싸 주어야 한다.

const create = (id, content) => ({ id, content });

화살표 함수도 일급 객체이므로 Array.prototype.map, Array.prototype.filter, Array.prototype.reduce같은 고차 함수Higher-Order Function, HOF에 인수로 전달할 수 있다.

// ES5
[1, 2, 3].map(function (v) {
 return v * 2;
});
// ES6
[1, 2, 3].map(v => v * 2); //  [ 2, 4, 6 ]

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

class Prefixer {
 constructor(prefix) {
 this.prefix = prefix;
 }
 add(arr) {
 return arr.map(item => this.prefix + item);
 }
}
const prefixer = new Prefixer('-webkit-');
console.log(prefixer.add(['transition', 'user-select']));
// ['-webkit-transition', '-webkit-user-select']

클래스 필드에 할당한 화살표 함수는 프로토타입 메서드가 아니라 인스턴스 메서드가 된다. 따라서 메서드를 정의할 때는 ES6 메서드 축약 표현으로 정의한 ES6 메서드를 사용하는 것이 좋다.

class Person {
 // 클래스 필드 정의
 name = 'Lee';
 sayHi() { console.log(`Hi ${this.name}`); }
}
const person = new Person();
person.sayHi(); // Hi Lee

화살표 함수는 super, arguments 바인딩이 없으므로 상위의 것을 참조함.

Rest 파라미터

반드시 마지막 파라미터여야함. 단 하나만 선언할 수 있음. length에 영향을 주지 않음.
순차적으로 할당됨.

function bar(param1, param2, ...rest) {
 console.log(param1); // 1
 console.log(param2); // 2
 console.log(rest); // [ 3, 4, 5 ]
}
bar(1, 2, 3, 4, 5);

함수와 ES6 메서드는 Rest 파라미터와 arguments 객체를 모두 사용할 수 있다. 하지만 화살표 함수는 함수 자체의 arguments 객체를 갖지 않는다. 따라서 화살표 함수로 가변 인자 함수를 구현해야 할 때는 반드시 Rest 파라미터를 사용해야 한다.

매개변수 기본값

function sum(x = 0, y = 0) {
 return x + y;
}
console.log(sum(1, 2)); // 3
console.log(sum(1)); // 1

Rest 파라미터는 기본값을 지정할 수 없음.