[JavaScript] 클로저(closure) 정의

클로저(closure)

자바스크립트에서 클로저의 정의는 정확히 내려지지 않았습니다.

그래서 사람들마다 책마다 블로그마다 클로저의 정의를 말하는게 조금씩 다릅니다.

제가 공부하면서 생각한 정의는 이런 느낌입니다.

'이미 생명주기가 끝난 함수의 변수를 참조할 수 있도록 해주는 현상'

 

function outer () {
  let a = 0;

  function inner () {
    return ++a
  }
  return inner;
}

const func = outer();

console.log(func());
console.log(func());
console.log(func());

위 코드를 실행하면 결과는 1 2 3 이 나오게 됩니다.

이걸 이해하려면 일단 '실행 컨텍스트'를 이해하셔야 합니다.

---

func에서 outer()를 실행시켜 inner()함수 자체를 반환시켜줬습니다.

그 결과 inner()함수는 func()을 통해 outer()인 외부함수가 종료가 되었음에도

outer()함수 안에 있는 inner()함수가 언제든 실행가능하단 걸 열어둔 것입니다.

inner()함수가 언제든 실행이 될 수 있기 때문에 outerEnvironmentReference에서 필요로 하는

outer()의 LexicalEnvironment가 가비지 컬랙터에 의해 사라지지 않고 계속 남아있게 됩니다.

그렇기 때문에 outer()의 실행은 끝났지만 outer()에 존재하는 변수에 계속 접근할 수 있게 됩니다.

---

이 때문에 만약 클로저가 남용이 된다면, 메모리에서 언제 사용될지 모르는 함수들의 정보들이 사리지지 않고 계속 남아있기 때문에 잘 판단해서 사용하셔야 메모리 관리가 됩니다. (그렇다고 클로저가 나쁜 게 절대 아님!)

 

만약 사용이 다 끝난 클로저는 초기화를 통해 지워줄 수 있습니다.

function outer () {
  let a = 0;

  function inner () {
    return ++a
  }
  return inner;
}

const func = outer();

console.log(func());
console.log(func());
console.log(func());
outer = null;

이런 식으로 초기화를 해주게 되면 메모리에서도 지워지게 됩니다.