4.5 - 자바스크립트 Closure

자바스크립트 Closure 

일급 객체란? 다른 변수처럼 대상을 다룰 수 있는 것을 말한다.

자바 스크립트에서 함수는 일급 객체이다.  즉, 자바스크립트에서 함수는 변수처럼 다루는 것이 가능하다. 

-> var f = function ( ){    }  -> function(전역으로 존재하는 객체 -> 함수는 전역 객체를 상속받은 인스턴스가 된다)

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}
} 

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

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

console.log(printName === person.printName)

05. 함수 add는 배열의 reduce 메서드의 인자로 넘어간다. (콜백함수를 실행해 배열의 인자를 조작한다.)
-> reduce는 다음과 같은 구조로 이루어져 있다.  arr.reduce(callback[, initialValue])
07 ~ 09. 익명함수를 생성한다 -> 생성된 변수를 바로 사용하는 것
11 ~ 16. 중첩함수를 생성한다 -> 다른 함수 안에서 변수를 생성하는 것 
18. 함수를 변수로 생성한다.(일급 객체의 성질)
21. 함수를 리턴하며 closure를 생성한다.
30. 함수끼리 비교한다. ===의 경우 변수가 같은 함수를 가리키는지 체크하는 것이다. 

 

정리 :

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

내부에 변수가 있을 때 리턴된 함수와 변수가 생명을 같이 하게 한다. 

예시1)

function creatCard(){
    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 = creatCard();

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

const card2 = creatCard();

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

 

예시2)

let rate = 1.05;

function app(){
    let base = 10;

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

const getPrice = app();

getPrice(120)
console.log(app()(1));
rate= 1.1;
console.log(app()(1));

 

04. base는 app 함수 내부, rate는 app 함수 외부의 스코프에 존재한다.
07. 함수가 참조하는 변수는 실행 시점에 실행 컨텍스트에 의해 스코프가 결정된다. -> 스코프에 따라 변수에 영향을 받는다.
13. 136이란 결과를 가진다.
14. 콘솔에 11.05  라고 표시된다.
15. rate의 변경은 두 클로저 함수 호출에 반영되지만 base에는 영향을 미치지않는다. -> base는 app 호출 시 매번 생성되는 반면, rate는 매번 생성되지 않는 다는 것을 알 수 있다.
16. 콘솔에 11.1 이라고 표시된다.