커링함수

커링 함수란? 

함수를 그 인자의 부분집합으로 바인딩하는 기법

용어 정의를 적는 것 보다 예시를 보는게 이해하기 편할 듯 하다.

다음과 같은 프로토콜, 도메인, path 값을 받아 하나의 url을 생성하는 함수가 있다. 

function simpleURL(protocol, domain, path) { 

   return protocol + '://' + domain + '/' + path

}

simpleURL('http', 'www.abc.com', 'a')

simpleURL('http', 'www.abc.com', 'b')

simpleURL('http', 'www.abc.com', 'c')

위의 함수로 간단하게 url을 만들어낼 수 있지만,

예시에서 보는 것과 같이 path가 여러개인 경우에 각각 호출해야하는 번거로움이 있다. 

반복 호출의 번거로움을 없애기 위해서는 array의 map 메소드를 활용할 수 있다.

var paths = ['a', 'b', 'c']; 

var siteDomain = 'www.abc.com';

var urls = paths.map((path)=>{

  return simpleURL('http', siteDomain, path);

});

console.log(urls); // ['http://www.abc.com/a', 'http://www.abc.com/b', 'http://www.abc.com/c']

위의 코드로 정상적으로 원하는 응답을 받을 수 있다. 

하지만, 위의 코드 역시 'http', siteDomain 값을 공통으로 갖고 있고 

단순히 path 값만 변경되어 호출되고 있다. 

위의 내용을 개선할 수 없을까? 

이를 개선하기 위해 함수의 bind 메소드를 활용해볼 수 있다. 

var urls1 = paths.map(

   simpleURL.bind(null, 'http', siteDomain)

);

console.log(urls1); // ['http://www.abc.com/a', 'http://www.abc.com/b', 'http://www.abc.com/c']

다른 글에서도 정리해놓긴 했지만,

bind 메소드의 경우 첫번째 인자로는 메소드를 수신하는 객체를, 

나머지 인자에는 해당 메소드 실행을 위한 파라미터들을 넣어주면 된다. 

위의 예시에서 첫번째 인자에 null을 넣은 이유는 

simpleURL 메소드가 메소드 수신자를 사용하지 않기 때문이다. 

(관습적으로 메소드 수신자를 사용하지 않은 경우 undefined, null을 대입한다고 한다.)

기존 simpleURL에서 사용된 고정 파라티머 'http', siteDomain 값과

map 메소드를 돌면서 반환되는 path 값을 함께 호출하여 

기존의 simpleURL 메소드를 호출하는 모양과 동일한 형태가 되는 것이다. 

자, 이제 기존의 의문점이었던 커링 함수의 정의를 되짚어 보자. 

커링 함수란? 

함수를 그 인자의 부분집합으로 바인딩하는 기법

simpleURL 함수는 protocol, domain, path 세 가지 인자를 받도록 되어 있으나,

simpleURL 함수를 호출할 때 'http, siteDomain 변수 값(인자의 고정된 부분 집합을 받아)만 받아 바인딩하여 함수를 호출한다.