Closure에 대해서

🪂개요

클로저란 개념은 알고는 있었지만 면접이나 다른사람에게 설명할 때 말을 못했던 경험이 많았기 때문에 나만의 언어로 글을 쓰고 정리해보고 싶어 이번 포스팅을 하게 됐다.

🤔클로저란?

자신의 렉시컬 스코프를 기억하는 반환된 함수이다.

🤔렉시컬 스코프란?

자바스크립트엔진이 함수를 어디서 정의했는지에 따라 상위 스코프를 결정하는것이다.

1
2
3
4
5
6
7
8
9
10
11
12
13

// 렉시컬 스코프를 따른다는 예제 1
const x = 1;

function foo() {
  const x = 10;
  bar();
}

function bar() {
  console.log(x);
}

foo(); // 1

foo에서 10으로 초기화된 변수 x를 bar에서 출력하지 않은 이유 다음과 같다. bar는 전역스코프에 선언되어있기 때문에 x를 호출했을 때 전역에 선언된 x가 1로 초기화되어 있기에 호출하게 되는 것이다. 즉, bar함수의 렉시컬 스코프는 전역이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 렉시컬 스코프를 따른다는 예제 2
const x = 1;

function foo() {
  const x = 10;

  function bar() {
    console.log(x);
  }

  bar();
}

foo(); // 10

1번 예제와 비슷하지만 차이점은 bar함수를 전역이 아닌 foo내부에서 선언한 것이다. bar함수는 자신의 상위 스코프가 foo이기 때문에 자신의 렉시컬환경에 x값이 10으로 선언되었기 때문에 1번 예제와 다른 결과를 나타낸다. 즉, bar함수의 렉시컬 스코프는 foo함수이다.

🤔클로저의 렉시컬 스코프는 소멸하는가?

자신의 렉시컬 스코프의 실행컨텍스트는 실행컨텍스트에서 제거가 되지만, 클로저의 기본 동작원리인 렉시컬스코프를 참조하기 때문에 렉시컬환경은 사라지지 않는다. 렉시컬 환경까지 사라지려면 더 이상 클로저를 사용하지 않아 가비지컬렉터에 들어가 메모리 해제가 이뤄져야 된다.

🚫클로저가 아닌 경우

• 모던 브라우저의 최적화를 통해 상위 스코프의 어떤 식별자도 기억하지 않다면 메모리에서 해제함
• 중첩함수로 반환하지 않는다면 외부함수보다 생명주기가 짧기 때문에 아님

✅중첩함수로 반환하고 상위 스코프의 모든 변수가 아닌 부분만 기억한다면?

브라우저 엔진 최적화로 인해 상위 렉시컬환경에 참조되어 있는 변수만 받기 때문에 상위 렉시컬환경은 참조되지 않은 변수는 기억하지 않는다.

🚨클로저 사용이유

상태가 의도치 않게 변경되지 않도록 은닉하고 특정 함수에게메나 상태 변경을 허용하여 상태를 안전하게 변경하고 유지하기 위해 사용

🙄느낀점

클로저라는 개념을 깊게 팔 수록 어려운 거 같다. 기존 함수 선언식으로는 이해가 됐지만 new키워드를 추가하는 문법이나 선언식이 아닌 문법들에 대해서는 아직 이해하기는 어려운 거 같다. 딥다이브에서 클로저에 대해 많이 읽어보고 어디서 활용하는지 고민해 보는 학습이 필요할 거 같다.

해당글은 앞으로 학습하면서 업데이트 될 예정!

참조

모던 자바스크립트 Deep Dive