#8 클로저(Closure)

자바스크립트 클로저

자바스크립트에서 중요한 개념을 꼽을때 빠지지 않는 클로저이다.
클로저란 스코프 체인으로 연결된 부모 함수의 변수(lexical scope)를 자식 함수가 기억하고 있는 자바스크립트 함수의 특성을 말한다.

function grandPa(num1) {
  const a = num1;
  
  return function parents(num2) {
    const b = num2;
    
    return function son(num3) {
      const c = num3
      
      return a + b + c
    }
  }
}

const fn1 = grandPa(1) // a는 1이고, parents 부분이 남는다.
const fn2 = grandPa(2) // a는 2이고, parents 부분이 남는다.

const fn11 = fn1(1) // b는 1이고, son 부분이 남는다. (a는 1임을 기억하고 있다.)
const fn22 = fn2(2) // b는 1이고, son 부분이 남는다. (a는 2임을 기억하고 있다.)

fn11(1) // 3. a, b, c 가 모두 1이다.
fn22(2) // 6. a, b, c 가 모두 2이다.

내가 클로저를 처음 접했을 때 의문을 가졌던 부분은

const fn1 = grandPa(1) 이 부분이었다.

이렇게 해버리면 grandPa 함수가 return을 하고, parents 부분만 남기 때문에 a에 대한 정보는 잃는게 아닌가 싶었다. 그런데 자바스크립트에서 함수는 이 정보를 기억하고 있었다.

---

다른 예시

const fn33= grandPa(3)(3) // a,b는 3으로 고정, son 부분이 남는다.

fn33(4) // 10. c만 바뀐다.
fn33(5) // 11
fn33(6) // 12

const fn4 = grandPa(4) // a를 고정
const fn45 = fn4(5) // b만 바뀐다.
const fn46 = fn4(6)

이렇게 클로저를 이용하면 부모 함수의 인자(a, b)를 고정하고 자식 함수의 인자만 변경할 수 있다. 추가로, 클로저를 이용하면 부모 함수에서 선언한 변수를 private한 변수처럼 사용할 수도 있다.

오늘은 자바스크립트의 클로저를 간단하게 소개해보았다.
클로저는 자바스크립트 함수의 중요한 특성이니 반드시 알고 넘어가자.

다음 시간부터는 prototype을 소개해보도록 하겠다.