[ 번역 ] javascript tip

원문 : http://qiita.com/KENJU/items/c7fad62a12cc2809b507

번역하면서 느낀점은 그냥 있는 그대로 한국어로 옮기는 것이 아니라 한글에 맞게, 의미가 통하도록 번역하는게 중요한거 같습니다.

항상 느끼는거지만 외국문서는 그냥 읽는 것도 중요하지만 이런식으로 한국어로 번역하다보면 놓치기 쉬운 부분들을 인식하게 해 주는 거 같습니다.

Basic TIPS

javascript 에서는 [ 글로벌 오염 ]이라는 말이 있을 정도로, 글로벌 변수에의한 namespace의 오염이 문제가 되는 일이 있습니다.
글로벌 변수나 scope를 애초에 모르는 경우 또는 언어적으로 알맞는 문법은 사용하고 있지만, 글로벌 변수를 많이 사용하는 것에대한 결함을 이해하지 못한 경우가 있습니다.

글로벌 오염의 악영향

글로벌 공간을 별다른 의미도 없는 변수선언으로 오염시키고 있는 것

• 서드파티 플러그인을 사용할 시 발생하는 변수의 충돌
• 팀 멤버가 작성한 코드에서의 변수명 충돌
• 오래전 자신이 작성한 코드에서 사용한 변수와의 충돌
  

가 발생할 경우가 있습니다. 따라서 아래의 방법을 사용하여 글로벌 변수를 사용하지 않는쪽으로 궁리할 필요가 있습니다.

대책 : var 를 잊지 않는다.

function speakOut(){
  // global variable
  global = "Hello from global";
 
  // local variable
  var local = "Hello from local";
 
  console.log(global);
  console.log(local);
}
 
speakOut();
 
console.log(global);
console.log(local); // 이 부분만 에러가 

대책 : namespace를 사용한다

// object for name space
var myApp = {};
 
myApp.name = "My First JavaScript App";

대책 : closure를 사용한다

(function(){
  // var를 사용하지 않으면 글로벌 변수
  maybe_global = "Hello from global?"; 
  var local = "Hello from local";
 
})();
 
console.log(maybe_global);
console.log(local);

베스트 practice : 독자 var 패턴

아래와 같이 반드시 함수의 앞머리에 var를 작성함으로써, 실수로 로컬 변수인데 var를 까먹는 행위를 방지하는 것이 가능합니다.

• 습관적으로 로컬 변수에 var를 까먹는 것을 방지할 수 있다.
• 로컬 변수나, 함수 자체의 전체적인 가독성이 상승한다.
• 코드의 양을 줄일 수 있다.
  

function login(){
    var userId,
        userPasswd,
        date,
        sessionId,
        errorMessage = [],
        status = {};
 
    ...
 
}
 

for loop 를 최적화 한다.

일반적인 for loop는 아래와 같습니다.

for ( var i = 0; i < myarray.length; i++){
    console.log(i);
}
 

Nicholas Zakas가 작성한 [ Performance Javascript ]에 따르면, 배열이나 배열과 유사한 오브젝트에 대하여 for loop를 처리하는 경우 아래와 같이 배열의 길이를 변수에 캐시화 시키는 방법을 소개하고 있습니다.
이것으로 인해 매번 배열의 길이를 취득할 필요가 없어집니다.

위 서적에 의하면 safari3 에선 2배, IE7 에선 190배 의 차이가 나는것, 개인적으로 개발을 진행해온 소규모 서비스에서 이 차이를 심하게 느낄수 있는 경우는 거의 없었지만, 이런 TIP이 있다는 것을 알아둔다면, 대규모 서비스 개발을 할 때 무언가 도움이 될 것입니다.

for ( var i = 0, len = myarray.length; i < len; i++){
    console.log(i);
}
 

또한, loop 내에서 DOM요소를 추가, 삭제 하는 것과 같이 DOM에 변화가 발생하는 경우에는 var 문을 밖으로 빼서 선언해두면 좋습니다.

function myFunc(){
 
    var i = 0,
        len,
        myarray = [];
 
    //...
 
    for ( i = 0, len = myarray.length; i < len; i++){
        // ...
    }
 
}

for문을 좀더 빠르게 최적화 하고싶을때

여기서부터는 조금 심화된 이야기일 수도 있습니다만, 경연이나, 빠른 속도가 요구되는 네트워킹과 과련된 코딩을 할 경우에는 알아둔다면 좋을지도 모릅니다.

아래와 같이 변수의 수를 줄여, 카운트업 방식에서부터 카운트 다운 방식으로 바꿈으로써 고속화를 노릴수 있습니다. 단지, 이것은 어느 언어에서도 말하는 것 입니다만,
너무 고속에만 치우쳐 버린다면 코드의 가독성을 떨어 뜨리기 때문에, 제작자가 요구하고 있는 것을 생각해 가면서 trade off 로 사용한다면 좋다고 생각합니다.

var i, 
    myarray = [];
 
for ( i = myarray.length; i--;){
    //...
}

암묵적인 형 변환을 피한다.

우선 질문입니다만, 아래의 조건식의 차이가 설명할 수 있습니까?
또, 어느쪽이 실행되고, 어느쪽이 실행안될지 파악 됩니까??

var zero = 0;
 
// pattern A
 
if(zero === false){
    // ...
}
 
// pattern B
 
if(zero == false){
    // ...
}
 

=== 와 == 는 다릅니다.
물론 !== 와 != 도 다릅니다.

javascript에서는 변수를 비교할경우 암묵적으로 형변환이 이루어 집니다.
===나 !== 에선 비교할 때에 값과 값의 데이터 타입까지 체크 합니다만,
== 나 != 에서는 값만을 체크합니다.

따라서 방금전의 예어서는 pattern B 가 실행됩니다.
 
변수를 비교할 때에는 ===나, !== 를 사용합시다.