[속깊은 자바스크립트 강좌] 변수 선언 방법에 대하여

* 이번에는 진짜로 실용적으로 쓸 수 있는 내용들을 쭉 한번 살펴보자. 지난번의 글로벌 변수에 대한 내용도 사실은 진정한 '프로그래머'라면 글로벌 변수를 잘 안 쓸테니 별로 쓸일도 없을거라고 생각하면 그다지 실용적인 내용은 아니라고 볼 수 있다. 하지만 이번에는 변수 선언을 하면서 들이면 좋을 습관들과 왜 그렇게 하는 것이 좋은가에 대한 내용까지 다루면서 자바스크립트를 개발하면서 습관들이면 좋을 내용들을 다룰 것이다.

- 이전글

2012/12/10 - [속깊은 자바스크립트 강좌] 시작 (예고편)

2012/12/17 - [속깊은 자바스크립트 강좌] 자바스크립트의 Scope와 Closure 기초

2013/01/07 - [속깊은 자바스크립트 강좌] function declaration vs function expression 차이점

2013/01/10 - [속깊은 자바스크립트 강좌] 함수를 호출하는 방법과 this의 이해

2013/01/21 - [속깊은 자바스크립트 강좌] Closure의 이해 / 오버로딩 구현하기

2013/01/30 - [속깊은 자바스크립트 강좌] Closure 쉽게 이해하기/실용 예제 소스

2013/02/13 - [속깊은 자바스크립트 강좌] 쉬어가기: 웹 개발 방법론의 변화/자바스크립트의 재발견

2013/02/22 - [속깊은 자바스크립트 강좌] 객체지향의 기본: prototype

2013/10/04 - [속깊은 자바스크립트 강좌] 상속, new와 Object.create의 차이

2013/10/29 - [속깊은 자바스크립트 강좌] 글로벌(전역) 변수와 window 객체

 

* 전편에 이어서

: 전의 글로벌편에서 마지막에 '변수가 var로 선언되는 위치는 상관없고, 초기화되는 위치만 상관이 있다'라고 한 다음에, JSLint에서 제안하고 있는 코딩방법을 이어서 이야기하려고 한다. 일단 JSLint가 무엇인지 모른다면 한번쯤은 찾아서 해보는 것도 좋을 것이다. 나중에 이 JSLint라는 툴에 대해서 별도로 자세하게 다루는 기회도 올 것인데, 간단하게 어떠한 기능을 하는지 살펴보고 가자.

 

* JSLint?

: JSLint는 Douglas Crockford가 만든 '자바스크립트 소스 코드 검정 툴'이다. 올바른 코딩 습관을 가지고 코딩을 하고 있는지 검정하는 툴로 이 툴을 만든 장본인인 Douglas Crockford는 이 툴을 소개할때마다 이러한 말을 한다.

 

"It will hurt your feelings"

: 모든 사람들이 언제나 올바른 코딩 습관을 가질 수 없기도 하고, 이러한 검정툴에서 제안하는 코딩 습관을 모르고 코딩을 한 다음에 이 툴로 validation을 실시하면 그야말로 100개 이상의 지적을 당하게 되기 때문이다. 물론, 이 툴은 오류를 찾아내는 것이 아니라 '오류가 발생할 위험성있는 코딩 습관'을 찾아내는 것이기 때문에 만능은 아니고 자바스크립트 코딩을 하게 되면 어떠한 규칙을 찾아내는지 한번쯤 돌려보면 도움은 될 것이다. 하지만, 이 JSLint 자체는 매우 엄격하고 예외상황을 허용하지 않기 때문에 사람들은 JSLint보다 조금 더 유들한 JSHint를 사용하기도 한다. 일단 이에 대한 내용은 나중에 기회가 되면 자세하게 살펴보기로 하자.

 

: 아무튼 이 JSLint에서 제안하고 있는 변수 선언 습관이 있는데, 바로 '모든 변수는 함수의 맨 위에 선언해라'이다. 예를 들면, 아래와 같은 소스가 있을 수 있을 것이다. 일상적으로 많이 쓰이는 예를 한번 들어보도록 하겠다.

(function () {
    var subjects = ["1st subject", "2nd subject", "3rd subject"];
    for (var i = 0 ; i < 3 ; i++) {
        var el = document.getElementById("subject" + i);
        el.innerHTML = el.value = subjects[i];
        el.addEventListener("click", function () {
            alert(this.value + " pressed!");
        });
    };

    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://unikys.tistory.com/list/");
    xhr.onload = function () {
        var contents = JSON.parse(xhr.responseText);
        for (var i = 0 ; i < 3 ; i++) {
            var el = document.getElementById("content" + i);
            el.innerHTML = "contents";
        };
    };
    xhr.send();
}());

: 댓글이나 글 목록을 AJAX로 구현할 때 많이 쓰이는 방식일 것이다. 빠르게 보여주고자하는 제목은 웹언어를 통해서 가져오고, 조금 늦게 가져와도 되는 내용은 AJAX로 가져오는 방식의 소스를 예로 간단하게 만들어보았다. 이러한 소스의 변수 선언을 함수 맨 위에 정의한다고 하면 다음과 같이 될 것이다.

(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();
}());

: 바뀐 부분은 중간중간의 var 키워드가 없어지고, 2~4줄과 16~17줄을 보면 해당 scope가 생성되는 함수 상단의 var에 모두 콤마(,)로 연결되어서 선언되고 있다는 점이다. 사실 어떻게 보면 이렇게 코딩하라는게 억지스럽기도 하고, 특히 이러한 변수 선언 방식은 호불호가 극명하게 갈리기 때문에 '반드시' 지킬 필요는 없다. 하지만 이렇게 권장하고 있는 이유가 몇가지가 있는데, 그 이유는 크게 아래와 같이 꼽을 수 있다.

• 초기화 실수 최소화
• 해당 scope에서 사용하는 변수에 대한 관리 용이
• minification의 최적화

; 각각이 무슨말을 뜻하는지 각각에 대해서 자세하게 살펴보면, 먼저 '초기화 실수를 최소화'하기 위하여 사용하는 것은, 상단에 모든 변수를 나열하고 필요한 변수들에 대하여 초기화 체크를 할 수 있다는 점이다. 이는 일단 변수를 정의했다면 null이나 0 등과 같은 기본값으로 설정을 해주고, 해당하는 변수가 생성되었는지 아닌지를 먼저 체크하는 것이 검증(validation) 로직을 수행하는데 있어서 조금 더 확실한 정보를 얻을 수 있기 때문이기도 하다. 따라서, 자바스크립트 개발자들 중에서는 'undefined'를 좋아하지 않는다는 사람들이 많기도 하다. 그 이유를 알기 위해 변수의 검증 과정 중 아래의 변수 선언 여부와 초기화 여부를 체크하는 소스를 보자.

console.log("선언을 안한 경우 검사: " + (typeof notExists === "undefined"));

var notInitialized;
console.log("초기화를 안한 경우 검사: " + (typeof notInitialized === "undefined"));

: 여기서 위의 2가지의 상황에서 검증을 하는 이유는 엄연히 다르지만, 비교를 하는 방법은 두 가지가 똑같이 적용이 가능하다. 따라서, 처음에 개발을 했던 사람은 현재 검증이 '선언을 했는지 여부'를 체크하는 건지, 아니면 '초기화를 안했는지 여부'를 체크하는 건지 알지만, 이후에 유지보수를 할 때 다른 개발자가 이 소스를 본다면 어떠한 검증 과정인지에 대한 소스 분석이 추가로 들어가야 한다. 이 때문에, 많은 자바스크립트 개발자들이 변수를 선언하고 검증을 해야하는 변수들은 기본값 null 등으로 초기화 시켜주고 notInitialized === null 등과 같이 체크하는 것을 선호하게 된 것이다. 이러한 초기화에 대한 관리를 위처럼 상단의 var 에 모아둔다면 이에 대한 휴먼에러는 극명하게 줄어들 것이기 때문에 하나의 var로 뭉치는 것을 선호하는 이유가 된 것이다.

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

: 사실 위의 특징들만 따지고 보면 그다지 사용할 이유가 없어보이는 것은 사실이다. 오히려 이렇게 위에 정리하는 것이 습관이 안 된 경우 개발시간을 늘려버리는 불편함이 생겨버리게 된다. 하지만, 자바스크립트 개발자라면 이를 습관화 들이면 좋은 핵심적인 이유가 하나 남아있는데, 바로 'minification에 유리'하다는 점이다. 이 점은 특히 다른 개발 언어에서는 이렇게 변수를 선언하는 것이 중요하지 않지만 '자바스크립트'에서 특별히 더 중요하게 적용되는 이유이다. Minification에 대해서 나중에 최적화에 대한 글을 쓸 때 쯤에 더 자세하게 다루겠지만, 이는 소스의 사이즈를 줄여서 사용자가 다운로드 받아야 하는 양을 최소화 시키는 프로세스이다. 간단하게 위에 있는 두 가지 변수 선언 방법에 대한 소스를 minify 한 것을 비교하면 아래와 같다. 먼저 위의 소스는 아래와 같이 변환되었다.

(function(){var e=["1st subject","2nd subject","3rd subject"];for(var t=0;t<3;t++){var n=document.getElementById("subject"+t);n.innerHTML=n.value=e[t];n.addEventListener("click",function(){alert(this.value+" pressed!")})}var r=new XMLHttpRequest;r.open("GET","http://unikys.tistory.com/list/");r.onload=function(){var e=JSON.parse(r.responseText);for(var t=0;t<3;t++){var n=document.getElementById("content"+t);n.innerHTML="contents"}};r.send()})()

: 그리고 var로 상단에 정리한 소스의 결과는 아래와 같다.

(function(){var e=["1st subject","2nd subject","3rd subject"],t,n,r=null;for(n=0;n<3;n++){t=document.getElementById("subject"+n);t.innerHTML=t.value=e[n];t.addEventListener("click",function(){alert(this.value+" pressed!")})}r=new XMLHttpRequest;r.open("GET","http://unikys.tistory.com/list/");r.onload=function(){var e=JSON.parse(r.responseText),t,n;for(t=0;t<3;t++){n=document.getElementById("content"+t);n.innerHTML="contents"}};r.send()})()

: 소스보기로 자바스크립트의 코드를 봐왔다면 이러한 식의 자바스크립트 코드를 왕왕 봐왔을 것이다. 이것은 자바스크립트 코드의 보안(암호화)를 위한 목적도 '아주 조금' 있지만, 더 큰 이유는 바로 이렇게 소스의 크기를 최대한 줄여서 사용자가 다운 받는 용량을 최소화하여 성능 최적화를 위한 것이다.

: 두 개의 결과는 직접적인 소스의 차이보다는 일단 minify 전과 minify 후의 용량을 비교해보면 그 효율의 차이가 있음을 알 수 있을 것이다. 아래의 표를 살펴보면, var로 정리하는 것이 minify 전에는 용량이 더 컸으나, minification을 적용한 후에는 미세하지만 더 작아진 것을 확인할 수 있다. 이것은 상단에 var를 정리하는 것이 minification의 효율을 더 끌어올릴 수 있다는 것을 뜻하기도 한다.

구분	Minify 전	Minify 후	Minify율
var 정리 안 함	712 bytes	448 bytes	37% 압축
var 상단에 정리	868 bytes	443 bytes	49% 압축

: 그리고 이렇게 var 변수로 상단에 정의하면 좋은 이유가 하나 더 있는데, 초기화와 관련해서 다음 편에 또 이렇게 변수를 관리하는 경우 편리한 점을 하나 더 설명할 것이다. 이 또한 성능과 관련하여 관리하기 편하게 할 수 있는 관점으로 볼 수 있을 것이다. 이렇게 성능을 고려한 몇 가지 이유들이 이러한 식으로 변수를 선언하는 것이 조금 더 유리하다는 것을 뜻한다.

: 이전에도 썼지만, 자바스크립트 개발자와 평범한 웹프로그래머의 차이는 이러한 미미한 것들부터 하나씩 차이가 나는 것이므로, 항상 습관을 들여서 사용하지는 않더라도, 머리 속에는 언제나 염두해주자. 이러한 minification에 대해서도 나중에 이야기 하겠지만, minification을 실시하고 있는 웹사이트들도 사실은 대형 사이트가 아니면 극히 드물다.

* 쉬어가기: 국내 3대 포털 자바스크립트 활용 비교

1. naver.com

: 사실 이 내용에 대해서 쓸 계획은 없었지만, minification에 대해서 쓰다보니 어느정도 사이트부터 이러한 최적화를 실행하고 있을까 궁금해서 국내 웹사이트의 방문자 순위 1위부터 'minification'여부에 대해서만 찾아봤는데, 아주 간단하지만 짧게 비교할 수 있을만한 내용들이 있고 이러한 실제적인 비교를 하다보니 재미있어서 잠깐 쉬어가는 내용으로 살펴보고 넘어가자. 일단 네이버의 스크립트 파일 중 하나의 화면 캡쳐이다.

: minification을 잘 적용하고 있는 모양이다. 하지만, 잘 보면 모든 함수와 변수들이 글로벌변수로 설정되어있는 것을 볼 수 있다. 페이지 소스 자체도 자바스크립트의 lazy load를 사용하고 있는 등 속도측면에서는 고려를 많이 하고 있지만, <script> 태그의 위치는 여기저기 산발되어있는 것이 다소 불만이다. 초기에 로드하는 스크립트는 최소화하기는 했지만, 소스보기를 보면 페이지 자체에 들어있는 소스가 워낙에 많다보니 초기 페이지 로딩이 다소 걸리는 것 또한 약간 아쉬운 점이다. 속도를 한번 측정은 1번 로드하고 새로고침 했을 때 나오는 시간을 측정하였는데, 완전한 페이지로드까지 517ms, 페이지가 실제적으로 보이는건 311ms, 그리고 86개의 request가 있음을 알 수 있다. 방대한 포털양에 비하면 성능 최적화에 신경을 많이 쓴 느낌이다.

2. daum.net

: 다음은 '다음'에서 어떠한 식으로 정리하고 있는지 한번 살펴보자.

: Minification도 잘 되어있고, 네이버와는 달리 글로벌 변수의 사용을 하지 않으려고 immediate function으로 변수와 함수들을 감싸준 것을 볼 수 있다. 페이지에서 로드하는 스크립트도 이 스크립트 하나 파일 하나로 <script> 태그의 위치 또한 페이지로드를 막는 위치가 아닌 <body>의 맨 마지막에 있다. 이러한 것들을 고민한 것을 보면 고급 자바스크립트 개발자가 있다는 것을 느낄 수 있다. 그럼 페이지 로드 속도도 확인해보자.

: 전부다 로드할때까지 424ms, 페이지가 보이기 시작하는 것은 289ms에 89개의 request를 사용하고 있다. 이러한 면을 봤을 때에는 확실히 다음이 네이버보다 성능적인 면에서 더 최적화를 잘 이루었다고 볼수도 있다. 하지만 소스를 보면 페이지 상단에 막대하게 들어있는 css와 아이디/클래스 규칙을 보면 자바스크립트 개발자는 뛰어났으나 다른 영역까지 그 영향력을 미쳤다면 조금더 최적화를 실행할 수 있지 않았을까 싶은 생각도 든다.

3. nate.com

: 마지막으로 네이트를 살펴보면 아래와 같은 스크립트를 쓰고 있다.

: 사실 이러한 스크립트가 국내 3대 포탈인 네이트에서 쓰이고 있다는 것에 정말 놀랐다. minification도 안 되어있고, 심지어 주석까지 상용 소스에 남겨두고 있다. 개발 버전에서의 주석은 사막의 오아시스처럼 달콤하지만, 자바스크립트의 상용버전에서는, VC에서 debug가 아닌 release로 컴파일해야 하듯이, 주석을 없애주는 것이 기본이다(minification을 하면 이것을 자동으로 해준다!). 게다가 글로벌변수도 그냥 사용하고 있다. 네이버같은 경우는 '로그'를 남기는 듯한 기능을 하고 있기에 글로별 변수의 사용이 불가피하다고 판단했을 수도 있지만, 네이트는 약간 경우가 다르다. 따라서, 이러한 경우는 웹에 대해 속깊게 알고 있지 못하는 사람이 만든 것이라고 생각할 수도 있다. 하지만, 다행히 우연하게 하나의 스크립트 파일만 봤는데, 이 스크립트 파일이 걸려서 그런 것이고 다른 자바스크립트 파일들은 minification을 잘하고 있다(정말 이런 우연이!). 하지만 자바스크립트 파일이 심각하게 여기저기 분산되어 페이지 로드를 막고 있고, 줄일 수 있는 request의 수가 엄청 많다. 그럼 일단 이 파일을 minification을 했을때와 안했을때의 용량 차이를 살펴보면 다음과 같다.

파일	현 용량	Minification 적용 후 용량
news_v20131001.js	24,263 bytes (23.6kb)	13,121 bytes(12.8kb)

: 해당 파일 하나를 줄였을 경우 10kb가 줄어든 것을 확인할 수 있다. 사실 사용자의 입장에서 10kb는 아주 미미할지도 모른다. 하지만 입장을 바꿔서 서비스를 제공하는 입장에서 한번 바라보자. 이전 자료를 보니 네이트의 페이지뷰가 500만건 정도 된다고 한다. 이 중 메인 페이지가 10% 정도라고 하면 메인페이지에 대한 페이지뷰가 50만건이라고 한다면, 네이트 사이트 자체에서 다운로드 트래픽을 계산하면, 50만x10kb=5gb로 네이트에서는 '자바스크립트 파일 하나를 minification 하지 않아 매일 5GB 정도의 트래픽을 낭비'하고 있는 것이다. 호스팅의 입장에서도 그렇고, 네이트를 방문하는 고객들의 10kb를 매번 더 소비시키고 있는 셈이기도 하다. 이만큼 대형 사이트가 되어버리면 이러한 작은 최적화 하나하나가 중요하게 적용되는 셈이다. 그렇다면 이렇게 프로그래밍 된 결과 어떠한 속도가 나오는지 살펴보자. 

: 페이지로드까지 589ms, 페이지가 보이기 시작하는건 478ms, 사용한 총 request수는 무려 151개나 된다. 네이버나 다음의 거의 2배가 되는 request를 사용하는 것이 최적화에는 많이 아쉬운 수치이다. 

: 그럼 아래에 표로 한번 정리해보자.

사이트	전송 용량	전체 로드 시간	DOM 로드 시간	Request 수
네이버	459kb	517ms	311ms	86번
다음	208kb	424ms	289ms	89번
네이트	115kb	589ms	478ms	151번

: 그래도 대형 포탈 사이트들 답게 페이지뷰가 뜨는 시간은 다 0.5초 이내로 맞춰져있는 것을 볼 수 있지만 서로 다른 방향으로 웹페이지를 조금 더 최적화할 수 있는 것을 확인할 수 있다. 각 페이지의 소스를 5분도 안 보고 이러한 개선사항들을 찾아냈으니 더 깊이 있게 보면 위의 사이트들이라 하더라도 더 빠르게 개선할 수 있을 가능성은 충분하다고 생각해본다면, 하물며 인재들이 즐비한 대형 포털 회사도 여러모로 개선이 가능한 상황인데, '내가 개발하는 웹사이트는 내가 책임을 진다'는 자세로, 늘 만족하지 말고 꾸준하게 공부하면 좋을 것이다. 지금 이렇게 각 사이트를 짧게 살펴본 것은 해당 사이트들의 문제점들을 지적하는 목적이라기 보다는, 아무리 많이 신경 써도 웹 개발은 의외로 알아야할 지식과 신경써야하는 부분이 많다는 것을 이야기하고 싶었다.

* 위에서 속도를 측정하는데에는 구글 크롬에 기본적으로 들어있는 개발자 도구 기능을 활용하였다.

* 글로벌 변수 최소화하기

: 그럼 이제 다시 변수 선언에 대한 내용으로 돌아와서, 글로벌 변수의 사용을 최소화할 수 있는 가장 많이 쓰이는 방법들을 살펴보자. 사실 이 내용은 다음 글에서 다루려고 했는데, 다음에 다룰 '성능을 고려한 변수 선언'의 내용이 좀 많은 내용을 다루게 될 것 같아서, 이번에 다루고 다음에는 성능에 대한 부분을 더 집중해서 다뤄보도록 하겠다. 일단 글로벌 변수의 사용을 최소화하는 방법은 크게 두 가지를 많이 사용한다. 먼저 두 가지 방법에 대해서 예를 살펴보고, 각각 어떠한 상황에서 사용하면 되는지 알아보자.

• Closure를 이용하는 방법
• Module/Namespace 패턴을 사용하는 방법

: 먼저 Closure를 이용하는 방법에 대한 예를 살펴보자.

(function () {
    var localVariable = "I'm not global. You can't fix me or access me outside";
}())

: 위의 예제 중에서도 이미 이러한 식으로 글로벌 변수가 아닌 식으로 사용하기도 했기 때문에 익숙할거라 생각한다. 그리고 무엇보다도 이전의 글 중에서 Closure에 대한 글의 내용에서도 이러한 immediate 함수에 대한 언급도 했기 때문에 익숙할 것이다. 이렇게 변수를 사용하게 되면, 글로벌 영역이 아닌 클로져 내부에 선언된 로컬 변수이기 때문에 외부에서 접근하거나 수정할 수 없게 된다. 

: 그리고 그 다음으로 Module/Namespace 패턴을 이용하는 방법이다. 이 방법은 옛날에 쓰다가만 자바스크립트 라이브러리에 관한 글을 읽어봤다면 이러한 내용을 기억할지도 모른다.

2012/10/11 - [자바스크립트 라이브러리 만들기] 3. 기본 지식 - 모듈과 네임스페이스

: 이글에 나와있는 예제를 조금 수정해서 가져와보면 아래와 같다.

var myModule = (function(){ 
    var localVariable = "내부에서 사용하는 변수";

    return {
        show: function () {
            alert(localVariable);
        }
    };
})();
myModule.show();

: 여기서 주의할 것이 바로 어찌되었든 myModule은 전역변수라는 것이다. 하지만 중요한 것은 '전역변수를 사용하지 말자'는 것이 아니라 '전역변수의 사용을 최소화' 시키는데 관점이 있는 것이다. JQuery의 라이브러리에서도 이러한 비슷한 방법을 사용하고 있는데, 내부에서 window 객체에 접근해서 자기를 정의하고 있다.

window.jQuery = window.$ = jQuery;

: 이부분은 바로 jquery에서 사용하는 $ 객체를 내부에서 설정한 jQuery라는 변수(모듈)로 설정하는 것이다. 또한 $과 jQuery의 두가지 글로벌 변수로 사용할 수 있도록 설정해주고 있다. 이러한 식으로 모듈 패턴을 사용하는 이유는 바로 '글로벌 영역(scope)와 인접하는 변수를 최소화' 시키고 글로벌 변수를 최소화함으로써 다른 라이브러리와의 충돌을 최소화하기 위해서 이렇게 하고 있는 것이다. 하지만 어찌되었든 글로별 영역에 있기 때문에 작은 확률이라도 충돌이 있을 수 있기 때문에 jquery에서는 이것도 조금 대처를 해주고 있기도 하다.

var /* 생략 */
    _$ = window.$,
    /*생략*/;

: jquery도 위의 변수 선언 방식대로 상단에 하나의 var로 묶어서 정의를 하고 있는데, 그 중에 보이는 변수 중 하나가, _$ = window.$로 설정하고 있는 부분이다. 기존의 window.$가 이미 정의되어있다면 이것을 _$에다가 백업해두고, 현재 jquery에 없는 함수가 호출된다면 이 _$를 이용해서 백업 받아두는 식으로 하고 있다. 웹이라는 환경을 정말 깊이있게 고려하고 작은 가능성도 배려해주려고 하는 코딩이 아주 인상적이고 이러한 점 역시 배우고 기억해두면 좋을 것이다.  

: 각각의 방식을 선택할 때에는 몇가지를 고려하면 되는데, 몇가지 대표적으로 꼽으면 아래와 같다.

• DOM에서 접근해서 사용해야한다 -> Module 방식
• 내부에 있는 값을 DOM에서 사용한다 -> Module 방식
  
• 다른 사람과 공유하는 공통 라이브러리로 사용하고 싶다 -> Module 방식
• 외부에서 접근할 일이 없다 -> Closure 방식
• 잘 모르겠다 -> Closure 방식

: 대충 이러한 기준으로 나누면 되고, 추가로 하나의 기준을 더 둔다면 아래와 같다.

• 이 데이터는 보안이 중요하다 -> 처음부터 자바스크립트로 가져오지 말 것

: Closure는 정상적인 방법으로 거의 모든 데이터의 접근을 막을 수 있지만, 어찌되었든 보안이 중요한 데이터는 서버에서 다 처리하는 것이 제일 좋다. 웹의 브라우져는 클라이언트 사이드에 100% 다 있기 때문에 자바스크립트를 사용하는 모든 데이터는 클라이언트의 손안에 있다고 보면 되기 때문에, 이러한 점은 나중에 논리 모델을 설계할 때 라던가 미리 고려를 하면 좋을 것이다.

* 정리

• 가능하면 var는 scope가 생성되는 상단에 하나로 몰아서 쓰자
• 자바스크립트 파일은 minification을 해서 사용하자
• 글로벌 변수 사용을 최소화하기 위하여 closure 또는 module을 사용하자

* 오늘 쓴 글은 조금은 쉽게 이해하고 많은 사람들이 알고 있을만한 내용이다. 하지만 이제 다음에 성능과 관련한 변수 선언과 사용 방법에 대하여 다루게 되면 오늘 다룬 내용보다 더 새롭고 재미있을 것이다. 다음 글에서는 선언 방법이 아닌 '사용 방법'에 대해 속깊은 부분과 실제적인 코딩 방법까지 살펴보자.

[속깊은 자바스크립트 강좌] 변수 선언 방법에 대하여 끝.

- 다음글

2016/11/13 - [속깊은 자바스크립트 강좌] 마무리(는 책으로!)