var, let, const 차이점 알고 쓰자

Javascript에서 변수 선언 방식은 3가지가 존재한다.

var, let, const

각 방식의 특징을 알아보자.

 

1. 변수 선언 방식의 차이

var human = 'white'
console.log(human) // white

var human = 'black'
console.log(human) // black

위의 예시와 같이 이미 선언된 변수라도 다시 재선언 할 수 있다.

이러한 점이 "재선언하는게 왜 문제지?"라고 할 수 있다.

맞다. 몇줄 안되는 애플리케이션에서는 문제가 되지 않을 수 있다. 변수의 이름이 헤깔릴 일이 적기 때문.

그런데 애플리케이션이 커질수록 문제가 발생한다. 애플리케이션이 커지면 커질수록 변수 선언의 양이 자연스레 늘면서 어제 내가 어떤 이름의 변수를 선언했는지도 까먹게 된다. 그러면 위의 예시와 같이 이전에 선언한 변수에 다른 값이 선언되면서 의도치 않은 결과 값이 도출될 수 있다.

 

let human = 'white';
console.log(human); // white

let human = 'black';
console.log(human); // Uncaught SyntaxError: Identifier 'human' has already been declared

human = 'black';
console.log(human); // black

let는 변수 재선언이 불가능하다.

그러므로 변수 재선언으로 인한 불상사를 방지 할 수 있다.

let은 변수 재할당은 가능하다.

 

다음으로 const이다. const도 재선언이 불가능하다.

그럼 let과의 차이점은 무엇일까.

const는 재할당도 불가능하다. 이를 Immutable하다라고 표현하드라.

const human = 'white';
console.log(human); // white

const human = 'black';
console.log(human); // Uncaught SyntaxError: Identifier 'human' has already been declared

human = 'black';
console.log(human); // Uncaught TypeError: Assignment to constant variable.

정리
var     - 재선언 o, 재할당 o
let      - 재선언 x, 재할당 o
const  - 재선언 x, 재할당 x

 

 

2. 호이스팅(Hoisting)의 차이

호이스팅(Hoisting)이란, var 선언문이나 function 선언문 등을 해당 스코프의 선두 즉, 맨 위로 옮긴 것처럼 동작하는 특성을 말한다.

Javascript에서는 모든 선언(var, let, const, function, class)을 Hoising한다.

 

변수가 선언될 때 선언 단계 > 초기화 단계 > 할당 단계 에 걸쳐 생성되는데

var는 Hoisting되어 해당 스코프의 선두에서 선언 단계와  초기화 단계가 실행된다.

이와 달리, let은 Hoisting되어 선두에서 실행될때 선언 단계까지만 실행이 된다.

(할당 단계는 var, let 둘 다 할당이 되었을때 실행된다.)

console.log(foo); // undefined
var foo;

console.log(bar); // Error: Uncaught ReferenceError: bar is not defined
let bar;

있어보이는 말로 해당 스코프의 시작부터 선언까지 일시적 사각지대(Temporal Dead Zone; TDZ)에 있다고 한다.

 

3. 정리

1. 일반적으로 const를 사용하되 재할당이 필요한 경우에만 let을 사용한다.
2. 재할당이 필요 없는 상수와 객체에는 const를 사용한다.

 

참고

velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90