[JS] ES6의 Arrow Function를 알아보자!

Arrow function Expression

 

function 표현에 비해 구문이 짧고 자신의 this, argument, super 또는 new.target을 바인딩하지 않습니다. Arrow function은 항상 익명이며 이 함수 표현은 메소드 함수가 아닌 곳에 적합합니다. 그래서 생성자로서 사용할 수 없습니다.

​

​

Arrow(화살표) function은 => 문법을 사용하는 축약형 함수입니다. 표현식의 결과값을 반환하는 표현식 본문(expression bodies)뿐만 아니라 상태 블럭 본문(statement block bodies)도 지원합니다.

​

​

일반 함수의 자신을 호출하는 객체로 가리키는 dynamic this와 달리 arrows 함수는

코드의 상위 스코프(lexical scope)를 가리키는 lexical this를 가리킵니다.

​

 

var evens = [2, 4, 6, 8,];

// Expression bodies
// 표현식의 결과가 반환됨
var odds = evens.map(v => v + 1); // [3, 5, 7, 9]
var nums = evens.map((v, i) => v + i); // [2, 5, 8, 11]
var pairs = evens.map(v => ({even: v, odd: v + 1})); // [{even: 2, odd: 3}, ...] 

// Statement bodies
// 블럭 내부를 실행만 함, 반환을 위해선 return을 명시
var fives = [];
nums.forEach(v => {
    if (v % 5 === 0)
    fives.push(v);
}); // 5 하나만 fives 배열에 push 됩니다.

// Lexical this
// 출력결과 : Bob knows John, Brian
var bob = {
    _name: "Bob",
    _friends: ["John, Brian"],
    printFriends() {
        this._friends.forEach(f =>
            console.log(this._name + " knows " + f));
    }
}

 

 

printFriends()함수의 서브루틴은 다음과 문법상 동일하게 동작한다.

 

 

this._friends.forEach(function (f) { 
	console.log(this._name + " knows " + f)); 
}.bind(this));

 

 

#참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98

화살표 함수

https://github.com/lukehoban/es6features

lukehoban/es6features