프론트엔드 개발/JavaScript

Currying(커링) vs Partial Application

하이고니 2023. 1. 31. 18:41
 

https://www.zerocho.com/category/JavaScript/post/579236d08241b6f43951af18

 

www.zerocho.com

위 블로그를 필사하면서 공부한 내용입니다.

 

Partial Application

여러 개의 인자를 받는 함수가 있을 때 일부의 인자를 고정시킨 함수를 만드는 기법.

 

const plus = function(a, b, c) {
  return a + b + c;
};

 

위와 같은 평범한 함수에서, partial application을 구현하기 위해 함수의 prototype에 특별한 메소드를 추가한다.

 

Function.prototype.partial = function() {
  const args = [].slice.apply(arguments);
  let self = this;
  return function() {
    return self.apply(null, args.concat([].slice.apply(arguments)));
  };
};

 

args는 arguments를 복사한 것이다. 그리고 이 메서드는 함수를 리턴하는데, 이 때 args는 클로저의 변수로 저장된다.

그리고 이제 새로운 함수에 인자가 들어오면 기존에 있던 args와 concat한다.

 

const plusA = plus.partial(1); // [1]
plusA(2, 3); // 6: [1, 2, 3]

const plusB = plusA.partial(2); // [3]
plusB(4); // 7: [3, 4]

const plusAB = plus.partial(1, 3); [1, 3]
plusAB(5); // 9: [1, 3, 5]

 

이렇게 일부 인자만 받은 새로운 함수를 만들고, 나중에 새로운 함수에 인자를 넣어 완성한다.

 

 

bind 함수를 쓰면 더 깔끔하다. 위의 partial 메서드를 prototype에 추가할 필요 없이

 

const plusA = plus.bind(null, 1);
plusA(2, 3);	// 6

const plusB = plusA.bind(null, 2);
plusB(4);		// 7

const plusAB = plus.bind(null, 1, 3);
plusAB(5);		// 9

 

그냥 bind를 쓰면 된다.