[ES6] 화살표 함수와 커링 디자인 패턴

2020.09.05 - [웹 프론트엔드/자바스크립트] - [ES6] 전개 연산자(spread operator) 사용법

 

---

화살표 함수

 ES6에 새로 추가된 화살표 함수(arrow function)는 함수 표현을 간단하게 할 수 있습니다.   

기존 함수 사용과 화살표 함수 표현식을 비교해보고, 그것을 응용한 커링 디자인 패턴을 보겠습니다.

 

// 기존
function plusFunc(num1, num2) {
  return num1 + num2;
}
var plusFunc = function (num1, num2) {
  return num1 + num2;
};
 
// ES6
var plusFunc = (num1, num2) => {
  return num1 + num2;
};
var plusFunc = (num1, num2) => num1 + num2;

 

아주 간단하죠? 마치 function키워드 대신 화살표 함수(=>)를 넣은 것과 비슷합니다.

하지만 이것만으로는 화살표 함수를 사용할 이유가 적습니다. 중요한 것은 바로 커링 디자인 패턴!

 

커링 디자인 패턴

 이번에는 화살표 함수를 응용한 커링(currying) 디자인 패턴을 살펴보겠습니다.

간단하게 말씀드리면 함수 안에 또 함수를 반환하는 것을 화살표 함수로 표현하는 것입니다.

 

// 기존
function multiplyNumber(num) {
  return function (val) {
    return num * val;
  };
}
var tempFunc = multiplyNumber(10);
console.log(tempFunc(20));
 
// ES6
var multiplyNumberES6 = (num) => (val) => num * val;
console.log(multiplyNumberES6(30)(40));

 

이해를 돕기 위해 풀어서 예제를 만들어 봤습니다. 실제로 이런 식으로는 쓰지 않지만, 주목할 부분은 화살표 함수!

기존처럼 함수 안에 함수, 또 그 안에 함수 이런 식이면 계단형 함수 선언으로 코드의 가독성이 떨어집니다.

또한 함수의 재활용 측면이나 함수의 인자를 관리하는 면에서도 커링 디자인 패턴은 유용합니다.

 

const plus = (a, b) => a + b;
const multiply = (a, b) => a * b;
const squared = (x) => x * x;
 
const plusX = (x) => (y) => plus(x, y);
const multiplyX = (x) => (y) => multiply(x, y);
 
const plusY = plusX(6);
console.log(plusY(4)); // 10
 
const multiplyY = multiplyX(6);
console.log(multiplyX(6)(4)); // 24
 
const plus_multiply_squared = (x) => plusY(multiplyY(squared(x)));
 
const result = plus_multiply_squared(2);
console.log(result); // 30

 

마지막으로 생각을 좀 해볼 수 있는 코드를 넣어봤습니다.

왜 계산 답이 저렇게 나오는지 아시겠죠?

---

2020.09.18 - [웹 프론트엔드/자바스크립트] - [ES6] 템플릿 문자열 (Template String)

[ES6] 템플릿 문자열 (Template String)