자바스크립트(JavaScript) - 화살표 함수

화살표 함수는 ES6부터 새로 생긴 표현식입니다.

 

화살표 함수는 익명 함수를 좀 더 간단히 쓰는 표현식입니다.

 

표현식

화살표 함수의 표현식은 아래와 같습니다.

var a = (x) => { return x; };
var a = (x1, x2) => { return x1 + x2; };

여기서 인수가 하나만 있다면 괄호를 지우고 사용이 가능합니다.

var a = x => { return x; };

리턴 값만 있다면 return과 {} 중괄호를 지우고 사용이 가능합니다.

var a = x => x;

인수의 기본값, 나머지 매개변수를 설정하여 사용도 가능합니다.

// 기본값 매개변수
var a = (x1=1, x2=2, x3) => { return x1 + x2 + x3; };
a(undefined,undefined,2); // -> 5

// 나머지 매개변수
var a = (...x) => { return x[0] + x[1]; };
a(1,5); // -> 6

반환 값이 객체 리터럴이라면 괄호를 붙여야 합니다.

var a = () => ({ A:1 });
a(); // -> { A:1 }

 

참고로 인수가 없다면 괄호를 생략할 수 없습니다.

 

화살표 함수의 특징

1. 화살표 함수의 this값은 화살표 함수의 바깥의 범위에 있는 this값을 가지게 됩니다.

var a = {
    test1 : "a",
    test2 : () => console.log(this), // -> Window {window: Window, self: Window, document: #document, name: '', location: Location, …}
    test3 : function () {
        var b = () => console.log(this); // -> {test1: 'a', test2: ƒ, test3: ƒ}
        b();
    }
}
a.test2();
a.test3();

따라서 test2의 화살표 함수는 전역 객체를 가리키고 test3의 내부 함수인 b의 화살표 함수의 this는 a 객체를 가리킵니다.

 

2. 화살표 함수는 call, apply 함수의 this가 적용되지 않습니다. call함수와 apply 함수의 주는 인자는 정상적으로 넘어가 정상적으로 실행이 되지만 this는 변함이 없습니다.

var a = function(x1, x2) { console.log( this.x + " " + x1 + " " + x2); };
var ab = (x1, x2) => { console.log( this.x + " " + x1 + " " + x2); };
var c = { x : 10 };
a.call(c,1,2); // -> 10 1 2
ab.call(c,1,2); // -> undefined 1 2

3. 화살표 함수는 arguments 객체가 없기 때문에 따로 인수를 가져오지 못합니다. 따라서 arguments를 대신하여 나머지 매개변수를 사용하여 인자를 가져와 사용할 수 있습니다.

 

4. 화살표 함수는 new 연산자를 사용할 수 없으며 생성자 역할이 불가능합니다.

 

5. 화살표 함수는 yield 키워드를 사용할 수 없습니다. 따라서 제너레이터로 사용하지 못합니다.

 

 

글에 오류가 있을 수도 있으니 알려주시면 감사하겠습니다.

참고

모던 자바스크립트 입문(이소 히로시 지음, 서재원 옮김)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions