ES6 함수의 추가기능
- ES6 이전까지의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있었다. 이것은 실수를 유발시킬 수 있으며 성능면에서도 손해이다. 이러한 문제를 해결하기 위해 ES6에서는 함수를 사용 목적에 따라 일반함수, 메서드, 화살표 함수로 구분했다.
- ES6 사양에서 메서드는 메서드 축약 표현으로 정의된 함수만을 의미한다.또한 메서드는 인스턴스를 생성할 수 없는 non-constructor이다.
const obj = {
x: 1,
// foo 는 메서드이다.
foo() { retun this.x },
}
console.log(obj.foo()); // 1
new obj.foo(); // TypeError non-constructor로 생성자 함수로서 호출할 수 없다.
obj.foo.hasOwnProperty('prototype') // false prototype 프로퍼티가 없고, 프로토타입도 생성하지 않는다.- 화살표 함수는 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용하다. 아래는 화살표 함수와 일반 함수의 차이점이다.
3-1 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor이다.
3-2 중복된 매개변수 이름을 선언할 수 없다.
3-3 화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다.
// 화살표 함수
const mutiply = (x,y) => x+y;
// 함수 선언문으로 정의 불가능, 함수 표현식으로 정의해야 한다.
const sum = (a,b) => {
const result = a + b;
return result;
};
// 여러개의 문인 경우 {} 생략 불가능- 화살표 함수는 함수 자체의 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']- 화살표 함수는 함수 자체의 super 바인딩을 갖지 않고 this 와 마찬가지로 상위 스코프의 super를 참조한다.
class Base {
constructor(name) {
this.name = name ;
}
sayHi() {
return `Hi${this.name}`;
}
}
class Derived extends Base {
// 화살표 함수의 super는 상위 스코프인 constructor의 super를 가리킨다.
sayHi = () => `${super.sayHi()} how are you doing?`;
}
const derived = new Derived('Lee');
console.log(derived.sayHi()); // Hi! Lee how are you doing?-
화살표 함수는 함수 자체의 argument 바인딩을 갖지 않는다. 따라서 화살표 함수 내부에서 arguments를 참조하면 this 와 마찬가지로 상위 스코프의 arguments를 참조한다.
-
Rest파라미터는 매개변수 이름 앞에 세개의 점을 붙여서 사용하낟. 함수에 전달된 인수들의 목록을 배열로 전달받는다.
function foo(...rest) {
console.log(rest); // [1,2,3,4,5]
}
foo(1,2,3,4,5);
// ...rest 파라미터를 일반 매개변수와 함께 쓸 수 있으며 rest 파라미터가 먼저오거나 두개를 사용할 수는 없다.
function bar(param, ...rest){
console.log(param); // 1
console.log(rest); // [2,3,4,5]
}
foo(1,2,3,4,5);- 함수를 호출할 때 매개변수의 개수와 인수의 개수가 일치하지 않아도 에러가 발생하지 않는다. 인수가 전달되지 않은 매개변수의 값은 undefined 이다. ES6에서는 매개변수 기본값을 사용하여 함수 내에서의 인수 체크 및 초기화를 간소화 할 수 있다.
function sum(x = 0, y = 0){
return x + y;
}
console.log(sum(1,2)); // 3
console.log(sum(1)); //1 
뉴비