[JavaScript] 자바스크립트 클로저 (Closure)

일급 객체 first-class object

• 일급 객체란, 다른 변수처럼 대상을 다룰 수 있는 것
• 자바스크립트에서 함수는 일급 객체이다.
• 즉, 자바스크립트에서 함수는 변수처럼 다룰 수 있다.

function add(a, b) {
    return a + b
}

// 함수를 다른 함수의 인자로 넘긴다.
[1, 2, 3].reduce(add, 0)

(() => {
    console.log('익명 함수를 생성한다.')
})()

function outer(a) {
    function inner(b) {
        return a + b
    } // 중첩 함수를 생성한다.
    return inner(10)
}

const Person = (name) => {
    // 함수를 변수로 생성한다.
    const printName = () => console.log(name)
    return { printName }
}  // 함수를 리턴하며 closure를 생성한다.

const person = Person('Daniel')
person.printName()

function printName(name) {
    console.log('name : ', name)
}

// 함수끼리 비교한다.
// ===의 경우, 변수가 같은 객체(함수)를 가리키는지 체크한다.
console.log(printName === person.printName)

 

 

클로저

function createCard() {
    let title = "";
    let content = "";
    function changeTitle(text) {
        title = text
    }
    function changeContent(text) {
        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();

const card2 = createCard();

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

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

 

let rate = 1.05;

function app() {
    let base = 10;
    
    return function (price) {
        return price * rate + base;
    };
}

const getPrice = app();
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는 매번 생성되지 않는다.