본문 바로가기

개발/JavaScript

화살표함수

화살표함수

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/애로우_펑션

'개발 > JavaScript' 카테고리의 다른 글

화살표함수  (1) 2018.11.25