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

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 => {
    // ...
});