var 키워드는 사용하지 말자

ECMAScript 6 이 전에 혹은 지금까지도 계속 var 키워드를 사용한다면

이제는 사용을 권장하고 싶지가 않다.

 

오늘도 공부하면서 느낀 점을 기록해본다.

var 키워드는 변수를 선언할 때 사용하는 키워드로 자바스크립트에서 꾸준히 사용해 왔다. 

 

변수를 코딩하면 자연스레 습관적으로 var 키워드를 사용해왔는데 이젠 let, const를 사용해야 하지 않나 싶다.

var를 사용하면 안 되는 이유

 

1. ex)

// var 키워드 사용시
var name = '열공';
var name = '열공모드';

console.log(name); // 열공모드



// let, const 키워드 사용시
//1번 예시 (const 키워드도 동일)
var name = '열공';
let name = '열공모드'; // "SyntaxError: Identifier 'name' has already been declared


//2번 예시 (const 키워드도 동일)
let name = '열공';
let name = '열공모드'; // "SyntaxError: Identifier 'name' has already been declared

위 소스 를 보자 var 키워드로 같은 이름의 변수로 선언했다.

console.log를 찍어보면 '열공모드'라는 글자가 출력이 될 것이다. 

 

var 키워드를 습관적으로 사용했던 사람이라면 저거 당연한 거 아냐?

라고 생각할 수 있다. 

 

var라는 키워드가 다시 사용되어 name이라는 변수를 다시 선언된 후에

'열공모드'라는 값으로 초기화가 되었기 때문에 큰 문제가 아니다고 생각이 들 수 있다.

 

하지만 이러한 문제는 짧은 코드 즉,

한 눈에 식별이 가능하고 간단한 코드에선 크게 상관 안 하겠지만

내가 실질적으로 개발을 하면서 코드가 길어진다 생각하면 실수를 저지를 수 있다.

 

1~ 1000줄 이상 되는 코드를 개발한다 생각하면 여러 개의 변수를 사용하면서 실수가 나오게 된다. 

코드가 길어지면 내가 이 변수를 선언했던 적이 있었나?

 

하면서 같은 이름으로 변수를 선언해서 사용하는 실수가 나온다.

그럼 나중에 전체 코드를 살펴봐야 하는 지옥 같은 경험을 하게 된다....

 

하지만 let, const 키워드를 사용하면 그러한 걱정이 필요 없다.

중복 이름의 변수를 선언하게 되면 위 코드에 보는 바와 같이 에러 메시지와 함께 자바스크립트 에러를 발생한다.

그러므로 더욱더 안전한 코딩을 하게 될 수 있다.

 

 

2. ex)

var funcs = [],
    aTest = [];

for(var i = 0; i < 10; i++){ // for문에서 사용된 var 키워드가 문제
    funcs.push(function(){ // for문이라는 루프 속에서 함수가 사용이 되면
        aTest.push(i); // 현재 i는 for문이 0 ~ 9까지 다 순환 할 때 까지의 i 값을 공유
    });
}

funcs.forEach(function(af){
    af();
});

aTest.forEach((val, index) => {
    console.log(`배열 ${index} 의 인덱스 값은 ${val} 이다`);
});

// 콘솔로그 실행 결과
"배열 0 의 인덱스 값은 10 이다"
"배열 1 의 인덱스 값은 10 이다"
"배열 2 의 인덱스 값은 10 이다"
"배열 3 의 인덱스 값은 10 이다"
"배열 4 의 인덱스 값은 10 이다"
"배열 5 의 인덱스 값은 10 이다"
"배열 6 의 인덱스 값은 10 이다"
"배열 7 의 인덱스 값은 10 이다"
"배열 8 의 인덱스 값은 10 이다"
"배열 9 의 인덱스 값은 10 이다"

 

 

내가 var 키워드를 또 안 쓰는 이유 중 하나이다.

 

루프 문 속에 함수를 실행하는 코드를 작성할 때 기이한 현상이 일어난다... 자 한 번 봐보자.

위 코드에 저 결과를 보면 각 인덱스에 숫자가 0부터 9까지 차례대로 들어갈 것으로 예상하겠지만 아니다.

10이란 값이 다 들어가 있다. 이상하지 않은가? 그 이유는 for 문에서 사용하는 var 키워드 때문이다.

 

루프의 각 반복에서 i가 공유되기 때문에 루프 내부에서 생성된 함수는

모두 동일한 변수에 대한 참조를 가지고 있어서 

 

변수 i는 루프가 완료될 때 10의 값을 가지므로

console.log(i)가 호출될 때마다 10 값이 출력된다.

 

// for문에 var 키워드를 let 으로 바꾼 후 실행 하면
var funcs = [],
    aTest = [];

for(let i = 0; i < 10; i++){
    funcs.push(function(){
        aTest.push(i);
    });
}

funcs.forEach(function(af){
    af();
});

aTest.forEach((val, index) => {
    console.log(`배열 ${index} 의 인덱스 값은 ${val} 이다`);
});


// 실행 결과
"배열 0 의 인덱스 값은 0 이다"
"배열 1 의 인덱스 값은 1 이다"
"배열 2 의 인덱스 값은 2 이다"
"배열 3 의 인덱스 값은 3 이다"
"배열 4 의 인덱스 값은 4 이다"
"배열 5 의 인덱스 값은 5 이다"
"배열 6 의 인덱스 값은 6 이다"
"배열 7 의 인덱스 값은 7 이다"
"배열 8 의 인덱스 값은 8 이다"
"배열 9 의 인덱스 값은 9 이다"

 

위처럼 var 키워드를 let으로 바꾸면 내가 생각했던 대로 순서대로 값이 출력이 된다.

그 이유는 let 키워드는 for문의 시작하는 부분의 블록 '{' 이것과 끝나는 부분의 블록 '}'의 순회를 할 때마다

 

for문은 새 변수를 만들고 이전 반복과 동일한 이름을 가진 변수 값으로 초기화한다.

이 것처럼 var 키워드를 쓰지말고 let 키워드나 혹은 const 키워드를 적극 사용하자!! var는 사용 금지!!!