화살표 함수(Arrow Function)

자바스크립트 ES6(ES2015+) 에서 간략한 방법으로 함수를 선언할수 있는 화살표 함수(Arrow Function)가 존재합니다. 

 

화살표 함수에 대한 표현식은 자비스크립트 참고자료 공식 문서인 MDN Web Docs 에서 아래와 같이 구문이 작성되어있습니다. 

MDN 문서 참조
// 매개변수 지정 방법 

(param1, param2, …, paramN) => { statements } // 매개변수가 여러개인 경우에는 소괄호 생략 X
(param1, param2, …, paramN) => expression  // 다음과 동일함:  => { return expression; } 
// 함수 몸체가 한줄의 구문이라면 중괄호를 생략할수 있으며 암묵적으로 return 이 됩니다.  


// 매개변수가 하나뿐인 경우 괄호는 선택사항:
(singleParam) => { statements }
singleParam => { statements }

// 매개변수가 없는 함수는 괄호가 필요:
() => { statements } 


() => { return {a: 1}; }
() => ({ a: 1}; ) // 위 표현식과 동일하며 객체를 반환시 소괄호를 이용합니다. 

기존 함수의 정의 방식과 화살표 형식의 함수 정의가 어떻게 다른지 아래 코드로 살펴보겠습니다.

// ES5 함수의 표현식  
var cafejun_sum = function (a,b) {
   return a+b
}
console.log(cafejun_sum(1,2));

// ES6 화살표 함수 표현식 
var cafejun_sum = (a,b) => {
   return a+b
}
console.log(cafejun_sun(1,2));

 

그렇다면 좀더 Array Function 으로 복잡한 합성함수의 코드르 작성해 보겠습니다.

 

const getDiscount = (price,rate) => price * rate

console.log(getDiscount(0.1,100000))

 

위 예제 코드는 가격과 할인률을 파라미터로 받아 상품의 할인 가격을 반환해주는 함수입니다. 하지만 코드를 위와 같이 작성한다면 

사용자가 적고 이벤트가 거의 없다면 상관은 없지만 이벤트가 많을경우 사용자 별로 등급별로 할인률을 다르게 준다고 가정하였을때 price 와 rate를 이벤트 별로 험수를 호출을 해야하는 상황이 올것입니다. 좀더 코드를 단순화 하여 할인률을 고정시키고 가격만 다르게 입력을 하고 싶은경우 아래와 같이 작성을 할수 있습니다. 

 

'use strict';

// Curried Function
const getDiscount = (rate) => (price) => {
    return rate * price;
};

const getTenpecent = getDiscount(0.1);
console.log(getTenpecent(10000));
console.log(getTenpecent(20000));
console.log(getTenpecent(30000));
console.log(getTenpecent(40000));
console.log(getTenpecent(50000));

 

그리고 함수 표현식에서 기존 ES5 의 함수표현식이랑 ES6 에서 제공하는 화살표 함수와의 가장 큰 차이는 this 입니다. 

 

추후 this 관련되어서 정리를 해야할 내용이 많아 따로 정리를 하겠습니다.