자바스크립트 변수 var, let, const 차이

자바스크립트 강의를 들으면서 궁금했던 점이 한가지 있었다. 나는 분명히 예전에 변수 선언을 var로 배웠는데 강의에서는 let을 사용한다는 거였다. 그래서 검색해보니 변수 선언에는 var, let, const 세가지를 사용할 수 있으며, 각각 차이점이 있었다. 이 포스팅에서는 그 차이점에 대해서 정리해두려고 한다.

 

 

var 

예전에는 자바스크립트의 변수 선언이 var로만 가능했었다. var로 변수 선언을 했을 때의 가장 큰 특징은 중복 선언이 가능하다는 점인 것 같다. 

 

var a = 100;
console.log(a) // 결과값 100

var a = 200;
console.log(a) // 결과값 200

var a = 300;
console.log(a) // 결과값 300

 

var를 사용하면 위와 같이 중복으로 같은 변수명을 계속 선언하고 값을 넣어도 에러가 나지 않는다. 첫번째와 두번째 넣은 100, 200은 초기화되고 가장 마지막에 넣은 300만 값으로 저장된다. 유연한 변수 선언이 가능하다고 하기엔 중복 선언의 위험이 더 크기 때문에 단점으로 여겨진다. ES6 이후에 이 문제를 보완하기 위해서 let과 const가 추가되었다. 

 

let 

변수명을 중복으로 선언하면 아래와 같이 에러가 발생한다. 하지만 값을 재할당 하는 것은 가능하다. 

 

let a = 100;
consolel.log(a) // 결과값 100

let a = 200;
console.log(a) // 에러 발생
// SyntaxError: Identifier 'a' has already been declared
// 중복 선언 불가 

a = 300;
consolel.log(a) // 결과값 300
// 값을 재할당 하는 것은 가능

 

const 

변수명을 중복으로 선언하면 let과 같이 에러가 발생한다. let과 다른 점은 값을 재할당 하는 것도 불가능하다는 점이다. 처음에 한 번 선언하고 나면 다른 값을 넣을 수 없기 때문에 보통 const는 상수를 선언하는 키워드로 사용된다.

 

const a = 100;
consolel.log(a) // 결과값 100

const a = 200;
console.log(a) // 에러 발생
// SyntaxError: Identifier 'a' has already been declared
// 중복 선언 불가

a = 300; // 에러 발생
// Assignment to constant variable.
// 값을 재할당 하는 것도 불가

 

이 외에 var는 함수 레벨 스코프, let과 const는 블록 레벨 스코프라고 하는데 아직 함수를 제대로 이해하지 못해서 이 부분은 추후에 다시 포스팅을 하도록 하겠다. 

 

다시 한 번 정리하자면 var는 중복 선언, 재할당이 모두 가능하고, let은 재할당만 가능, const는 모두 불가능하다. 헷갈리니 그냥 뭐 쓰면 되는지만 말해줘 - 하는 사람이 있다면... 값을 재할당할 필요가 있으면 let, 없으면 const 쓰면 된다. var는 요즘 거의 사용하지 않는 변수명이라고 하니 그냥 기억에서 지워버리도록 하자-_-!