클로저 기본

MDN

클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다.

클로저란

클로저는 외부함수의 변수에 접근할 수 있는 내부 함수를 일컫습니다. 스코프 체인으로 표현되기도 합니다. 클로저는 세가지 스코프 체인을 가집니다

1. 클로저 자신에 대한 접근(자신의 블럭내에 정의된 변수)
2. 외부 함수의 변수에 대한 접근
3. 전역 변수에 대한 접근

생성한 시점의 스코프 체인을 기억한다

var x = 'X';

function outer() {
    var a = 1;
    var b = "B";
    function inner() {
        var a = 2;
        console.log(b);
    }
    return inner;
}

var myClosure = outer();
myClosure() // B

function showName(firstName, lastName) {
    var nameIntro = "Your name is";
    // 이 내부 함수는 외부함수의 변수뿐만 아니라 파라미터 까지 사용할 수 있다.
    function makeFullName() {
        return `${nameIntro} ${firstName} ${lastName}`;
    }
    return makeFullName();
}

console.log(showName("Lionel", "Messi")); // Your name is Lionel Messi

MDN

클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다.

위 정의에서 말하는 “함수”란 반환된 내부함수를 의미하고 “그 함수가 선언될 때의 렉시컬 환경(Lexical environment)”란 내부 함수가 선언됐을 때의 스코프를 의미한다. 즉, 클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수를 말한다. 이를 조금 더 간단히 말하면 클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수다라고 말할 수 있겠다.

// example
function makeAdder(x) {
    var y = 10;
    return function (z) {
        y = 50;
        return x + y + z;
    };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(10)) // 65;
console.log(add10(20)) // 80;

// example
function makeCounter(predicate) {
    var counter = 0;
    return function () {
        counter = predicate(counter);
        return counter;
    };
}

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

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

const increaser = makeCounter(increase);
console.log(increaser()); // 1
console.log(increaser()); // 2

const decreaser = makeCounter(decrease);
console.log(decreaser()); // -1
console.log(decreaser()); // -2