(자바스크립트) 클로저(Closure)

https://www.c0d3.com/curriculum/js1/recursion_closure_and_async

클로저(Closure)는 실행 컨텍스트(Execution Context)와 상당한 연관이 있는 개념이다.

• 실행 컨텍스트는 변수(Variables)들이 저장될 공간이 따로 나뉘는 개념으로 생각하고
• 클로저는 각 함수(Function)들이 고유의 영역을 가지는 개념으로 생각해야 한다.

 

---

아래 코드를 통해 클로저를 이해해보자.

const solution = (a, b) => {
    return (c) => {
        return a + b + c
    }
}

const fun1 = solution(1, 2)
let res = fun1(3) // 6

res = fun1(5) // 8

res = solution(2 ,3)(9)

• solution은 화살표 함수로써 파라미터 a, b를 가지며,
  c를 인수로 하는 함수를 반환한다. 
  [  solution = (a, b) => return (c) => { return a + b+ c } ]
• solution 함수에 1, 2를 인자로 넘기고, 이를 상수(const) fun1에 할당한다.

이 때, fun1은 하나의 영역을 가지게 된다. 첫 인수로 1과 2를 받았으므로

본인만의 (c) => { 1 + 2 + c } 를 가지게 된다.

 

따라서 fun1(3) 은 1 + 2 + 3 을 반환하게 되어 6이 된다.

fun1(5) 는 1 + 2 + 5 를 반환하게 되어 8이 된다.

 

solution(2, 3)(9)의 경우에는

solution(2, 3)이 실행되어 (c) => { return 2 + 3 + c } 가 반환(return)되고,

(9)는 c의 인자가 되어 최종적으로 2 + 3 + 9 가 반환되게 된다.

 

---

 

문제를 하나 풀어보자.

 

아래 threeF()를 만족하는 hello3x 함수를 작성해보자.

threeF가 3번 출력될때 까지는 "hello" 가 반환되어야 하고

3번 이상부터는 빈 문자열 ("")만 출력되어야 한다. 

const threeF = hello3x()
let b = threeF() // b는 "hello"
b = threeF() // b는 "hello"
b = threeF() // b는 "hello"
b = threeF() // b는 ""
b = threeF() // b는 ""

 

HINT)

threeF는 hello3x() 형태로 선언됨으로써 하나의 클로저를 가지게 된다.

 

 

 

 

 

 

 

정답

const hello3x = () => {
    let counter = 0;
    return () => {
        counter = counter + 1
        if (counter <= 3) {
            return "hello"
        }
        return ""
    }
}

처음에 const threeF = hello3x() 형태로 호출되고나서

threeF가 3번 연달아 호출되는 방식이기 때문에

hello3x는 return으로 함수 () => {} 형식을 호출해야 한다.

 

이 때, 3번만 hello가 출력되어야 하는 조건이 있어서 counter값을 넣어줘야 한다.

counter값을 return에 넣어두면 함수를 불러올때마다 계속 초기화되므로

return에 영향을 받지 않도록

return값 밖에 counter를 넣어주어야 한다.