[Javascript] var, let, const의 차이점

1. 개요

Javascript에서 변수를 선언할 때 var, let, const세 가지 방법이 있다.

이번엔 이 세 가지 방법의 차이점이 무엇인지 알아보자!

 

2. 재선언

var는 동일한 변수명으로 재선언이 가능하다.

동일한 변수명으로 재선언시 값은 재할당된다.

var a = 1;
console.log(a);	// 1

var a = 2;
console.log(a);	// 2

 

let, const는 재선언시 오류가 발생한다.

let a = 1;
let a = 2;	// ERROR

const b = 1;
const b = 2;	// ERROR

 

3. 재할당

var, let은 재할당이 가능하다.

var a = 1;
a = 2;
console.log(a);	// 2

let b = 1;
b = 2
console.log(b);	// 2

const는 단어 그대로 "상수"이므로 재할당이 불가능하다.

파이(𝝿)같은 불변값을 정의할 때 사용할 수 있다.

const a = 1;
a = 2;	// ERROR

 

4. 스코프

var는 함수 레벨 스코프(function-level scope)이다.

동일한 함수 안이라면 선언된 값은 어디서든 사용 가능하다.

아래 코드에서 변수 a는 if문 안에서 선언되었지만 if블록 밖에서도 사용할 수 있다.

function func() {
  if (1) {
    var a = 1;
    console.log(a);	// 1
  }

  console.log(a);	// 1
}

func();

 

let, const는 블록 스코프(block-level scope)이다.

같은 블록 안에서만 사용이 가능하다.

function func() {
  if (1) {
    let a = 1;
    console.log(a); // 1
  }

  console.log(a); // ERROR
}

func();

function func() {
  if (1) {
    const a = 1;
    console.log(a); // 1
  }

  console.log(a); // ERROR
}

func();

 

5. 호이스팅

Lexical Environment에 초기화될 때 var는 undefined로 초기화된다.
let, const는 초기화되지 않고 Temporal Dead Zone(TDZ)에 위치한다.

호이스팅과 관련된 내용, var, let, const의 더 자세한 차이점은 이전 글에 작성되어 있으니 이 글을 참고하면 좋을것 같다.
https://w-storage.tistory.com/72

[Javascript] 호이스팅(Hoisting)은 어떻게 동작하는걸까?