클로저

mandoo·2022년 10월 28일
0

JavaScript

목록 보기
7/7

1. 클로저(Closure)

MDN에서는 클로저를 아래와 같이 정의하고 있다.

A closure is the combination of a function and the lexical environment within which that function was declared.”
클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다.

여기서 렉시컬 환경이란 실행 컨텍스트가 실행할 함수의 스코프 범위 안에 있는 변수와 함수를 프로퍼티로 저장해두는 객체를 의미한다.

function outer() {
  var x = 10;
  var inner = function () {
    console.log(x);
  };
  inner();
}

outer(); // 10

함수 inner는 함수 outer 내부에 선언된 내부 함수이므로 함수 inner가 속한 렉시컬 스코프는 전역, 함수 outer, 자신의 스코프이다. 따라서 함수 inner는 지역 함수 x에 참조(접근)할 수 있다.

내부함수 inner가 자신을 포함하고 있는 외부함수 outer의 변수 x에 접근할 수 있는 것, 다시 말해 상위 스코프에 접근할 수 있는 것은 렉시컬 스코프의 레퍼런스를 차례대로 저장하고 있는 실행 컨텍스트의 스코프 체인을 JavaScript 엔진이 검색하였기에 가능한 것이다.

  1. inner 함수의 스코프 내에서 변수 x를 검색한다 -> 검색 실패
  2. inner 함수를 포함하는 외부함수 outer의 스코프 내에서 x를 검색한다 -> 검색 성공
function outer() {
  var x = 10;
  var inner = function () {
    console.log(x);
  };
  return inner;
}

var func = outer();
func(); // 10

위 코드는 내부 함수 inner를 함수 outer 내에서 호출하는 것이 아니라 반환한다.
함수 outer는 내부함수 inner를 반환하였으므로 실행된 이후 실행 컨텍스트 스택에서 제거된다. 그러나 함수 func에서는 함수 outer 내에서 선언된 지역 변수 x를 참조하여 10을 출력하는데 이러한 특성이 클로저의 개념이라고 할 수 있다.
함수 outer가 종료된다 하더라도 함수 outer의 렉시컬 스코프에 존재하는 변수들과 매개변수들을 내부 함부인 inner가 참조할 수 있다는 것이다.

즉, 클로저는 반환된 내부 함수가 자신이 선언되었을 때의 렉시컬 환경(Lexical enviroment)를 기억하여 자신이 선언되었을 때의 환경(스코프) 밖에서 호출되어도 그 환경에 접근할 수 있는 함수를 말한다.
클로저에 의해 참조되는 외부 함수의 변수 즉 outer 함수의 변수 x를
자유 변수**(Free variable)라고 부른다. 클로저라는 이름은 자유변수에 함수가 닫혀있다(closed)라는 의미로 의역하면 자유변수에 엮여있는 함수라는 뜻이다.

실행 컨텍스트의 관점에서 설명하면, 내부 함수가 유효한 상태에서 외부 함수가 종료하여 외부 함수의 실행 컨텍스트가 반환되어도, 외부 함수 실행 컨텍스트 내의 활성 객체(AO, Activation object)는 내부 함수에 의해 참조되는 한 유효하여 내부 함수가 스코프 체인을 통해 참조할 수 있는 것을 의미한다.

즉 외부 함수가 이미 반환되었어도 외부 함수 내의 변수는 이를 필요로 하는 내부 함수가 하나 이상 존재하는 경우 계속 유지된다. 이때 내부 함수가 외부함수에 있는 변수의 복사본이 아니라 실제 변수에 접근한다는 것에 주의하여야 한다.

2. 참고 문서

poiemaweb: JavaScript 클로저

profile
매일 조금씩이라도 꾸준히

0개의 댓글