Arrow Function
화살표 함수 식(arrow function expression)은 function 표현에 비해
구문이 짧고 자신의 this, arguments, super 또는 new.target을
바인딩 하지 않습니다.
화살표 함수는 항상 "익명(Anonymous)"입니다. 이 함수 표현은 메소드 함수가
아닌 곳에 가장 적당합니다. 그래서 생성자 함수로 사용할 수 없습니다.
영상 강의
PART 1
codepen
예제
종종 다음과 같이 중첩된 함수 안에서 this의 컨텍스트(context)를 보존해야 할 필요가 있습니다.
아래 코드에서 map의 콜백 함수 내부 this는 person 객체가 아닌 undefined를 가리킵니다.
function Person(name) {
// this는 new.tareget을 참조합니다.
this.name = name;
}
Person.prototype.prefixName = function (arr) {
return arr.map(function (character) {
// this는 undefined 입니다.
// Cannot read property 'name' of undefined
return this.name + character;
});
};
보통 이 문제를 해결하기 위해 다음과 같이 별도의 변수를 사용해서 this의 컨텍스트를 저장합니다.
function Person(name) {
this.name = name;
}
Person.prototype.prefixName = function (arr) {
var _this = this; // this의 컨텍스트를 참조하는 변수를 설정합니다.
return arr.map(function (character) {
return _this.name + character;
});
};
또는 다음과 같이 map 메서드의 컨텍스트 참조로 this를 전달할 수 있습니다.
function Person(name) {
this.name = name;
}
Person.prototype.prefixName = function (arr) {
return arr.map(function (character) {
return this.name + character;
}, this);
};
뿐만 아니라 map 메서드에 함수의 bind 메서드를 사용해 컨텍스트를 this로 변경 할 수도 있습니다.
function Person(name) {
this.name = name;
}
Person.prototype.prefixName = function (arr) {
return arr.map(function (character) {
return this.name + character;
}.bind(this));
};
ES6+ 화살표 함수를 사용하면, this의 컨텍스트가 변경되지 않아 위의 코드는 다음과 같이 다시 쓸 수 있습니다.
function Person(name) {
this.name = name;
}
Person.prototype.prefixName = function (arr) {
return arr.map(character => {
// this 컨테스트는 Person 객체입니다.
return this.name + character;
});
};
권장
this의 컨텍스트를 보존해야 할 경우 화살표 함수를 사용하세요.
화살표 함수는 간단한 값을 리턴하는 함수(함수 표현식)가 필요할 때 사용하면 보다 코드가 간결해집니다.
map 메서드의 콜백 함수로 함수식을 사용한 코드
const arr = [1, 2, 3, 4, 5];
const squares = arr.map(function (x) { return x * x });
map 메서드의 콜백 함수로 화살표 함수식을 사용한 코드
const squares = arr.map((x) => { return x * x });
// 또는
const squares = arr.map(x => { return x * x });
// 또는
const squares = arr.map(x => x * x);
권장
프로젝트에서 ES6+ 사용할 경우 가능하다면 함수 식 대신 화살표 함수 식을 활용하세요.