26.1 함수의 구분
ES6 이전의 함수는 별다른 구분 없이 다양한 목적으로 사용되었다.
- 일반적인 함수
- new 연산자와 함께 호출하여 인스턴스를 생성할 수 있는 생성자 함수
- 객체에 바인딩된 메서드
이는 언뜻 보면 편리한 것 같지만 실수를 유발시킬 수 있으며 성능 면에서 손해다.
var foo = function () {
return 1;
}
// 일반적인 함수로서 호출
foo(); // -> 1
// 생성자 함수로서 호출
new foo(); // -> foo {}
// 메서드로서 호출
var obj = { foo: foo };
obj.foo(); // -> 1즉, ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다..
다시말해 ES6 이전의 모든 함수는 callable이면서 constructor다.
따라서 일반적으로 메서드라고 부르던 객체에 바인딩된 함수, 함수에 전달되어 보조 함수의 역할을 수행하는 콜백 함수도 callable이며 constructor이다.
여기서 발생하는 가장 큰 문제는 다음과 같다.
- 생성자 함수로 호출하는 것이 문법적으로 가능하다.
- 불필요한
prototype프로퍼티를 가지기 때문에 프로토타입 객체를 생성한다. 이는 성능 면에 문제가 있다.
따라서 ES6에서는 함수를 사용 목적에 따라 세 가지 종류로 명확히 구분했다.
| ES6 함수의 구분 | constructor | prototype | super | arguments |
|---|---|---|---|---|
| 일반 함수(Normal) | O | O | X | O |
| 메서드 함수(Method) | X | X | O | O |
| 화살표 함수(Arrow) | X | X | X | x |
26.2 메서드
ES6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다
const obj = {
x: 1,
// foo는 ES6 기준, 메서드다.
foo() {
return this.x;
},
// bar는 ES6 기준, 메서드가 아니다.
bar: function () {
return this.x;
},
};
console.log(obj.foo()); // 1
console.log(obj.bar()); // 1ES6 메서드는 인스턴스를 생성할 수 없는 non-constructor다. 따라서 ES6 메서드는 생성자 함수로서 호출할 수 없다.
그리고 prototype 프로퍼티가 없으며 프로토타입도 생성하지 않는다.
참고로 표준 빌트인 객체가 제공하는 프로토타입 메서드와 정적 메서드는 모두 non-constructor 다.
String.prototype.toUpperCase.prototype; // undefinedES6 메서드는 자신을 바인딩한 객체를 가리키는 내부 슬롯 [[HomeObject]]를 갖는다. super참조는 내부 슬롯 [[HomeObject]]를 사용하여 수퍼클래스의 메서드를 참조하므로 내부 슬롯 [[HomeObject]]를 갖는 ES6 메서드는 super키워드를 사용할 수 있다.
const base = {
name: 'Lee',
sayHi() {
return `Hi! ${this.name}`;
}
};
const derived = {
__proto__: base,
sayHi() {
return `${super.sayHi()}, how are you doing?`;
}
}이처럼 ES6 메서드는 본연의 기능(super)를 추가하고 의미적으로 맞지 않는 기능(constructor)는 제거했다.
따라서 메서드를 정의할 때 프로퍼티 값으로 익명 함수 표현식을 할당하는 ES6 이전의 방식은 사용하지 않는 것이 좋다.
26.3 화살표 함수
화살표 함수는 function 키워드 대신 화살표(=>, fat arrow)를 사용하여 기존의 함수 정의 방식보다 간략하게 함수를 정의한다.
이는 표현만 간략한 것이 아니라 내부 동작도 기존의 함수보다 간략하다.
26.3.1 화살표 함수 정의
함수 정의
화살표 함수는 함수 표현식으로 정의해야 한다. 호출 방식은 기존 함수와 동일하다.
const multiply = (x,y) => x * y;
multiply(2, 3) // -> 6매개변수 선언
매개변수가 한 개인 경우 소괄호를 생략할 수 있다.
const arrow = x => { ... };함수 몸체 정의
만약 함수 몸체 내부의 문이 값으로 평가될 수 있는 표현식인 문이라면 함수 몸체를 감싸는 중괄호를 생략할 수 있다.
const power = x => x ** 2;
power(4); // 16
// 위 표현은 다음과 동일하다.
const power = x => { return x ** 2 };만약 객체 리터럴을 반환한다면 이는 중괄호가 다르게 해석될 수 있으므로 소괄호로 감싸주어야 한다.
그냥 웬만하면 가독성을 위해 소괄호를 쓰는 것이 좋아보이네.
화살표 함수도 일급 객체이므로 Array.prototype.map, Array.prototype.filter, Array.prototype.reduce 같은 고차 함수에 인수로 전달할 수 있다.
[1, 2, 3].map(e => e*2); // [2, 4, 6]26.3.2 화살표 함수와 일반 함수의 차이
-
화살표 함수는 인스턴스를 생성할 수 없는
non-constructor다. -
중복된 매개변수 이름을 선언할 수 없다.
const arrow = (a, a) => a + a; // SyntaxError: Duplicate parameter name not allowed in this context물론 일반 함수도
strict mode에서는 에러가 발생한다. -
화살표 함수는 함수 자체의
this,arguments,super,new.target바인딩을 갖지 않는다.만약 화살표 함수 내부에서 위 바인딩을 참조하면 스코프 체인을 통해 가장 가까운 상위 함수 중에서 화살표 함수가 아닌 함수의
this,argument,super,new.target을 참조한다.
26.3.3 this
ES6 이전에는 콜백 함수 내부의 this문제를 해결하기 위해서 굉장히 기괴한 방법을 사용했다.
add(arr) {
return arr.map(function (item) {
return this.prefix + ' ' + item;
}.bind(this))
}
// 그만 알아보자.이를 화살표 함수를 통해서 해결할 수 있다.
화살표 함수는 함수 자체의 this 바인딩을 갖지 않는다. 따라서 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조한다. 이를 lexical this라 한다.
만약 화살표 함수가 중첩되어 있다면 스코프 체인을 통해 가장 가까운 상위 함수 중에서 화살표 함수가 아닌 함수의 this를 참조한다.
만약 화살표 함수가 전역 함수라면 화살표 함수의 this는 전역 객체를 가리킨다.
전역 함수의 상위 스코프는 전역이고 전역에서 this는 전역 객체를 가리키기 때문이다.
또한 화살표 함수는 함수 자체의 this 바인딩을 갖지 않기 때문에 Function.prototype.call, Function.prototype.apply, Function.prototype.bind 메서드를 사용해도 화살표 내부의 this를 교체할 수 없다.
프로퍼티 동적 추가
프로퍼티를 동적 추가할 때는 ES6 메서드 정의를 사용할 수 없으므로 일반 함수를 할당한다.
function Person(name) {
this.name = name;
}
Person.prototype.sayHi = function () { console.log(`Hi ${this.name}`); };
const person = new Person('Lee');
person.sayHi(); // Hi Lee만약 ES6 메서드를 동적 추가하고 싶다면 다음과 같이 작성하면 된다.
function Person(name) {
this.name = name;
}
Person.prototype = {
constructor: Person,
sayHi() { console.log(`Hi ${this.name}`); }
};
const person = new Person('Lee');
person.sayHi(); // Hi Lee클래스 필드 정의 제안을 사용하여 클래스 필드에 화살표 함수를 할당할 수도 있다.
class Person {
name = 'Lee';
sayHi = () => console.log(`Hi ${this.name}`);
}이는 다음과 같은 의미다.
class Person {
constructor() {
this.name = 'Lee';
this.sayHi = () => console.log(`Hi ${this.name}`);
}
}하지만 이는 프로토타입 메서드가 아니라 인스턴스 메서드가 된다.
따라서 메서드를 정의할 때는 그냥 ES6 메서드를 사용하는 것이 좋다.
class Person {
name = 'Lee';
sayHi() { console.log(`Hi ${this.name}`); }
}26.3.4 super, arguments
화살표 함수는 함수 자체의 super, arguments 바인딩을 갖지 않는다.
따라서 화살표 함수 내부에서 얘네들을 참조하면 this와 마찬가지로 상위 스코프의 super, arguments를 참조한다.
26.4 Rest 파라미터
26.4.1 기본 문법
Rest 파라미터(나머지 매개변수)는 매개변수 앞에 세개의 점 ...을 붙여서 정의한 매개변수를 의미한다.
**Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.
function foo(...rest) {
console.log(rest); // [1,2,3,4,5]
}
foo(1,2,3,4,5);만약 일반 매개변수와 Rest 파라미터를 같이 사용하면 앞에서부터 순서대로 할당된다.
function foo(param, ...rest) {
console.log(param); // 1
console.log(rest); // [2,3,4,5]
}
foo(1,2,3,4,5);그리고 Rest 파라미터는 함수 정의 시 선언한 매개변수 개수를 나타내는 함수 객체의 length 프로퍼티에 영향을 주지 않는다.
function foo(param, ...rest) {
console.log(param);
console.log(rest);
}
console.log(foo.length) // 126.4.2 Rest 파라미터와 arguments 객체
ES5에서는 가변 인자 함수의 경우 매개변수를 통해 인수를 전달받는 것이 불가능하므로 arguments 객체를 이용한 기괴한 방법으로 인수를 전달받았다.
function sum() {
var args = Array.prototype.slice.call(arguments);
return args.reduce(function (pre, cur) {
return pre + cur;
}, 0);
}
console.log(sum(1,2,3,4,5)); // 15ES6에서는 Rest 파라미터를 사용하여 가변 인자 함수의 인수 목록을 배열로 직접 전달받을 수 있다.
function sum(...args) {
return args.reduce((pre, cur) => pre + cur, 0);
}
console.log(sum(1,2,3,4,5)); // 1526.5 매개변수 기본값
만약 사용자가 매개변수의 개수보다 적게 인수를 전달하면 안되므로 이에 대한 체크를 하기 위해 ES6 이전에는 다음과 같은 기괴한 방식을 사용했다.
function sum(x, y) {
x = x || 0;
y = y || 0;
return x + y;
}
console.log(sum(1, 2)); // 3
console.log(sum(1)); // 1이것도 원하는 대로 정확히 동작하게 하기 위해서는 nullish coalescing operator
??를 사용하는 게 맞지만, 이건 ES2020에 추가된 연산자다;
ES6에서 도입된 매개변수 기본값을 사용하면 함수 내에서 수행하던 인수 체크 및 초기화를 간소화할 수 있다.
function sum(x = 0, y = 0) {
return x + y;
}