[JS] Arrow Function Syntax

Arrow Function은 function 키워드 대신 화살표(=>)를 사용해서 간략한 방법으로 함수를 선언할 수 있다. 하지만 모든 경우에 사용할 수 있는 것은 아니니, 그 용도를 정확히 알고 사용 해야겠다.

Arrow Function의 장점은 function 문법을 간소화 시킬 수 있는 점과 function 내에 this를 바인딩 하지 않아도 사용할 수 있다는 점이다.

// Function Expression
const addEXP = function(num1, num2){
  return num1 + num2;
}
// Arrow Function
const addARR = (num1, num2) => {
  return num1 + num2;
}

Arrow Function을 사용하는 가장 간단한 방법은 위에서 처럼 function을 지우고 대신에 =>을 사용하면 됩니다.

좀 더 줄여 볼까요?

const add = (num1, num2) => num1 + num2;

이번에는 function을 감싸고 있는 {}와 return 키워드를 삭제 되었습니다.

많이 간소화 되서 좋긴 좋은데, 이게 기존 자바스크립트 문법에 익숙한 사람 일 수록 쉽게 딱 와닿지 않습니다.

좀더 진행해 볼까요?

Arrow Function Parameters

function으로 전달하는 parameter의 개수에 따라 아래와 같이 선언하는 문법이 달라지게 됩니다.

1. parameter가 0개 일때

() => { statements }

2. parameter가 1개 일때

parameter => { statements }

3. parameter가 2개 이상일때

(param1, param2, ...) => { statements }

Arrow Function Return

function 내부에 정의된 코드가 한줄의 return 표현식인 경우에는 arrow function을 아래와 같이 줄여서 사용할 수 있다.

{}와 return 키워드를 삭제할 수 있다.

//Function Expression
let fullname = function(firstName, lastName){
  return firstName + lastName
}
//Arrow Function
let fullname = (firstName, lastName) => firstName + lastName

위에서 간단하게 arrow function의 문법을 살펴보았는데요. arrow function을 사용했을때는 문법을 간소화 시킬 수 있는 장점 외에도 this를 바인딩 하지 않아도 되는 장점이 하나 더 있습니다.

Arrow Function에서의 this에 대한 이해

자바스크립트 코딩을 하다 보면 상위 function의 this를 자식 function에 보내기 위해서 아래와 같이 코딩하는 경우가 많이 있다.

var that = this;

좀더 쉽게 이해하기 위해서 아래의 코드를 보자.

var arr_fruits = ['Orange', 'Watermelon', ''Apple']
var favorite = {
    text: 'I like ',
    like: function(fruits){
        fruits.forEach(function(fruit){
            console.log(this.text + fruit);  //undefinedOrange  
        });
    }
}

위에서 this는 favorite 객체가 아니고 this 정의된 function 함수가 되기때문에, 제대로 출력이 되지 않는다. 보통 이를 해결하기 위해서 아래와 같이 코드를 짜게 된다.

var favorite = {
    text: 'I like ',
    like: function(fruits){ 
        var that = this; //여기서 this는 favorite 객체임.
        fruits.forEach(function(fruit){
            console.log(that.text + fruit);     
        });
    }
}
var arrFruits = ['Orange','Apple'];
favorite.like(arrFruits);

위와 같이 부모의 this를 자식 function에서 사용하고 싶을 때는 arrow function을 사용하면 this를 바인딩 하지 않고도 사용이 가능하게 된다.

var favorite = {
    text: 'I like ',
    like: function(fruits){ 
        fruits.forEach(fruit => {
            console.log(this.text + fruit);  //I like Orange
        });
    }
}
var arrFruits = ['Orange','Apple'];
favorite.like(arrFruits);

위에서 보는 것 처럼 일반적인 Function Expression을 사용할때는 this가 function 내부 scope에서 정의되는것에 반해서 Arrow Function을 사용할때 this는 상위의 this를 가져오게 되기 때문에, 무조건 Arrow Function을 사용하면 안되고, 정확한 용도에 맞게 주의 깊게 사용해야 된다.