화살표 함수 란?
화살표 함수는 function 키워드 대신에 화살표(=>)를 사용해서 간략한 방법으로 함수를 선언할 수 있다.
화살표 함수 선언 방법
// 매개변수 지정 방법
() => { ... } // 매개 변수가 없을 때
x => { ... } // 매개 변수가 한 개인 경우 소괄호 생략이 가능하다.
(x, y) => { ... } // 매개 변수가 여려 개인 경우, 소괄호 생략이 불가능하다.
// 함수 몸체 지정 방법
x => { return x + x } // single line block
x => x + x // 함수 몸체가 한줄이면 중괄호 생략, 암묵적 return
() => { return { a: 1 }; }
() => ({ a: 1 }) // 객체 반환 시 소괄호 사용
() => { // multi line block
const x = 10;
return x + x;
}
화살표 함수 호출
화살표 함수는 익명 함수로만 사용되기때문에 함수를 호출하기 위해서는 함수 표현식을 사용한다.
// ES5
var pow = function(x) { return x + x };
// ES6
var pow = x => x + x;콜백 함수로도 사용할 수 있다. 이 경우에 일반적인 함수보다 표현식이 간결하다.
// ES5
var arr = [1, 2, 3];
var pow = arr.map(function(x){
return x + x;
});
// ES6
var arr = [1, 2, 3];
var pow = arr.map(x => x + x);this
화살표 함수의 this는 function 키워드로 선언한 함수의 this와 동작이 다르며 이 부분은 반드시 이해해야 한다.
일반 함수의 this
자바스크립트에서 일반 함수의 this는 함수 호출 방식에 의해서 동적으로 결정된다. 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.
콜백 함수 내부의 this는 전역 객체를 가르킨다.
function Prefixer(name) {
this.prefixer = prefixer;
}
Prefixer.prototype.prefixArray = function(arr) {
// ---- 1
return arr.map(function(x){
return this.prefix + ' ' + x; // ---- 2
});
}
var pre = new Prefixer('Hi');
console.log(pre.prefixArray(['Lee', 'Kim']))- 1번 지점의 this는 생성자 함수의 인스턴스이다.(위 경우 pre)
- 2번 지점의 this는 전역 객체(window or global)를 가르킨다. 생성자 함수와 객체의 메소드를 제외한 모든 함수의 this는 전역 객체(window or global)를 가르킨다.
화살표 함수의 this
화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 정해진다. 동적으로 결정되는 일반 함수와는 달리 화살표 함수는 항상 상위 스코프의 this를 가르킨다. 이를 Lexical this라고 한다.
function Prefixer(name) {
this.prefixer = prefixer;
}
Prefixer.prototype.prefixArray = function(arr) {
// this는 상위 스코프인 prefixArray 내의 this를 가르킨다.
return arr.map(x => `${this.prefix} ${x}`);
}화살표 함수는 call, apply, bind 메소드를 사용해서 this를 변경할 수 없다.
메소드
화살표 함수로 메소드를 정의하는 것은 피해야 한다.
const person = {
name: 'Lee',
sayHi: () => console.log(`Hi ${this.name}`)
}
person.sayHi(); // Hi undefined메소드로 정의한 화살표 함수 내부의 this는 메소드를 소유한 객체를 가르키지 않고 상위 컨텍스트인 window를 가르킨다. 따라서 화살표 함수로 메소드를 정의하는 것은 바람직하지 않다.
결론
화살표 함수는 간결하게 사용할 수 있다는 장점이 있지만 function으로 선언한 함수와 this가 다르게 동작하기 때문에 혼란을 야기할 수 있다. 따라서 자바스크립트 개발자라면 다르게 동작하는 this에 대해서 잘 이해하고 사용하면 좋을 것 같다.
