Javascript, Closer(클로저) 의 사용 예시 및 이해과정

Javascript, Closer 의 사용 예시 및 이해과정

클로저는 전역변수를 사용하지 않고, 지역변수(private)로 선언하고 싶을 경우 사용하는 듯하다.

특징이면서 장점 : 부모함수 속 내부함수에서, 부모함수의 변수가 접근 가능한 것(지역변수화)

먼저 사용 안했을 경우, 네임스페이스를 사용하여 일본 환율 계산을 해본다

console.log('실습1 ----네임스페이스 사용, 변수 사용 제한 없음----------------------------');
 
var common = {};
common.jpnRate = 978;
var money = 20000;
common.makeJpnMoney = function (val) {
    return val / common.jpnRate * 100;
};
common.getJPNRate = function () {
    return common.jpnRate;
};
common.isNullorEmpty = function (val) {
    if (typeof val === undefined || val == "") return true;
    else return false;
};
common.addComma = function (val) {
    return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};
console.log('nmspace:makeJpnMoney : ' + common.makeJpnMoney(money));
console.log('nmspace:getJPNRate : ' + common.getJPNRate());
console.log('nmspace:addCommon : ' + common.addComma(money));
console.log('nmspace:bankMoney is Empty? : ' + common.isNullorEmpty(money)); //undefined
var nomoney = "";
console.log('nmspace:walletMoney is Empty? : ' + common.isNullorEmpty(nomoney));
 

[ console.log 결과 ] 

실습1 ----네임스페이스 사용, 변수 사용 제한 없음----------------------------

nmspace:makeJpnMoney : 2044.9897750511248

nmspace:getJPNRate : 978

nmspace:addCommon : 20,000

nmspace:bankMoney is Empty? : false

nmspace:walletMoney is Empty? : true

클로저로 바꾼형태, 전역변수를 사용하지 않고, 지역변수를 사용할 수 있다.

이로서 jpnRate는 다른 변수와 섞이지 않고, 고유하게 사용할 수 있어 충돌이 날 수 없다.

console.log('실습2 ---클로저 사용, 변수 제한 가능------------------------------');
var bankMoney = 20000;
function Util() {
    var jpnRate = 978;
    return {
        makeJpnMoney: function (val) {
            return val / jpnRate * 100;
        },
        getJPNRate: function () {
            return jpnRate;
        },
        isNullorEmpty: function (val) {
            if (typeof val === undefined || val == "") return true;
            else return false;
        },
        addComma: function (val) {
            return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }
    }
}
var util = Util();
console.log('closer:makeJpnMoney : ' + util.makeJpnMoney(bankMoney));
console.log('closer:getJPNRate : ' + util.getJPNRate());
console.log('closer:addCommon : ' + util.addComma(bankMoney));
console.log('closer:bankMoney is Empty? : ' + util.isNullorEmpty(bankMoney)); //undefined
var walletMoney = "";
console.log('closer:walletMoney is Empty? : ' + util.isNullorEmpty(walletMoney));

[ console.log 결과 ] 

실습2 ---클로저 사용, 변수 제한 가능------------------------------

closer:makeJpnMoney : 2044.9897750511248

closer:getJPNRate : 978

closer:addCommon : 20,000

closer:bankMoney is Empty? : false

closer:walletMoney is Empty? : true

좀더 쉬운 이해와 실제 사용될 수 있는 예시, 

카운팅을 해야하는데 혹시 다른 변수와 겹칠 수 있다고 생각하여 제한을 두고 싶을때 사용한다.

console.log('카운팅으로 예시 만들기 : 클로저 사용으로 전역변수 위험성 제거');
console.log('사용 한 예시 result : 전역변수 없이 카운팅 가능----------');
var Count = (function () {
    var counted = 0;
    function addCount() {
        return counted += 1;
    };
    return addCount;
}());
console.log('count is : ' + Count());
console.log('count is : ' + Count());
console.log('count is : ' + Count());
console.log('count is : ' + Count());

[ console.log 결과 ] 

카운팅으로 예시 만들기 : 클로저 사용으로 전역변수 위험성 제거

사용 한 예시 result : 전역변수 없이 카운팅 가능----------

count is : 1

count is : 2

count is : 3

count is : 4

응용하여 더하기 빼기 모두 가능하게 만들어본다.

//응용
console.log('응용버전--------------------------------');
var Count = (function () {
    var counted = 0;
    function addCount() {
        return counted += 1;
    };
    function minusCount() {
        return counted -= 1;
    };
    return {
        addCount: addCount,
        minusCount: minusCount
        //count가 object, 리턴 속 함수들을 긁어와 지역변수 조작
    };
})();
console.log('count is : ' + Count.addCount());
console.log('count is : ' + Count.addCount());
console.log('count is : ' + Count.addCount());
console.log('count is : ' + Count.addCount());
console.log('count is : ' + Count.minusCount());
console.log('count is : ' + Count.minusCount());
 
 

[ console.log 결과 ] 

응용버전--------------------------------

count(add) is : 1

count(add) is : 2

count(add) is : 3

count(add) is : 4

count(minus) is : 3

count(minus) is : 2

간단한 예로, 이런식으로도 사용가능하다.

function NameMaker(FamilyName) {
    return function (Name) {
        return FamilyName + " " + Name;
    }
}
 
var MakeKimName = NameMaker("김");
console.log('생성된 이름 : ' + MakeKimName("연아"));
console.log('생성된 이름 : ' + MakeKimName("범수"));
var MakeAhnName = NameMaker("안");
console.log('생성된 이름 : ' + MakeAhnName("정환"));
console.log('생성된 이름 : ' + MakeAhnName("아파"));

[ console.log 결과 ] 

생성된 이름 : 김 연아

생성된 이름 : 김 범수

생성된 이름 : 안 정환

생성된 이름 : 안 아파