[JavaScript] Closure 과 Currying

Closure

closure 의 장점 활용

값을 가진 함수를 만들 수 있음

 

function sum(a,b) {
   return a+b;
}

function calculate(fn, prev) {
   return (v) =>{
    return fn(prev,v);
}

const sum100 = calculate(sum, 100)
sum100(20);  //120

 

❖ sum100

 sum100 = (v) => {
     return sum(100,v)
 }

sum100이라는 함수는 어떻게 보면 100이라는 값을 가진 함수가 되는 것이다.

ㅡ

크롬 디버거에서 Scope(유효범위) 를 확인해보면

 Closure  : { prev :100,  fn: f }

 

 

---

Currying

값을 가진 함수를 만들 수 있는 함수  ex) calculate 함수

함수형 프로그래밍의 pipe 라인을 만들어 합성(composition)이 가능함

대표적인 함수 :  bind 

 

 

 

React 

메서드가 포함된 객체를 반환 

value= 클로저

useState 는 변화를 감지하는 함수 

 

< Curry 함수 예시 >

복잡한 Curry 함수 예시인데 초짜인 나는 한번에 이해가 안되서 디버깅하며 잘게 쪼개보았다.

let curry = (fn) => { 
    return function curryFn(...args1) {
        if (args1.length >= fn.length) {
            return fn(...args1);
        } else {
            return (...args2) => curryFn(...args1, ...args2);
        }
    }
}

function multiply(a, b, c){
    return a * b * c;
}

let curriedMultiply = curry(multiply);
let result = curriedMultiply(2,3)(4);

1️⃣  처음 실행

let curriedMultiply = curry(multiply);

curriedMiultiply(...args1) {
    if (args1.length >= fn.length) {
            return fn(...args1);
        } else {
            return (...args2) => curryFn(...args1, ...args2);
        }
 }

fn : multiply 

args1: [2,3] 

args1.length (2) < fn.length (3)

 

2️⃣  return 으로 curry 실행 

return (...args2) => curryFn(...args1, ...args2);

curriedMultiply(2,3) = (...args2) => curryFn(...args1, ...args2);

fn : multiply 

args1: [2,3]

args2: 4

 

3️⃣  정답

return fn(...args1);

multiply(2, 3, 4)

답은 24