ES6 Arrow Function

Arrow Function 참고

모질라 개발자 문서 (이외에도 좌측 메뉴에서 다양하게 살펴 볼 수 있다. )

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

화살표 함수 - JavaScript | MDN

 

ES6 를 ES5로 전환해서 살펴볼 수 있음 --> http://es6console.com/

 

아래는 모질라 문서에서 arrow 함수부분만 발췌해 했다.

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// 다음과 동등함: => { return expression; }

// 괄호는 매개변수가 하나뿐인 경우 선택사항:
(singleParam) => { statements }
singleParam => { statements }

// 매개변수가 없는 함수는 괄호가 필요:
() => { statements }

// 객체 리터럴 식을 반환하는 본문(body)을 괄호 속에 넣음:
params => ({foo: bar})

// 나머지 매개변수 및 기본 매개변수가 지원됨
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }

// 매개변수 목록 내 비구조화도 지원됨
var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f(); // 6




var a = [
"Hydrogen",
"Helium",
"Lithium",
"Beryl­lium"
];
var a2 = a.map(function(s){ return s.length });
var a3 = a.map( s => s.length );








//화살표 함수는 (자신을) 둘러싸는 문맥의 this 값을 담는다(capture), 그래서 다음 코드는 예상대로 작동
function Person(){
this.age = 0;

setInterval(() => {
this.age++; // |this| 는 정확히 person 객체를 참조
}, 1000);
}

var p = new Person();



//this가 렉시컬(lexical, 정적)임을 감안하면, this에 관한 엄격 모드 규칙은 그냥 무시
var f = () => {'use strict'; return this};
f() === window; // 또는 전역 객체


/*
렉시컬 arguments
화살표 함수는 코드에 arguments 객체를 노출하지 않음
arguments.length, arguments[0], arguments[1] 등은 호출될 때 화살표 함수에 제공되는 인수를 참조하지 않함
대신, arguments는 그저 둘러싸는 범위(scope) 내 이름에 대한 참조
*/
var arguments = 42;
var arr = () => arguments;

arr(); // 42

function foo() {
var f = (i) => arguments[0]+i; // foo 함수의 암시된 arguments 바인딩
return f(2);
}

foo(1); // 3

//화살표 함수는 자신의 arguments 객체가 없지만, 대부분의 경우에 나머지 매개변수로~
function foo() {
var f = (...args) => args[0];
return f(2);
}
foo(1); // 2



//화살표 함수는 "간결한 본문"이든 보통 "블록 본문"이든 하나를 가질 수 있다.
//블록 본문 형태는 자동으로 값을 반환하지 않습니다. 명시된 return 문을 사용할 필요가 있다.
var func = x => x * x; // 간결한 구문, 암시된 "return"
var func = (x, y) => { return x + y; }; // 블록 본문이면, 명시된 "return"이 필요




//간결한 구문 params => {object:literal}을 사용한 객체 리터럴 반환은 예상대로 작동하지 않함
var func = () => { foo: 1 }; // func() 호출은 undefined를 반환!
var func = () => { foo: function() {} }; // SyntaxError: function 문은 이름이 필요


//객체 리터럴를 괄호로 감싸야함.
var func = () => ({ foo: 1 });
// empty 화살표 함수는 undefined를 반환
let empty = () => {};

(() => "foobar")() // "foobar" 반환

var simple = a => a > 15 ? 15 : a;
simple(16); // 15
simple(10); // 10

let max = (a, b) => a > b ? a : b;

// 쉬운 배열 필터링, 매핑, ...

var arr = [5, 6, 13, 0, 1, 18, 23];
var sum = arr.reduce((a, b) => a + b); // 66
var even = arr.filter(v => v % 2 == 0); // [6, 0, 18]
var double = arr.map(v => v * 2); // [10, 12, 26, 0, 2, 36, 46]

// 더 간결한 프로미스 체인
promise.then(a => {
// ...
}).then(b => {
// ...
});