화살표함수

화살표함수

Function에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩하지 않는다. 화살표함수는 항상 익명이다. 이 함수표현은 메소드함수가 아닌 곳에 적합하므로, 생성자로 사용할 수는 없다.

---

구문

기본 구문

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression

ex)
a => { return a * 2 }
a => a * 2

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

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

고급 구문

// 객체 리터럴 표현을 반환하기 위해서는 함수 본문(body)을 괄호 속에 넣음:
params => ({foo: bar})

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

기본 매개변수를 지정했을 때, (a = 1, b, c) 이렇게 하고 호출을 () 이렇게 하면 a에 1이 들어가지만, (2,2) 이렇게 하면 a = 2, b = 2가 된다.

바인딩 되지 않은 this

var adder = {
  base : 1,
    
  add : function(a) {
    var f = v => v + this.base;
    return f(a);
  },

  addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base : 2
    };

    return f.call(b, a);
  }
};

console.log(adder.add(1));         // 2
console.log(adder.addThruCall(1)); // 2

f.call(b, a) 이지만 b가 this로 바인딩 되는 것이 아니기 때문에 기존에 있던 base로 연산이 된다.

줄바꿈

화살표 함수는 파라미터와 화살표 사이에 개행 문자를 포함할 수 없다.

var func = ()
            => 1;
// SyntaxError

---

참고문서

MDN - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션