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

JavaScript의 변수 선언 키워드 중 var과 ES6에서 추가된 let, const 3가지의 차이점을 공부해보자.

 

1. 재선언의 유무

var은 아래와 같이 같은 스코프안에서 재선언이 가능하다. 

var num = 10;
console.log(num); //10
var num = 20;
console.log(num); //20

let은 아래와 같이 같은 스코프 안에서 재선언이 불가능하다. const도 let과 마찬가지로 재선언이 불가하다.

let num = 10;
console.log(num); //10
let num = 20;
console.log(num); //Error: Identifier 'num' has already been declared

그렇다면  let과 const의 차이점은 무엇일까?

 

let의 경우 재할당이 가능하다.

let num = 10;
num = 20;
console.log(num); //20

const num2 = 30;
num2 = 40;
console.log(num); //Error: Assignment to constant variable.

 

const의 경우 상수로 취급되기 때문에 재할당이 불가하며 선언과 할당이 동시에 이루어져야 한다.

const num;
num = 10; //Error: Missing initializer in const declaration

 

2. Block-Level-Scope

let, const는 Block-Level-Scope를 가진다. 아래와 같이 block안에서만 유효한 값을 가질 수 있는 스코프이다.

let num = 10;
{
  let num = 20;
  console.log(num); //20
}
console.log(num); //10

첫 번째 let num은 전역 scope를 가지게 되고, 두 번째 let num은 { } 사이에서만 유효한 값이 되는 것이다.

 

var의 경우 아래와 같이 Block-Level-Scope이 아닌 Function Level Scope를 가지게 된다. 마지막 var num = 20으로 Function Level Scope을 가지게 되어 외부에서 접근을 할 수 있다. 

var num = 10;
{
  var num = 20;
  console.log(num); //20
}
console.log(20); //20

 

 

3. 호이스팅의 차이

자바스크립트 실행시 변수와 함수가 호이스팅을 수행하게 되는데, 소스코드의 최상단으로 끌어올려지는 것을 뜻합니다.

console.log(num); //undefined
var num = 10;

num을 출력했으나, error가 아닌 undefined가 출력이 됩니다. 이유는 자바스크립트 실행 시 var변수가 최상단에 선언되기 때문입니다.

 

아래와 같이 호이스팅이 이루어집니다.

var num;
console.log(num);
num = 10;

 

그렇다면 let의 경우에는 어떨까요?

console.log(num);
let num = 10; //Error: Cannot access 'num' before initialization

var과는 달리 error가 발생했습니다. 그 이유는 다음과 같습니다.

 

변수의 생성과정에는 선언 -> 초기화(undefined) -> 할당의 순서와 같이 3단계로 이루어집니다.

 

var의 경우 호이스팅시 선언과 초기화가 일어나지만, let의 경우 선언 단계만 이뤄집니다.

 

정리

1. var은 재선언이 가능하다. let과 const는 재선언이 불가능하다.

 

2. let은 재할당이 가능하지만, const는 상수화되어 재선언이 불가능하다.

 

3. var은 Function-Level-Scope를 가지며, let과 const는 Block-Level-Scope를 가진다.

 

4. 호이스팅 시 var은 선언과 초기화가 동시에 진행되지만, let은 선언 단계만 이뤄진다.

 

 

 

* 추후 호이스팅과 Scope에 대해서 공부해서 작성할 예정입니다.