변수 선언 방법

'모든 변수는 함수의 맨 위에 선언해라'

(function () {
    var subjects = ["1st subject", "2nd subject", "3rd subject"],  
        el, i,
        xhr = null;    // 해당 scope에 해당하는 function의 위에 정리해서 작성
    for (i = 0 ; i < 3 ; i++) {
        el = document.getElementById("subject" + i);
        el.innerHTML = el.value = subjects[i];
        el.addEventListener("click", function () {
            alert(this.value + " pressed!");
        });
    };

    xhr = new XMLHttpRequest();
    xhr.open("GET", "http://unikys.tistory.com/list/");
    xhr.onload = function () {
        var contents = JSON.parse(xhr.responseText), 
            i, el;    // 해당 scope에 해당하는 function의 위에 정리해서 작성
        for (i = 0 ; i < 3 ; i++) {
            el = document.getElementById("content" + i);
            el.innerHTML = "contents";
        };
    };
    xhr.send();
}());

 

1. 초기화 실수 최소화

상단에 모든 변수를 나열하고 필요한 변수들에 대하여 초기화 체크를 할 수 있다는 점이다. 이는 일단 변수를 정의했다면 null이나 0 등과 같은 기본값으로 설정을 해주고, 해당하는 변수가 생성되었는지 아닌지를 먼저 체크하는 것이 검증(validation) 로직을 수행하는데 있어서 조금 더 확실한 정보를 얻을 수 있기 때문이기도 하다.

2. 해당 scope에서 사용하는 변수에 대한 관리 용이

위의 초기화를 관리하는 것 또한 이 범주와 비슷하기도 하고, 이전 글에서 살펴봤듯이, 자바스크립트는 '선언을 안했다고 해서 에러를 내지 않기 때문에' 어떠한 변수를 선언했는지 관리하는 것이 매우 중요하다. 위의 AJAX를 사용하는 예제를 살펴보면, 외부에서 사용하는 i와 el이 있고, xhr 내부에서 사용하는 i와 el이 있다. 이러한 일반적으로 같은 이름을 가질 수 있는 변수를 사용할 때, 어느 scope에 딸려 있는 i, el 변수인지, 파악할 때 이렇게 변수들을 정리해두면 유용하게 체크할 수 있을 것이다. 게다가 추가적으로 특정 'scope'가 생성될 때 그 위치에 현재 scope에서 사용되고 있는 변수명들을 쭉 나열하고 초기화 값들만 봐도 현재 scope에서 어떠한 작업을 할 것인지 대충 파악 하는 것 또한 가능하다.

3. minification의 최적화

소스의 사이즈를 줄여서 사용자가 다운로드 받아야 하는 양을 최소화 시키는 프로세스이다.

출처: https://unikys.tistory.com/329 [All-round programmer]