Closure(클로저), Currying(커링)이란?

Closure(클로저)

---

클로저의 정의는 외부 함수에 접근할 수 있는 내부 함수 혹은 이러한 원리를 일컫는 용어이다.

클로저 함수 안에는 지역 변수(innerVar), 외부 함수의 변수(outerVar), 전역 변수(globalVar)의 접근이 전부 가능하다.

클로저는 내부 함수가 외부 함수의 지역 변수에 접근할 수 있게 된다.

 

아래 코드를 보면, innerFunction()이라는 안쪽에 위치한 함수는 outerFunction()이라는 외부 함수의 모든 변수에 접근 할 수 있는 내부함수를 'Closure' 라고 한다.

Currying(커링)

---

Currying(커링)은 클로저를 사용해 쉽게 구현할 수 있다.

커링은 함수 하나가 n개의 인자를 받는 대신, n개의 함수를 만들어 각각 인자를 받게 하는 방법이다.

 

예제를 통해서 보면 이해하기가 좋다.

커링은 여러 인자 중 일부를 고정시켜 사용할 수도 있다. 아래 예시를 보면 x값은 100으로 고정시켜서 add100에 미리 할당해 두고, add100(y)와 같은 형태로 사용할 수 있다. 한 인자 값을 고정시키고, 다른 인자는 변하는 값으로 두고 싶을 때 커링은 유용하게 사용된다.

function sum(x){
	return function(y){
    	return x + y;
        }
 }
 
 sum(2)(3);  // 5

let add100 = sum(100);
add100(2);    // 102
add100(10);   // 110

let add5 = sum(5); 
add5(2); // 7

다른 예시코드이다.

html 태그를 추가해주는 tagMaker라는 함수인데, tag를 붙여준다는 동일한 기능을 수행하지만 h1, a, div 등 각각의 tag마다 다른 함수를 만들면 다른 태그를 만들어 낼 수 있다.

기본적인 기능은 공통적으로 가지고 있지만 조금씩 다르게 나타낼 수 있는 기능이 있을 경우에 커링을 사용하면 관리하기도 편하고 효율적인 것 같다.

function htmlMaker(tag){
	let startTag = '<' + tag + '>';
    let endTag = '</' + tag + '>';
    return function(content) {
    	return startTag + content + endTag;
        }
 }
 
 let divMaker = htmlMaker('div'); 
 divMaker('judaeng');  // <div>judaeng</div>
 divMaker('Tistory');  // <div>Tistory</div>

이것은 커링 문제의 일부이다.

처음에 보고 이해가 안되서 F12 console로 하면서 이해한 예시 코드이다.

한번씩 해보면서 이해를 하면 좋을 것 같다!

let x = 10;

function add(y){
	return x + y;
    }

function strangeAdd (x) {
	return add(x) + add(x);
    }
    
let result = strangeAdd(5);