티스토리 뷰
발생일: 2015.05.10
키워드: arrow function expression, fat arrow function
내용:
ES6에서는 익명함수를 화살표(`=>`)로 축약해 표현할 수 있다.
Arrow Function Expression 또는 Fat Arrow Function 이라고 부르며, 문법은 아래와 같다.
([param] [, param]) => {
statements
}
param => expression
param: 매개변수, 컴마로 구분하고 괄호로 싸서 호출한다. 파라미터가 한 개인 경우엔, 괄호를 생략해도 좋다.
statements or expression
여러 구문은 중괄호(brace, { })로 감싸준다. 한 개의 표현식이라면 중괄호를 생략해도 된다.
코드 샘플을 보면 이해하기 쉽다.
// 한 줄짜리 표현식
let square = x => x * x;
square(3); //-> 9
// 중괄호를 생략한 한 줄 표현식은 중괄호와 함께 리턴한 것과 동일하다.
let square2 = (x) => { return x * x; };
square2(3); //-> 9
// 파라미터로 전달하는 경우, 훨씬 간결하게 표현할 수 있다.
setTimeout(() => {
console.log('delayed');
}, 100);
let list = [1, 2, 3, 4];
list.filter(n => {
return n % 2 === 0;
}); //-> [2, 4];
list.reduce((sum, n) => sum + n, 0); //-> 10
// 즉시실행함수는 아래와 같이 표현할 수 있다.
(() => {
console.log('foo');
})();
// `=>`로 정의한 함수 내의 `this`는 현재 객체를 가리킨다.
let obj = {
getThis: function () {
var getter = () => this;
return getter();
}
};
obj.getThis() === obj; //-> true
// `this`는 lexical 범위 내의 `this`를 가리키므로,
// 아래 코드처럼 객체의 메서드에서 `this`를 사용하면 객체 선언을 감싸고 있는 함수의 `this`를 가리키게 된다.
(function () {
this.name = 'outer';
var inner = {
name: 'inner',
getName: () => {
return this.name;
}
};
inner.getName(); //-> 'outer'
}());
// Arrow Function 내에서 'use strict'; 구문을 정의한 경우,
// strict mode 의 `this`는 무시된다.
let obj = {
getThis: function () {
var getter = () => {
'use strict';
return this;
};
return getter();
},
getThis2: function () {
var getter = function () {
'use strict';
return this;
};
}
};
obj.getThis() === obj; //-> true
obj.getThis2() === undefined; //-> true
호환성
브라우저 중에서는 2015년 5월 현재 파이어폭스에서만 지원한다.
반응형
댓글
공지사항