javascript 변수, 함수, 연산자 - 변수선언

 

자바스크립트 프로그램은 함수에서 모든 것이 처리됩니다. 함수는 비트를 옮기고 연산을 수행하기 위해 변수와 연산자를 사용합니다. 이러한 이유로 코드의 가독성을 높이고 복잡도를 낮추려면 기본 포맷을 정한 후 변수, 함ㅅ, 연산자 사용법을 정해야 합니다.

 

이번 포스팅에서는 변수 선언에 대해서 알아보겠습니다.

1. 변수선언

변수는 var 문을 이용하여 선언합니다. 자바스크립트에서 var는 스크립트 어느 곳에나 올 수 있고 또 여러번 사용할 수 있습니다. 모든 변수 선언은 변수가 선언된 위치와 상관없이 함수의 최상단으로 끌어올려 집니다. 이 때문에 개발자들이 코드를 잘못 이해하는 일이 종종 벌어집니다.

변수 선언이 함수 최상단으로 끌어올려 지는 것을 호이스트(hoist)라고 합니다.

function doSomething() {
    var resutl = 10 + value;
    var value = 10;
    return result;
}

앞의 코드에서 변수 value는 선언되기 전에 먼저 사용되고 있습니다. result 변수에는 특별한 값이 NaN이 할당되어 있지만, 앞의 코드는 자바스크립트에서 유효한 문장입니다. 왜 그런지 이해하려면 자바스크립트 엔진이 이 코드를 어떻게 변경하는지에 대해 먼저 알아야 합니다.

 

function doSomething() {
    var result;
    var value;
    
    result = 10 + value;
    value = 10;
    
    return result;
}

예제에서 선언된 두개의 var 문은 함수의 최상단으로 끌어올려 지고 초기화는 변수 선언 이후에 수행됩니다.

6번째 줄이 실행 될 때 변수 value는 특별한 값이 undefined를 갖기 때문에 결과가 Nan(Not a Number)이 됩니다. 그다음 줄에 변수 value에는 10이 할당됩니다.

 

많은 개발자가 for 문에서도 변수 선언이 함수 최상단으로 끌어올려 진다는 사실을 잘 인지하지 못합니다.

 

function doSomethingWithItems(items) {
    for(var i=0, len=items.length; i<len; i++) {
        doSomething(items[i]);
    }
}

ECMAScript5까지는 자바스크리븥에 블록 단위 변수 선언이라는 개념이 없었습니다. 따라서 위 코드는 다음 코드와 같습니다.

function doSomethingWithItems(item) {
	var i, len;
    
    for(i=0; len=itmes.length; i<len; i++) {
    	doSomething(items[i]);
    }
}

변수 선언을 하면 함수 최상단으로 변수가 끌어올려 지므로 어디에 선언하는지에 관계 없이 최상단에 변수를 선언하는 것과 같습니다. 이런 이유로 자바스크립트에서는 변수를 함수 이곳 저곳에 선언하지 않고 최상단에서 한꺼번에 선언하는 스타일을 가장 많이 씁니다. 간단히 말해 자바스크립트 엔진이 해석하는 방식대로 코드를 작성해야 합니다.

 

개인적으로도, 모든 지역 변수를 함수의 첫번째 문장에 선언하는 스타일을 추천합니다. 이 방법은 크락포드 코드 번켄션, SproutCore 스타일 가이드, Dojo 스타일 가이드에서도 권장하고 있습니다.

function doSomethingWithItems(item) {
    var i, len;
    var value = 10;
    val result = value + 10;
    
    for(i=0; len=itmes.length; i<len; i++) {
    	doSomething(items[i]);
    }
}

크락포드는 다음 예제처럼 함수 산단에 하나의 var문만 사용하는 것을 권장합니다.

function doSomethingWithItems(item) {
	var i, len;
        value = 10,
        result = value + 10;
    
    for(i=0; len=itmes.length; i<len; i++) {
    	doSomething(items[i]);
    }
}

Dojo 스타일 가이드는 서로 관련이 있는 변수끼리만 하나의 var 문으로 선언하도록 정해놓고 있습니다.

개인적으로는 다음 예제처럼 하나의 var 문으로 모든 변수를 선언하고 변수는 한 줄당 하나만 선언하는 스타일을 선호합니다. 그리고 할당 연산자는 열을 맞춥니다. 초기화하지 않을 변수는 변수 선언문 마지막에 선언합니다.

function doSomethingWithItems(item) {
	var value    = 10;
        result   = value + 10,
        i,
        len;
    
    for(i=0; len=itmes.length; i<len; i++) {
    	doSomething(items[i]);
    }
}

하나의 var 문을 사용함으로써 코드의 양을 줄일 수 있고 사용자는 그만큼 더 빨리 코드를 내려 받을 수 있는 장점이 있어 이 방법을 권장합니다.

 

읽기 좋은 자바스크립트 코딩 기법 쳅처 4, 참고한 내용입니다.

그럼 이만.

끝.