더 이상 var를 사용하지 않는 이유

javascript를 ES5부터 사용해 온 사람이라면 변수를 선언할 때 습관적으로 var를 선언할 것이고 나도 그렇다.

ES6부터는 상수를 선언하는 키워드 const와 var를 대체하는 키워드 let이 등장하였고,

더 이상 var를 사용하지 말라고 권고한다.

그런데 왜일까?

이유는 단순하다

버그와 오류에 취약하기 때문에

 

이유만 가지고는 납득이 잘 안 갈 수 있어 흥미로운 예제를 소개한다.

function printMatrix(matrix){
	for(var i=0; i<matrix.length; i++){
    	var line = matrix[i];
        for(var i=0; i<line.length; i++){
        	var element = line[i];
            console.log(element);
        }
    }
}

var matrix = [
	[1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

printMatrix(matrix);

이 예제는 matrix라는 배열의 값이 출력되는 것을 기대하고 작성되었을 것이다.하지만 실행 결과는 예상과 전혀 다르다.

실행 결과

1
2
3

 

 

그렇다면 권고 사항대로 let과 const를 이용하여 작성하면 어떨까?

function printMatrix(matrix){
	for(let i=0; i<matrix.length; i++){
    	const line = matrix[i];
        for(let i=0; i<line.length; i++){
        	const element = line[i];
            console.log(element);
        }
    }
}

const matrix = [
	[1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

printMatrix(matrix);

실행결과

1
2
3
4
5
6
7
8
9

기대한 결과를 얻어낸 것을 알 수 있다.

var 키워드는 scope(해당 값을 사용할 수 있는 코드 영역)가 함수 단위이다.

let과 const는 scope가 함수 단위가 아닌 블록 단위({, })이기 때문에

중첩된 내부에 위치한 for문에서의 i와 바깥쪽 for문에서의 i가

다르게 식별되어서 원하는 결과를 얻을 수 있는 것이다.

 

그렇다면 위 예제 코드를 바벨(babel)을 통해 변환하면 어떤 코드가 나올까?

"use strict";

function printMatrix(matrix) {
	for (var i = 0; i < matrix.length; i++) {
    	var line = matrix[i];
        for (var _i = 0; _i < line.length; _i++) {
        	var element = line[_i];
            console.log(element);
        }
    }
}
var matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
printMatrix(matrix);

중첩된 내부의 for문의 i가 _i로 변환된 것을 알 수 있다.

 

함수 단위 스코프를 사용하는 var 키워드의 결점은 의도한 대로 코드가 작동하지 않을 수 있다는 것이다.

function test() {
	var voice = "hello";
    if(true) {
    	var voice = "bye";
        console.log(voice); // bye
    }
    console.log(voice); // bye
}
test();

if문 내부에서 새롭게 voice라는 변수를 선언하여 bye라는 값을 할당했음에도 불구하고

if문 바깥의 voice변수의 값이 함께 변경됨을 알 수 있다.

이 문제는 matrix 예제와 동일하게 let 키워드를 사용하여 개선할 수 있다.

 

 

 

결론

웬만하면 var 키워드를 사용하지 말자
호이스팅은 때론 독이 될 수 있다

 

matrix 예제 출처

https://medium.com/@codingsam/awesome-javascript-no-more-var-working-title-999428999994