[모던 JS] CH24. 클로저 (#12)

CH24. 클로저

클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.

24.1 렉시컬 스코프

렉시컬 스코프(정적 스코프)?

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

 

→ 렉시컬 환경의 "외부 렉시컬 환경에 대한 참조"에 저장할 참조값,

    즉 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정

24.2 함수 객체의 내부 슬롯

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

- 함수 객체의 내부 슬롯에 저장된 현재 실행중인 실행 컨텍스트의 렉시컬 환경의 참조가 바로 상위 스코프

- 자신이 호출되었을 때 생성될 함수 렉시컬 환경의 "외부 렉시컬 환경에 대한 참조"에 저장될 참조값

- 함수 객체는 내부 슬롯에 저장한 렉시컬 환경의 참조, 즉 상위 스코프를 자신이 존재하는 한 기억함

24.3 클로저와 렉시컬 환경

const x = 1;

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

const innerFunc = outer();
innerFunc();

→ 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있음, 

이러한 중첩 함수를 클로저라고 부름

→ 클로저는 중첩 함수가 상위 스코프의 식별자를 참조하고 있고 중첩 함수가 외부 함수보다 더 오래 유지되는 경우에 한정하는 것이 일반적임

24.4 클로저의 활용

- 상태를 안전하게 변경하고 유지하기 위해 사용함

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

const counter = (function() {
    let counter = 0;
    
    return function(aux) {
        counter = aux(counter);
        return counter;
    };
} ());

function increase(n) {
    return ++n;
}

function decrease(n) {
    return --n;
}

console.log(counter(increase));
console.log(counter(increase));

console.log(counter(decrease));
console.log(counter(decrease));

24.5 캡슐화와 정보 은닉

- 캡슐화는 객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 동작인 메서드를 하나로 묶는 것을 말함

- 캡슐화는 객체의 특정 프로퍼티나 메서드를 감출 목적으로 사용하기도 하는데 이를 정보 은닉이라고 함 

- 정보 은닉은 정보를 보호하고, 객체 간의 상호 의존성(결합도)를 낮추는 효과가 있음

24.6 자주 발생하는 실수

const funcs = [];

for(let i=0;i<3;i++){
    funcs[i] = function() {return i;};
}

for (let i=0;i<funcs.length;i++){
    console.log(funcs[i]());
}