[JS] var, let, const 비교

Junyeong Kim·2024년 1월 20일

개발

목록 보기

4/16

JS에는 변수를 선언하는 방법이 대표적으로 세가지가 있다.
원래는 var로 변수를 선언했지만, ES6 문법에서 var의 문제점을 보완하기 위해 let과 const가 등장하였다.

세가지 변수 선언 방법의 차이점을 중복 선언 허용, 스코프, 호이스팅의 관점에서 정리해보고,
var 사용을 왜 지양해야하는지에 대해서도 알아보자!

var 로 선언한 변수는 동일한 이름으로 여러 번 중복해서 선언이 가능하다. 이와 같은 경우, 마지막에 할당된 값이 변수에 저장되고, 특별한 에러가 없이 변수를 중복 선언할 수 있다.

var 와 다르게 let 은 해당 변수가 이미 선언되었다는 에러 메시지가 출력되어 중복 선언이 불가능하다.

const 는 constant(상수)를 뜻하기 때문에 한 번만 선언이 가능하며 값을 바꿀 수도 없다. 하지만 배열과 오브젝트의 값을 변경하는 것은 가능하다. 예를 들어

const arr = [1,2,3,4]; 
arr.push(5);

와 같은 코드는 에러가 발생하지 않는다. 왜냐하면 arr은 [1,2,3,4]라는 배열이 저장되어 있는 주소를 가리키고 있기 때문이다. push는 주소값을 바꾸는 것이 아닌, 거기에 저장되어 있는 배열을 바꾸는 것이므로 에러가 발생하지 않는다.

함수레벨 스코프, 함수 내부에 선언된 변수만 지역변수로 한정하며, 나머지는 모두 전역변수로 간주한다. 그래서 함수 안이 아닌 for, if와 같은 코드 블록 안에서 var를 지정했을때 해당 코드 블록 바깥에서도 사용될 수가 있다.

블록레벨 스코프, 함수 내부는 물론이며 if, for문 등의 코드 블록 { ... } 에서 선언된 변수도 지역변수로 취급한다.

변수가 선언되기 전에 참조되었음에도 에러가 발생하지 않는다. 이는 코드 실행 전에 자바스크립트 내부에서 미리 변수를 선언하고 undefined로 초기화를 해두었기 때문이다.

자바스크립트 내부에서는 코드 실행 전에는 변수 선언만 해두며, 초기화는 코드 실행 과정에서 변수 선언문을 만났을 때 수행한다. 그렇기 때문에 호이스팅이 발생하기는 하지만, 값을 참조할 수 없어서 호이스팅이 발생하지 않는 것처럼 보인다.

위에서 정리한 var의 특징들을 보면 var 사용을 지양해야 하는 이유를 알 수 있다.

var의 중복 선언은 필요할 때마다 변수를 유연하게 사용할 수 있다는 장점이 될 수도 있지만, 기존에 선언해둔 변수의 존재를 잊고 값을 재할당하는 등의 실수가 발생할 가능성이 커서 변수를 안전하게 보관하기 어렵다.
var는 함수레벨스코프이기 때문에 for이나 if문 등등..을 벗어나도 변수가 살아있다. 이 또한 코드가 복잡해질 수 있을 것 같다.
var의 호이스팅은 변수 선언 부분만 함수 최상단으로 올리기 때문에 코드의 복잡성이 야기된다. 이는 코드의 정확성과 가시성을 저하시킨다.