[ Javascript ] 변수 사용 방법과 성능

상위 스코프 체인의 변수를 사용하는 일반적인 예

HTML

<div id="divMouseover">Mouse over Highlight</div>
<div id="divFloatingContent">Floating</div>

JS

(function() {
    var divMouseover = document.getElementById("divMouseover"),
        divFloatingContent = document.getElementById("divFloatingContent");
    
    divMouseover.onmouseover = function() {
        var xhr = new XMLHttpRequest();
        divMouseover.style.backgroundColor = "#FF0000";
        divMouseover.style.color = "white";
        divMouseover.style.fontSize = "14px";
        xhr.open("GET", "../myweb/pages/test.php");
        xhr.onload = function() {
            divFloatingContent.innerHTML = xhr.responseText;
            divFloatingContent.style.display = "block";
        };
        xhr.send();
    };
    divMouseover.onmouseout = function() {
        divMouseover.style.backgroundColor = "#FFFFFF";
        divMouseover.style.color = "black";
        divMouseover.style.fontSize = "12px";
        divFloatingContent.style.display = "none";
    };
}());

위 코드는 특정 div에 마우스포인터가 놓이면 해당 div의 스타일을 바꾸고, 관련 내용을 AJAX로 서버에 요청해서 보여주는 코드이다.

 

상위 스코프 체인의 변수를 로컬 변수로 정의하여 사용하는 예

(function() {
    var divMouseover = document.getElementById("divMouseover"),
        divFloatingContent = document.getElementById("divFloatingContent");
    
    divMouseover.onmouseover = function() {
        var xhr = new XMLHttpRequest(), localDivMouseover = divMouseover;
        localDivMouseover.style.backgroundColor = "#FF0000";
        localDivMouseover.style.color = "white";
        localDivMouseover.style.fontSize = "14px";
        xhr.open("GET", "../myweb/pages/test.php");
        xhr.onload = function() {
            var localDivFloatingContent = divFloatingContent;
            localDivFloatingContent.innerHTML = xhr.responseText;
            localDivFloatingContent.style.display = "block";
        };
        xhr.send();
    };
    divMouseover.onmouseout = function() {
        var localDivMouseover = divMouseover
        localDivMouseover.style.backgroundColor = "#FFFFFF";
        localDivMouseover.style.color = "black";
        localDivMouseover.style.fontSize = "12px";
        divFloatingContent.style.display = "none";
    };
}());

로컬 변수로 정의해서 사용하면 변수를 여러 번 조회하지 않고 한 번만 조회하고, 나머지는 전부 다 로컬 변수를 조회한다.

이처럼 변수가 별로 없는 상황에서도 로컬 변수에 접근하는 것이 약 4 ~ 6%정도 더 좋게 나타난다.

 

이러한 스코프와 마찬가지로, 변수 속성 또한 한 단계를 들어갈 때마다 컴퓨팅 자원이 조금씩 소모된다. 따라서 이 또한 마찬가지로 로컬 변수로 끌어올 수 있다면 로컬 변수로 정의하여 사용하는 것이 좋다. 위에서는 .style과 같이 접근하는 것들이 그러한 예이다.

(function() {
    var divMouseover = document.getElementById("divMouseover"),
        divFloatingContent = document.getElementById("divFloatingContent");
    
    divMouseover.onmouseover = function() {
        var xhr = new XMLHttpRequest(),
        divMouseoverStyle = divMouseover.style;

        divMouseoverStyle.backgroundColor = "#FF0000";
        divMouseoverStyle.color = "white";
        divMouseoverStyle.fontSize = "14px";
        xhr.open("GET", "../myweb/pages/test.php");
        xhr.onload = function() {
            var localDivFloatingContent = divFloatingContent;
            localDivFloatingContent.innerHTML = xhr.responseText;
            localDivFloatingContent.style.display = "block";
        };
        xhr.send();
    };
    divMouseover.onmouseout = function() {
        var divMouseoverStyle = divMouseover.style
        divMouseoverStyle.backgroundColor = "#FFFFFF";
        divMouseoverStyle.color = "black";
        divMouseoverStyle.fontSize = "12px";
        divFloatingContent.style.display = "none";
    };
}());

이전 코드처럼 divMouseover.style에 여러번 접근하는 것이 아닌 처음부터 divMouseover.style을 변수에 할당하여 접근하면, 객체의 속성을 재귀로 탐색하는 단계를 생략할 수 있어서 성능을 개선할 수 있다.

 

정리

• 자바스크립트도 다른 프로그래밍 언어처럼 글로벌 변수의 사용은 자제하는 것이 좋다.
• window객체는 글로벌 스코프의 변수들을 속성으로 가지고 있다.
• var키워드를 사용하지 않고 변수를 사용하면 글로벌 변수가 될 위험성이 있다.
• 스코프가 생성되면 var키워드 하나에 변수들을 정의하면 좋다.
• 글로벌 변수의 사용을 최소화하기 위해 클로저나 모듈 패턴을 사용하면 된다.
• 상위 스코프에 있는 변수나 속성의 속성을 여러번 접근하는 경우 로컬 변수에 할당해서 사용하면 좋다.