[ Javascript ] 클로저의 실제 활용 예

클로저 실제 활용 예

:: 클로저를 가장 많이 사용하는 것은 자바스크립트 라이브러리나 모듈에서 private으로 나의 변수를 보호하고 싶을 때나 static변수를 이용하고 싶을 때이다. 그리고 일상적으로 콜백 함수에 추가적인 값들을 넘겨줘서 활용하거나 처음에 초기화했던 값을 계속 유지하고 싶을 때도 유용하게 사용할 수 있다.

 

아래 코드는 div에 버튼이 눌릴때마다 다른 내용을 추가하는 코드이다.

:: Add div를 누르면 text가 적혀있는 div가 생성되고 Add img를 누르면 이미지가 추가된다.

<div id="wrapper">
    <button data-cb="1">Add div</button>
    <button data-cb="2">Add img</button>
    <button data-cb="delete">Clear</button>
    Adding below...<br />
    <div id="appendDiv"></div>
</div>

 

<script>
    (function() {
        var appendDiv = document.getElementById("appendDiv");
        document.getElementById("wrapper").addEventListener("click", append);

        function append(e) {
            var target = e.target || e.srcElement || event.srcElement;
            var callbackFunction = callback[target.getAttribute("data-cb")];

            if(callback[target.getAttribute("data-cb")] !== undefined) {
                appendDiv.appendChild(callbackFunction());
            }
        };
        var callback = {
            "1": (function() {
                var div = document.createElement("div");
                div.innerHTML = "Adding new div";
                return function() {
                    return div.cloneNode(true);
                }
            }()),
            "2": (function() {
                var img = document.createElement("img");
                img.src="https://blog.kakaocdn.net/dn/dZtolT/btryJh3q8bc/EYnv72Dbrkwd4JwjlnUqmk/tfile.svg";
                return function() {
                    return img.cloneNode(true);
                }
            }()),
            "delete": function() {
                appendDiv.innerHTML = "";
                return document.createTextNode("Cleared");
            }
        };
    }());
</script>

 

클로저를 활용한 부분들

var appendDiv = document.getElementById("appendDiv");

appendDiv를 미리 가져와서 한번의 초기화만으로 이후 함수들이 계속 접근이 가능하게 해준다.

var div = document.createElement("div");

var img = document.createElement("img");

 

각 콜백 함수들이 추가할 HTML엘리먼트를 만들어준다.

 

위 코드에서 어떤 버튼이 눌리는지는 DOM에 입력된 data-*속성을 이용해서 어떤 콜백 함수를 호출할지 결정해준다. 각 콜백 함수의 상위 클로저에서는 자바스크립트로 노드를 만들어뒀다가 콜백 함수가 호출되면 해당 노드를 복사해 appendDiv에 지속해서 추가하는 방식으로 동작한다.

 

이렇게 최초 초기화된 고정적인 값이나 변수를 자주 이용하는 경우, 클로저를 통해 최초 초기화해두고 콜백 함수에서 지속해서 참조하는 것이 퍼포먼스상 유리하게 작용할 수 있으며, 객체의 속성이 자유롭고 쉬운 자바스크립트에서는 이러한 디자인 패턴이 효율적이다.

위 코드에서 참고하고 활용할 수 있는 예들

• 클로저로 한 번만 DOM을 탐색하고 appendDiv를 계속 보관하여 활용하기
• div, img등 노드/템플릿을 자바스크립트로 만들어두고 필요할 때마다 복제 생성하여 활용하기
• 하나의 div에만 이벤트 핸들러를 설정하여 관리할 수 있는 이벤트 델리게이션 패턴
• 이벤트가 발생한 대상 엘리먼트를 크로스 브라우저에서 가져오기
• callback변수를 활용하여 대상에 따라 동적으로 콜백 함수 호출하기
• HTML5의 스펙에 맞는 사용자 정의 data-속성 사용하기