[javascript] ES6 Arrow Function

화살표 함수

화살표 함수(arrow function)은 es6에서 정의한 문법이다. 화살표 함수는 function 을 이용해서 함수를 정의하는 것보다 더 간편하고 간략하게 표현할 수 있다.

문법

다음은 화살표 함수 사용 방법이다.

() => {/*함수 정의*/}  //인자가 없을 경우
a => {/*함수 정의*/}  //인자가 한개일 경우
(a, b) => {/*함수 정의*/}  //인자가 2개일 경우

위와 같이 인자가 한개일 경우에는 ( ) 괄호 생략이 가능하다.

a => {return a}    //함수가 한 구문이 아닐 경우 {} 사용하여 함수 정의
a => a;            //함수가 한 구문일 경우, 자동 return 위와 같은 기능
a => ({key:a});    //예외로 객체를 자동 return 하려면 ()가 필요

보통 함수가 한구문으로 끝나지 않을 경우 { } 괄호를 사용하여 함수를 정의하지만, 함수가 한 구문으로 끝날 경우에는 { } 괄호 생략이 가능하다. 괄호를 생략했을 경우 자동으로 return이 실행된다. 그러므로 위에서 정의한 두 개의 함수는 같은 기능을 하고 있다. 다만, 객체를 자동으로 반환하기 위해서는 ( ) 괄호를 감싸줘야 한다.

화살표 함수에서는 인자를 선언할 때 기본 값을 세팅 할 수 있다.

기본 값을 할당하는 방법을 보자.

(a = defaultValue) => {return a};

인자를 선언하며 = 에 기본 값을 작성하면 된다.

다음과 같이 배열이나 객체도 가능하다

([a, b] = [1, 2]) => a + b;         //3
({key: value} = {key: 3}) => value;  //3

그렇다면 만약 주어지는 인자가 없을 때 다음의 경우에는 어떻게 실행될 것인가

([a,b] = [1,2], {key:value} = {key:a}) => console.log(a,b,value);

a와 b는 기본 값인 1과 2값을 가지게 되고 자연스럽게 객체의 value는 a의 값인 1로 받게 된다.

결과는 1 2 1  이다.

const test =([a,b] = [1,2], {key:value} = {key:a}) => console.log(a,b,value);
test([2,3], {key: 5});

이와 같이 실행하면 객체는 value의 값으로 5를 가지게 되므로 당연히 결과는 2 3 5가 된다.

Arrow function 과 기존 function의 차이점

1. naming

기존의 function함수는 다음과 같이 이름을 지정하여 정의할 수 있었다. 

하지만 화살표 함수는 이름을 정의 하여 사용할 수 없다

function funcName(){}

함수 명을 정의하고 싶다면 다음과 같이 변수에 담아서 사용해야 한다.

그러므로 화살표 함수는 함수 자체 호이스트가 불가능 하다.

const funcName = () => {};

 

2. arguments

기존의 function함수는 arguments를 사용하여 받아오는 인자들을 배열로 다음과 같이 사용할 수 있었다.

function funcName(){ console.log(arguments)}   //[1,2,3,4,5]
funcName(1,2,3,4,5);

하지만 화살표 함수에는 다음과 같은 오류를 범한다

const funcName = () => { console.log(arguments)}   //arguments is not defined
funcName(1,2,3,4,5);

그래서 es6문법에는 arguments를 대신 하기 위해 rest parameter라는 구문을 새롭게 도입했다.

다음 예시를 보자

const funcName = (...arg) => { console.log(arg)}   //[1,2,3,4,5]
funcName(1,2,3,4,5);

3.this 

직접 객체로 만들어서 log를 통해서 보자

const obj = {
    a : () => {console.log(this)},    //Window 
    b : function () {console.log(this)}  //{a: ƒ, b: ƒ}
}

화살표 함수로 정의한 함수는 상위 컨텍스트가 전역  컨텍스트이므로 window 를 나타내고 

function으로 정의한 함수는 자신을 정의한 객체를 나타낸다.

this가 없을 때는 new를 통해 객체 생성이 불가능하다.

new obj.a();  //obj.a is not a constructor
new obj.b();  //b {}

prototype으로 함수를 정의해도 마찬가지다.

const obj = {a: 1};
Object.prototype.funcName = function () {
    console.log(this)
};
obj.funcName(); //{a: 1}

const obj = {a: 1};
Object.prototype.funcName = ()  => {
    console.log(this)
};
obj.funcName();  //Window

화살표 함수를 사용했을때 전역 컨텍스트 스코프의 this객체인 window를 나타낸다.