[JavaScript] 클로저(Closure)

YJ·2023년 6월 30일
0

클로저(Closure)는 여러 함수형 프로그래밍 언어에서 나타나는 보편적 특성으로, 다양한 문헌에서 제각각 다르게 설명하고 있다.

여러 개념들을 통해 파악해 본 결과, 클로저의 정의에 가장 가까운 표현은
어떤 함수에서 선언한 변수를 참조하는 내부 함수에서만 발생하는 현상 또는 외부 함수의 LexicalEnvironment가 가비지 컬렉팅되지 않는 현상 이라고 볼 수 있다.

아래의 예시를 살펴보자.

// 예제 1

const x = 1;

function outer () {
  const x = 10;
  const inner = function () {
    console.log(x);
  };
  
  return inner;    // inner 함수의 실행 결과가 아닌 함수 자체를 반환
}

const ella = outer();
ella();    // 10

outer함수는 중첩 함수 inner를 ella에게 반환하면서 생명 주기를 마감한다. outer함수의 호출이 종료되면, outer함수의 실행 컨텍스트는 스택에서 제거된다. 따라서 outer함수의 지역 변수 x 또한 생명 주기를 동시에 마감하게 되고, 지역변수 x에 더이상 접근할 방법이 없는 것처럼 보인다.

🧐 하지만 코드를 실행하면 10이 출력되는데 왜일까?

outer 함수의 실행이 종료되더라도 언젠가 실행될 ella에 의해 내부의 inner 함수가 호출될 가능성이 열려있다.
그렇기 때문에 언젠가 inner 함수의 실행 컨텍스트가 활성화되면 outer 함수의 LexicalEnvironment를 필요로 할 것이므로 가비지 컬렉터의 수집 대상에서 제외된다.
그러므로 outer 함수의 지역변수 x에 접근할 수 있는 것이다.

여기서 중첩 함수 inner가 이미 생명 주기를 마감한 outer함수(외부 함수)의 지역 변수 x를 참조할 수 있기 때문에, inner를 클로저라 한다.

즉, 클로저란 "어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상"을 말한다.


closure라는 단어는 '닫혀있음, 폐쇄성, 완결성' 의 의미를 지니는 만큼

클로저를 이용하면 하나의 state가 의도치 않게 변경되지 않도록 안전하게 은닉하고, 특정 함수에게만 state 변경을 허용할 수 있다.

예제 1을 다시 보면,

const x = 1;

function outer () {
  const x = 10;
  const inner = function () {
    console.log(x);
  };
  
  return inner;    // return을 이용해 선택적으로 일부 변수에 대한 접근 권한을 부여할 수 있다.
}

const ella = outer();
ella(); 

outer 함수는 전역 스코프(외부)로부터 격리된 '닫힌 공간'이다. 그러므로 외부에서는 outer 함수 내부에 어떠한 개입도 할 수 없다.
외부에서는 오직 outer 함수가 return한 정보에만 접근할 수 있다.

이렇게 외부에 공개하고자 하는 정보들을 모아서 return하고, 내부에서만 사용할 정보들은 return하지 않는 것으로 접근 권한 제어가 가능하다.

return한 변수들은 공개 멤버(public member)가 되고, 그렇지 않은 변수들은 비공개 멤버(private member)가 되는 것이다.


※ 참고 자료
코어 자바스크립트
https://youtu.be/bwwaSwf7vkE
https://youtu.be/PVYjfrgZhtU

profile
Hello

0개의 댓글