자바스크립트 클로저

자바스크립트 객체에는 기본적으로 은닉화 개념이 없다.

let wallet = {
    money: 1,
    count: function() {
        this.money++;
        console.log(this.money);
    }
};

wallet.count();
wallet.count();
wallet.count();

/** 외부에서 접근 가능 */
wallet.money = 10000;

wallet.count();
wallet.count();
wallet.count();

결과(자바스크립트 코딩 컨벤션(_money)으로 경고할 수 있지만, 의미 x)

앞서 포스팅한 

스코프 개념, 함수도 객체다라는 개념을 활용해 은닉화가 가능한데,

이를 클로저라 한다.

함수를 객체로 볼 수 있기 때문에 아래와 같은 사용이 가능하다.

function wallet() {
    /** 자유변수 */
    let money = 0;

    /** 클로저 */
    return function countFunc() {
        money++;
        console.log(money);
    };
}

let count = wallet();

count();
count();
count();
count();
count();

그리고 외부에서는 wallet 스코프의 변수를 건드릴 방법이 없다.

결과

그리고 아래와 같이,

클로저에서는 상위 스코프를 계속 찾아야 하는 경우가 많으므로,

메모리를 많이 사용할 수 있으므로 주의해야 한다.

let arg1 = 1;
let arg2 = 2;
let arg3 = 3;


function outerFunc() {
    let a = 100;

    return function innerFunc() {
        console.log(a, ', ', arg1, ', ', arg2, ', ', arg3);
    };
}

let closerBucket = outerFunc();
closerBucket();


console.log(closerBucket);

아래와 같이 즉시실행함수를 사용해 객체를 리턴하는 형식도 많이 볼 수 있다.

let getArr = (function () {
    let arr = ['let', ' ', 'me', ' ', 'do', ' ', 'it', ' ', 'again'];

    return (function () {
        arr[9] = ' ';
        arr[10] = 'good!!!!!';

        return arr.join('');
    })();
})();

(함수를 호출함과 동시에 실행하지 않으면, 내부 함수가 실행되지 않으므로, 함수객체 자체를 리턴)