[JavaScript] var vs. let vs. const - (1)

웹 개발 취준생이라면 면접 질문을 준비하면서 무조건 접해보았을 준비 대목인 "var vs. let vs. const"에 대해 정리하고자 한다.

 

let과 const는 ES6부터 제공된 업데이트 항목이며, 그 이전에는 var를 사용하여 변수를 선언하였다. 하지만, var의 아주 고질적인 문제가 있었기에 ES6 이후에는 var 사용을 지양하고 let과 const로만 변수를 선언할 것을 권고하고 있다(초보자에게 가장 좋은 방법은 const로 변수를 선언하고 재할당이 이루어지는 변수에 대해서만 let을 사용하는 것이 좋다.). 그렇다면 var에는 어떠한 문제가 있었던 것일까?

[ var의 문제점 - 1 ] 변수 중복 선언 허용

var로 변수 선언을 하게 되면 변수의 중복 선언이 가능해진다. 따라서 다음과 같은 변수의 중복 선언의 문제가 발생하게 된다.

var x = 10;
console.log(x); // 10

var x = 20;
console.log(x); // 20

x는 이미 선언된 변수이기 때문에 또 다시 선언이 되면 안된다. 하지만 var는 동일 스코프 내에서의 중복 선언을 허용해준다. 이는 의도치 않게 선언한 변수의 값이 변경되는 부작용을 발생시킨다.

[ var의 문제점 - 2 ] 함수 레벨 스코프

var 키워드로 선언한 변수는 오로지 함수 코드 블록만을 지역 스코프로 인지한다.

var i = 100;

for (let i = 0; i < 4; i++){
    console.log(i); // 0 1 2 3
}

console.log(i); // 4

따라서 for문에서 선언한 i도 전역변수가 되어 중복 선언 허용이 되었음을 확인할 수 있다.

반대로, 함수 레벨에서는 지역 변수로 동작하게 된다.

function varX() {
    var x = 20;
    console.log(x); // 20
}

console.log(x); // Uncaught ReferenceError: x is not defined
varX(); // 20

[ var의 문제점 - 3 ] 변수 호이스팅

var로 변수를 선언하면 변수가 마치 최상단에 선언된 것과 같이 호이스팅되어 동작한다(선언만 되었기 때문에 출력 결과는 undefined가 된다).

console.log(x); // undefined

var x = 20;

console.log(x); // 20

 

위에서 언급한 문제를 요약하면 다음과 같다.

 

var 키워드로 변수를 선언하는 것은 3가지 문제점을 가지고 있다.

 

1. 변수의 중복 선언 허용

- 동일 스코프 내에서 변수 중복 선언을 허용하기 때문에 변수이름이 동일한 경우에 대해 의도치 않게 할당된 값이 변경될 수 있다.

- 또한 이에 대한 에러를 발생시키지 않는다.

2. 함수 레벨 스코프

- 함수 블록 안에 있는 변수선언만 지역변수로 인지하기 때문에 다양한 표현문(if문, while문, for문, 등)에 대해서 변수의 중복 선언이 허용되는 문제가 있다.

- 또한 함수 레벨 스코프가 이닌 모든 변수 선언에 대해 전역변수로 인지하기 때문에 불필요하게 전역변수(전역 객체와 생명주기가 같다)를 생성시킨다는 문제가 있다.

3. 변수 호이스팅

- 변수가 선언된 시점에 선언되는 것이 아니기 때문에 가독성을 헤치게 된다.

 

이러한 var의 문제점을 해결하기 위해 ES6부터 등장한 let과 const에 대해 2편에서 자세히 살펴보기로 하자.

 

[ 참고 자료 ]

모던 자바스크립트 딥다이브 (이웅모 저) / 15장 let, const 키워드와 블록 레벨 스코프 -  pp. 208 - 210 

https://ko.javascript.info/variables

변수와 상수