12. Javascript 클로저(Closure)(2) - 클로저의 활용 2

 

앞서 살펴본 클로저의 활용 예제 첫 번째는, 사용자가 정의한 함수나 이벤트를 특정 함수의 실행과 연결할 수 있는 수단으로써 사용한 케이스를 다룬 내용입니다. 이번 아티클에서 다룰 클로저의 예제는 함수의 캡슐화를 목적으로 사용하는 예시입니다.

 

객체지향 언어를 공부하신 분들이라면, 캡슐화의 목적은 잘 알고 계실 것입니다. 쉽게 말해, Javascript에서 중요한 변수나 데이터가 전역 변수로 선언되어 손쉽게 접근해 수정이 발생하거나 다른 라이브러리와 충돌하는 현상을 방지하기 위해 해당 변수의 스코프를 변환하는 등의 방식을 취하는 것을 의미합니다. 

 

 

---

 

한 가지 예제를 생각해 보겠습니다. 어떤 문장을 가진 배열이 있고, 비어있는 인덱스에 사용자로부터 파라미터 값을 받아 해당 인자를 채워 넣는 함수를 작성한다고 가정해 봅시다. 

 

var sampleArr = [
    " Lable :",
    "",
    " Rap Name :",
    "",
    " Debut :",
    ""
];

function getCompletedStr(lable, rapname, debut){
    sampleArr[1] = lable;
    sampleArr[3] = rapname;
    sampleArr[5] = debut;

    return sampleArr.join('');
}

var result = getCompletedStr('AOMG', 'SIMON D', '2010');
console.log(result);

 

코드 자체는 무난하게 실행되어, 원하는 결과 값이 출력됩니다. 하지만 조금 복잡한 구조의 코드이거나 프로그램이라고 가정하면, sampleArr이라는 배열 변수는 꽤나 중요한 데이터입니다. 하지만 이 sampleArr은 전역 변수로서 노출되어 있고, 쉽게 접근이 가능한 상태로 선언이 되어있습니다. 만약 다른 사람이 작업하거나 다른 라이브러리와 함께 통합하여 사용한다고 했을 때, 이 변수를 실수로 변경하거나 충돌을 발생시킬 수 있습니다. 

 

이때 위에서 작성한 예제 코드와 거의 유사한 요소들에 클로저를 더해서 이러한 현상을 미연에 방지할 수 있는 구조로 변경해 보도록 하겠습니다. 여기서는 앞서 잠시 학습하고 지나갔던 '즉시 실행 함수'의 형태를 응용해 사용하려고 합니다. 즉시 실행 함수는 코드 실행 시 단 1회만 사용하는 경우에 주로 사용한다고 했습니다. 또한 여러 라이브러리에서 초기화할 때만 사용하게 되는 코드를 즉시 실행 함수 형태로 작성해두면, 다른 코드와의 충돌을 막을 수 있기 때문에 사용한다고 했습니다. 이제, 즉시 실행 함수와 클로저를 조합하여 우리가 원하는 결과를 만들어 보도록 하겠습니다. 

 

 

var getCompletedStr = (function(){
    var sampleArr = [
        " Lable :",
        "",
        " Rap Name :",
        "",
        " Debut :",
        ""
    ];

    return (function(lable, rapname, debut){
        sampleArr[1] = lable;
        sampleArr[3] = rapname;
        sampleArr[5] = debut;

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

var result = getCompletedStr('AOMG', 'SIMON D', '2010');
console.log(result);

 

우선 즉시 실행 함수 형태로 getCompletedStr을 선언했습니다. 그리고 그 안에, 익명 함수 하나를 선언해 sampleArr을 선언하고 클로저로 또하나의 익명 함수를 리턴하도록 선언했습니다. 이는 그대로 getCompletedStr 함수에 리턴되는 형태이므로, getCompletedStr에 세 개의 파라미터 값을 입력해 실행해 주면 원하는 결과가 result로 전달됩니다.