2. Javascript ES2015 (3) - Arrow Function(화살표 함수)

 

 

 

 

ES2015에서는 화살표 함수(arrow function)가 추가되었습니다. 물론 기존의 함수 리터럴도 그대로 사용이 가능합니다. 여기서 설명하는 화살표 함수는 람다식과 비슷한 형태로 생각해 주시면 이해가 빠를 것입니다. 

 

간단한 add 함수 선언 예제를 살펴보겠습니다. 

 

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

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

/* 
const add2 = function(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는 코드만 놓고 보았을 때 동일한 동작, 즉 두 개의 인자 값을 더해서 리턴하는 동작을 취하는 함수입니다. 그런데 무엇이 달라졌는지 한번 살펴보겠습니다. 

 

일단 add1에서 add2로 변할 때 무엇이 바뀌었을까요? function 선언을 =>로 대체하였습니다. 그러고 나서 add2에서 add3로 넘어갈 때는 함수 내부에 return문만이 존재했습니다. 그래서 add3 형태의 함수가 나오는 것입니다. 반대로 add4에서처럼 return문을 괄호로 묶는 경우도 있습니다.

 

not1에서 not2로 넘어갈 때는 reutrn문도 없어지고, 첫 파라미터 x 값에 붙던 괄호를 제거했습니다. 파라미터가 딱 한 개일 때만 가능한 방법입니다. 

 

 

 

 

---

 

 

 

이번에는 화살표 함수로 인해서 this 바인딩에 어떤 영향을 끼치게 되는지를 살펴보겠습니다. 일단 내부 함수에서의 this 바인딩에 대해서도 짚고 넘어가 보도록 하겠습니다. 

 

8. Javascript 함수 호출 (3) - 함수를 호출할 때 this 바인딩

 

var relationship1 = {
    name: 'zero',
    friends: ['nero', 'hero', 'xero'],
    logFriends: function(){
        var that = this;
        this.friends.forEach(function (friend){
            console.log(that.name, friend);
        });
    },
};
relationship1.logFriends();

 

위 내용만으로도 동작은 충분히 가능합니다. 

 

var relationship1 = {
    name: 'zero',
    friends: ['nero', 'hero', 'xero'],
    logFriends: function(){
        var that = this;
        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);
        });
    },
};

 

 

relationship1의 경우에는 화살표 함수와 함수 선언문(function) 둘 중 하나를 선택하면 됩니다.