[모던 자바스크립트 Deep Dive] 21. 클로저

렉시컬 스코프

자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정

함수의 상위 스코프를 결정한다 = 렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 저장할 참조 값을 결정한다

렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 저장할 참조값, 즉 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정됨

 

함수 객체의 내부 슬롯 [[Environment]]

함수가 정의된 환경(위치)과 호출되는 환경(위치)는 다를 수 있음 → 렉시컬 스코프가 가능하려면 함수는 자신이 호출되는 환경과 상관없이 자신이 정의된 환경, 즉 상위 스코프 (함수 정의가 위치하는 스코프)를 기억해야함

→ 함수는 자신의 내부 슬롯 [[Environment]] 에 자신이 정의된 환경 즉, 상위 스코프의 참조를 저장

여기서의 상위 스코프 참조는 현재 실행 중인 실행 컨텍스트의 렉시컬 환경을 가리킴

이유) 함수 정의가 평가되어 함수 객체를 생성하는 시점은 함수가 정의된 환경, 즉 상위 함수가 평가 또는 실행되고 있는 시점이며 이 때 현재 실행 중 인 실행 컨텍스트는 상위 함수의 실행 컨텍스트이기 때문

 

상위 스코프

• 함수 객체의 내부 슬롯 [[Environment]] 에 저장된 현재 실행 중인 실행 컨텍스트의 렉시컬 환경의 참조
• 자신이 호출되었을 때 생성될 함수 렉시컬 환경의 '외부 렉시컬 환경에 대한 참조'에 저장될 참조 값
• 함수 객체는 내부 슬롯 [[Environment]] 에 저장한 렉시컬 환경의 참조, 즉 상위 스코프를 자신이 존재하는 한 기억 함

 

클로저와 렉시컬 환경

 

const x = 1;
// ① 현재 진행 중인 실행 컨텍스트(전역 렉시컬 환경)의 렉시컬 환경을 상위 스코프로서 outer의 [[Envrionment]] 에 저장
function outer(){
 const x = 10;
 // ② 현재 진행 중인 실행 컨텍스트(outer 렉시컬 환경)의 렉시컬 환경을 상위 스코프로서 inner의 [[Envrionment]] 에 저장
 const inner = function (){consoel.log(x);} 
 return inner;
}

// outer 함수를 호출하면 중첩 함수 inner를 반환하고 생명주기 마감
// outer 함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 팝하여 제거
// 실행 컨텍스트 마감으로 outer 함수의 지역 변수 x 또한 생명주기 마감
const innerFunc = outer(); 
// 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩함수는 이미 생명 주기가 종료한 외부 함수의 변수 참조 가능 : 클로저
innerFunc(); // 4) 10

outer 함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 제거되지만 outer 함수의 렉시컬 환경까지 소멸되는 것은 아님

 = outer 함수의 실행 컨텍스트는 inner 함수의 [[Environment]] 내부 슬롯에 의해 참조되고 있고 inner 함수는 전역 변수 innerFunc에 의해 참조되고 있으므로 가비지 컬렉션 대상이 X 

 

클로저

• 함수가 자유 변수에 의해 닫혀있다라는 의미, 자유 변수에 묶여있는 함수
• 자유 변수 :  클로저에 의해 참조되는 상위 스코프의 변수
• 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료된 외부 함수의 변수 참조 가능
• 중첩 함수가 상위 스코프의 식별자를 참조하고 있고 중첩 함수가 외부 함수보다 더 오래 유지되는 경우 한정

모든 함수가 상위 스코프를 기억하지만 모든 함수를 클로저라고 하지 않는 이유

• 상위 스코프의 어떤 식별자라도 참조하지 않는 경우 대부분의 모던 브라우저는 최적화를 통해 상위 스코프를 기억하지 않기 때문

 

클로저의 활용

클로저는 상태를 안전하게 변경하고 유지하기 위해 사용

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

// 즉시 실행 함수 : 즉시 실행 함수는 호출 후 소멸되지만 반환한 클로저는 increase 변수에 할당되어 호출 가능
const Counter = (function(){
 // 카운트 상태 변수 : 즉시 실행 함수에서 선언된 변수로 외부애서 접근 X
 let num = 0;
 
 // 자기가 평가되어 함수 객체가 될 때 실행 중인 실행 컨텍스트의 렉시컬 환경을 기억하는 클로저
 // 즉시 실행 함수의 자유변수인 num 참조 가능
 Conter.prototype.increase = function(){
  return ++num;
 };
 
 Counter.prototype.decrease = function(){
  return num > 0 ? -- num : 0;
 };
 
 return Counter;
})();

const Counter = new Counter();

// 함수를 인수로 전달받고 함수를 반환하는 고차 함수
// 이 함수는 카운트 상태를 유지하기 위한 자유 변수 counter를 기억하는 클로저를 반환
function makeCounter(aux){
 // 카운트 상태를 유지하기 위한 자유 변수
 let counter = 0;
 
 // 클로저를 반환
 return function(){
  // 인수로 전달받은 보조 함수에 상태 변경을 위임
  counter = aux(counter);
  return counter;
 };
}

// 보조 함수
function increase(n){
 return ++n;
}

// 보조 함수
function decrease(n){
 return --n;
}

// 함수로 함수를 생성
// makeCounter 함수는 보조 함수를 인수로 전달받아 함수를 반환
const increaser = makeCounter(incarease);
// increaser 함수와는 별개의 독립된 렉시컬 환경을 갖기 때문에 카운터 상태가 연동되지 않음
const decreaser = makeCounter(decrease);

makeCounter 함수를 호출하면 그 때마다 새로운 makeCounter 함수 실행 컨텍스트의 렉시컬 환경 생성

캡슐화와 정보 은닉

캡슐화 : 객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 동작인 메서드를 하나로 묶는 것 (= 정보 은닉)

• 적절치 못한 접근으로부터 객체의 상태가 변경되는 것을 방지해 정보 보호
• 객체간의 상호 의존성, 결합도를 낮추는 효과

const Person = (function(){
 let _age = 0; // private
 
 // 생성자 함수
 function Person(name, age){
  this.name = name; // public
  _age = age;
 }
 
 Person.prototype.sayHi = function(){
  console.log(`안녕하세요! 저는 ${_age}살 ${this.name} 입니다.`);
 };
 
 // 생성자 함수 반환
 return Person;
})();

const me = new Person("Echichi", 100);
me.sayHi(); // 안녕하세요! 저는 100살 Echichi 입니다.
console.log(me.name); // Echichi
console.log(me._age); // undefined

Person 생성자 함수와 sayHi 메서드는 이미 종료되어 소멸한 즉시 실행 함수의 지역 변수 _age 를 참조할 수 있는 클로저

 

자주 발생하는 실수

var funcs = [];

for(var i = 0; i < 3; i++){	// 최종적으로 i의 값은 3
	funcs[i] = function(){ retrun i; } // i를 리턴하는 함수 세 개 저장
}
// funcs[0] → 이 함수를 호출하면 i의 값을 반환 (i는 3)
// funcs[1] → 이 함수를 호출하면 i의 값을 반환 (i는 3)
// funcs[2] → 이 함수를 호출하면 i의 값을 반환 (i는 3)
for(var j = 0; j < funcs.length; j++){
 console.log(funcs[j]()); // 3 3 3
}

funcs 배열의 요소로 추가한 함수를 호출하면 전역 변수 i 를 참조하여 i 의 값 3 출력

var funcs = [];

for(var i = 0; i < 3; i ++){ 
 funcs[i] = (functions(id){ // 전역 변수 i 를 id에 할당한 후 (중첩 함수의 상위 스코프에 존재 → 자유 변수로 값 유지)
  return function(){ return id; } // 중첩함수 반환 후 종료
 })(i)
}

for(var j = 0; j < funcs.length; j++){
 console.log(funcs[j]()); // 0 1 2
}

즉시 실행 함수가 반환한 중첩함수는 자신의 상위 스코프(즉시 실행 함수의 렉시컬 환경)을 기억하는 클로저로 id 값 유지

const funcs = [];
// let은 블록 레벨 스코프 (코드블록을 지역 스코프로 인정)로
// 코드블록이 반복 실행 될 때마다 for문 코드 블록의 새로운 렉시컬 환경 생성
for(let i = 0; i < 3; i++){	
	funcs[i] = function(){ return i; }
}

for(var j = 0; j < funcs.length; j++){
 console.log(funcs[j]()); // 0 1 2
}

let은 블록 레벨 스코프를 가지므로 let으로 선언된 변수가 그것이 선언된 블록(여기서는 for 루프의 각 반복) 내에서만 유효함

→ for 루프의 각 반복은 'i'에 대한 자체적인 바인딩을 갖게 되어, 각 함수는 자신이 생성될 때의 'i'의 값을 스냅샷처럼 기억

→ 반복문의 코드 블록 내부에 함수 정의가 없는 반복문이 생성하는 새로운 렉시컬 환경은 반복 직후 아무도 참조하지 않기 때문에 가비지 컬렉션의 대상이 됨