ES6(2)

화살표 함수

• 화살표 함수(arrow function)라는 새로운 함수가 추가되었으며, 기존의 function() {}도 그대로 사용할 수 있다.

function add1(x,y){
    return x+y;
}

const add2 = (x,y) => {
    return x+y;
}

const add3 = (x,y) => x+y;

const add4 = (x,y) => (x+y);

function not1(x){
    return !x;
}

const not2 = x => !x;

• add1, add2, add3, add4는 같은 기능을 하는 함수다.

• not1, not2도 같은 기능을 하는 함수이다.

• 화살표 함수는 function 선언 대신 => 기호로 함수를 선언한다. 또한 변수에 대입하면 나중에 재사용할 수 있다.

• 화살표 함수가 기존 fucntion과 다른 점은 this 바인드 방식이다. 다음 예제를 보자.

var relationship1 = {
    name : 'zero',
    friends : ['nero', 'hero', 'xero'],
    logFriends : function(){
        var that  = this; //relationship1을 가리키는 this를 that에 저장
        this.friends.forEach(function(friend){
            console.log(that.name, friend);
        });
    },
};
relationship1.logFriends();

const relationship2 = {
    name : 'zero',
    friends : ['nero', 'hero', 'xero'],
    logFriends(){
        this.friends.forEach(friend => {
            console.log(this.name, friend);
        });
    },
};
relationship2.logFriends();

//output
zero nero
zero hero
zero xero
zero nero
zero hero
zero xero

• relationship1.logFriends()안의 forEach문에서는 function 선언문을 사용했다.
  • 각자 다른 함수 스코프의 this를 가지므로 that이라는 변수를 사용해서 relationship1에 간접적으로 접근
• relationship2.logFriends()안의 forEach문에서는 화살표 함수를 사용했다.
  • 바깥 스코프인 logFriends()의 this를 그대로 사용할 수 있다. 상위 스코프의 this를 물려 받는다.
• 즉, 기본적으로 화살표 함수를 쓰되, this를 사용해야 하는 경우에는 화살표 함수와 function 중 하나를 고르자

구조분해 할당

• 구조분해 할당을 사용하면 객체와 배열로부터 속성이나 요소를 쉽게 꺼낼 수 있습니다.

다음은 객체의 속성을 같은 이름의 변수에 대입하는 코드이다.

var appleMachine = {
    status : {
        name : 'node',
        count : 5,
    },
    getApple : function(){
        this.status.count--;
        return this.status.count;
    },
};
var getApple = appleMachine.getApple;
var count = appleMachine.status.count;

위와 같은 코드를 다음과 같이 바꿀 수 있다.

const appleMachine = {
    status : {
        name : 'node',
        count : 5,
    },
    getApple(){
        this.status.count--;
        return this.status.count;
    },
};
const {getApple, status:{count}} = appleMachine;

• appleMachine 객체 안의 속성을 찾아서 변수와 매칭한다. count처럼 여러 단계 안의 속성도 찾을 수 있다.
• 다만, 구조분해 할당을 사용하면 함수의 this가 달라질 수 있다. 달리진 this를 원래대로 바꿔주려면 bind 함수를 따로 사용해야 한다.

배열에 대한 구조분해 할당 문법도 존재한다

var array = ['nodejs', {}, 10, true];
var node = array[0];
var obj = array[1];
var bool = array[3];

다음과 같이 바꿀 수 있다.

const array = ['nodejs', {}, 10, true];
const [node, obj, , bool] = array;

• 세 번째 요소인 10에는 변수명을 지어주지 않았으므로 10은 무시된다.
• 구조분해 할당 문법은 코드 줄 수를 상당히 줄여주므로 유용하다. 특히 노드는 모듈 시스템을 사용하므로 이러한 방식을 자주 쓴다.

본 내용은 Node.js 교과서 (길벗 출판사) 개정 2판의 내용을 기반으로 작성되었습니다.