ES6. Arrow Function
Arrow function
화살표 함수는 function 키워드 대신 화살표 => 를 사용하여 간략한 방법으로 함수를 선언할 수 있다.
() => {...} // 매개변수가 없을 경우
x => {...} // 매개변수가 한 개인 경우, 소괄호 생략가능
(x, y) => {...} // 매개변수가 여러개인 경우, 소괄호 생략불가화살표 함수는 익명 함수로만 사용 가능하다. 대게, 함수표현식이나 콜백 함수로 사용할 수 있다.
// ES5
var fn = function(x) { return x * x };
console.log(fn(10)); // 100
// ES6
const fn = x => x * x;
console.log(fn(10)); // 100// ES5
var arr = [1, 2, 3];
var newArr = arr.map(function(x) {
return x * x;
})
console.log(newArr); // [1, 4, 9]
// ES6
const arr = [1, 2, 3];
const newArr = arr.map(x => x * x);
console.log(newArr); // [1, 4, 9]this 바인딩
일반 함수의 경우, 해당 함수를 호출하는 패턴에 따라 this에 바인딩되는 객체가 달라진다. 콜백 함수 내부의 this는 전역 객체(window)를 가리킨다.
// ES5
function Person(say) {
this.say = say;
};
Person.prototype.sayName = function(arr) {
console.log(this.say);
return arr.map(function(x) {
return this.say + ', ' + x;
}.bind(this));
};
var person = new Person('Hi');
console.log(person.sayName(['Kim', 'Lee']));
// ES6
function Person(say) {
this.say = say;
};
Person.prototype.sayName = function(arr) {
return arr.map(x => `${this.say}, x`);
};
const person = new Person('Hi');
console.log(person.sayName(['Kim', 'Lee']));methods
화살표 함수로 메소드를 정의하면 함수 내부의 this는 메소드를 호출한 객체를 가리키지 않고 상위 컨택스트인 전역 객체 window를 가리킨다.
메소드에 화살표 함수를 적용시키려면 축약 메소드 표현을 사용해야 한다.
// Bad
const person = {
name: 'Kim',
sayHi: () => console.log(`Hi, ${this.name}`)
};
person.sayHi(); // Hi, undefined
// Good
const person = {
name: 'Kim',
sayHi() { console.log(`Hi, ${this.name}`) }
}
person.sayHi(); // Hi, Kimprototype
메소드와 같은 현상이 일어나므로 사용을 기피해야 한다.
// Bad
const person = {
name: 'Kim',
};
Object.prototype.sayHi = () => console.log(`Hi, ${this.name}`);
person.sayHi(); // Hi, undefined
// Good
const person = {
name: 'Kim',
};
Object.prototype.sayHi = function() {
console.log(`Hi ${this.name}`);
};
person.sayHi(); // Hi KimaddEventListener() 콜백 함수
addEventListener() 의 콜백 함수를 화살표 함수로 정의하면 this가 상위 컨택스트인 전역 객체 window를 가리킨다.
var button = document.getElementById('btn');
button.addEventListener('click', () => {
console.log(this === window); // true
});생성자 함수
화살표 함수는 생성자 함수로 사용할 수 없다.
생성자 함수는 prototype 프로퍼티를 가지며 prorotype 프로퍼티가 가리키는 프로토타입 객체의 constructor를 사용한다. 하지만 화살표 함수는 prototype 프로퍼티를 가지고 있지 않는다.
