[JavaScript] 자바스크립트 클로저란?

🎯 클로저

• 자바스크립트 클로저는, 함수의 일급 객체 성질을 이용한다.
• 함수가 생성될 때, 함수 내부에서 사용되는 변수들이 외부에 존재하는 경우 그 변수들은 함수의 스코프에 저장된다.
• 함수와 함수가 사용하는 변수들을 저장하는 공간을 클로저(closure)라고 한다.

// 팩토리 함수
function createCard() {
    let title = "";
    let content = "";
    function changeTitle(text) {
        return { title = text }
    }
    function changeContent(text) {
        return { content = text }
    }
    function print() {
        console.log("TITLE - ", title);
        console.log("CONTENT - ", content);
    }

    return { changeTitle, changeContent , print };
}

// 클로저 생성
const card1 = createCard();

card1.changeTitle("생일카드");
card1.changeContent("생일 축하해");
card1.print();

// 클로저 생성, card1와 다른 별도의 메모리 공간에 title, content 생성
const card2 = createCard();

card2.changeTitle("감사카드");
card2.changeContent("고마워");
card2.print();

• 함수를 생성해서 리턴하는 함수를 팩토리 함수라고 부른다.
• 팩토리 함수 내부에서 생성한 변수들은 팩토리 함수가 끝나도 메모리에 살아있다.

let rate = 1.05;

function app() {
    let base = 10;

    return function(price) {
        return price * rate + base;
    };
}

const getPrice = app();
console.log(getPrice); // function (price) { return price * rate + base; }
console.log(getPrice(120)); // 136

• base는 app 함수 내부, rate는 app 함수 내부의 스코프에 존재한다.
• 함수가 참조하는 변수는 실행 시점에 실행 컨텍스트에 의해 스코프가 결정된다.

 

📝 주의사항

let rate = 1.05;

function app() {
    let base = 10;

    return function(price) {
        return price * rate + base;
    };
}

console.log(app()(1)); // 11.05;
rate = 1.1;
console.log(app()(1)); // 11.1

• 스코프에 따라서 변수에 영향을 받는다.
• rate의 변경은 두 클로저 함수 호출에 반영되지만, base는 증가해도 영향을 미치지 않는다.
• base 변수는 app 호출될 때마다 별도의 메모리 공간에 할당되는 변수이므로 간섭이 없다.
• 그러나 rate경우 app함수 밖에서 선언되었기 때문에 rate 값이 바뀌면 모든 클로저에 영향을 끼친다.
• 즉, base는 app 호출 시 매번 생성되는 반면, rate는 매번 생성되지 않는다.