클로저(Closure)

📌 클로저 기초

let one;
one = 1;

function addOne(num) {
    console.log(one + num); // one은 전역 Lexical에 num은 내부 Lexical 환경에 존재
}

addOne(5);

• 코드가 실행되면 선언된 변수와 함수들이 Lexical 환경에 올라간다(변수와 함수 호이스팅)
• let도 선언 즉시 호이스팅 되지만 초기화(undefined 할당)되지 않음 => 사용 불가
• 함수 선언문은 벼눗와 달리 즉시 초기화 됨 => 사용 가능
• 변수에 할당된 함수 표현식은 실제 코드에 도달해야 사용 가능

📍전역 Lexical 환경
let one, function addOne

📍내부 Lexical 환경
매개변수 num

• 내부 Lexical 환경은 전역 Lexical 환경을 참조한다.
• 코드에서 변수를 찾을 때 내부, 없으면 외부, 없으면 전역 Lexical 환경까지 찾는다.
• Closure는 함수와 렉시컬 환경의 조합이다.
• 함수가 생성될 당시의 외부 변수를 기억, 생성 이후에도 접근 가능하다.

📌 클로저 예제

function makeAdder(x) {
    return function(y) {
         return x + y;
    }
}

const add3 = makeAdder(3);
console.log(add3(2)); // 5, add3 함수가 생성된 이후에도 상위 함수인 makeAdder의 x에 접근 가능

const add10 = makeAdder(10);
console.log(add10(5));  // 15
console.log(add3(1));   // 4

• 외부 함수의 실행이 끝나서, 외부 함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다.
• 위 예제에서 makeAdder(10)이 호출되지만 add3은 아무런 변화가 없다.
• 이것으로 미루어보아 add10과 add3은 서로 다른 환경을 가지고 있다.

📌 클로저 예제 2

function makeCounter() {
    let num = 0; // 은닉화

    return function () {
       return num++;
    };
}

let counter = makeCounter();

console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2

• 내부함수에서 외부함수의 변수인 num에 접근한다.
• 결국 외부함수의 변수를 참조하는 내부함수로만 값을 변경할 수 있다.
• 이를 은닉화 라고 한다.