[ Javascript ] 글로벌 변수

글로벌 변수

글로벌 변수는 함수 외부에서 선언된 변수로, 프로그램 전체에서 접근할 수 있는 변수이다.

 

글로벌 변수의 예

1번. 기본

// 기본
<div id="div">DIV</div>
<button id="button">BUTTON</button>

 

// 글로벌 변수 예
<script>
    var element = document.getElementById('div');
    insertHTML = '<b>Hello World</b>';
    
    element.innerHTML = inserHTML;
</script>

 

2번. 이벤트 핸들러 할당

<script>
    var element = document.getElementById("div"),
    button = document.getElementById("button"),
    insertHTML = "<b>Hello World</b>";

    button.onclick = function() {
        element.innerHTML = insertHTML;
    };
</script>

 

3번. 글로벌 변수를 사용하여 AJAX를 활용

<script>
    var element = document.getElementById("div"),
    insertHTML = "<b>Hello World</b>";
    xhr = new XMLHttpRequest();
    button.onclick = function() {
        xhr.open("GET", "http://shiro21.tistory.com/");
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4 && xhr.status === 200) {
                element.innerHTML = xhr.responseText;
            }
        };
        xhr.send();
    };
</script>

 

글로벌 변수를 자제해야 하는 이유

• 브라우저에서 돌아가는 모든 소스와 데이터는 클라이언트 측에서 돌아가므로 해킹이나 보안에 취약할 수 있다.
• 다른 라이브러리를 사용하거나, 큰 프로젝트로 소스를 나누어서 관리할 때 충돌이 일어날 수 있다.

 

클로저를 활용하여 로컬 변수를 활용

<div id="wrapper">
    <div data-cb="1">Click DIV</div>
    <div data-cb="2">Click IMG</div>
    <div data-cb="delete">delete</div>
</div>
<div id="appendDiv"></div>

<script>
    (function() {
        var appendDiv = document.getElementById("appendDiv"),
        callback = {
            "1": (function() {
                var div = document.createElement("div");
                div.innerHTML = "#1";
                return function() {
                    return div.cloneNode(true);
                };
            }()),
            "2": (function() {
                var img = document.createElement("img");
                img.src = "https://via.placeholder.com/100x100";
                return function() {
                    return img.cloneNode(true);
                };
            }()),
            "delete": function() {
                appendDiv.innerHTML = "";
            }
        };

        function append(e) {
            var target = e.target || e.srcElement || event.srcElement,
            callbackFunction = callback[target.getAttribute("data-cb")];
            appendDiv.appendChild(callbackFunction());
        }
        document.getElementById("wrapper").addEventListener("click", append);
    }());
</script>

 

이렇게 간단한 변수명들은 쉽게 다른 코드와 충돌할 수 있기 때문에 보호해 주는 것이 좋다.