[ JavaScript ] var, let, const 파헤치기.

자바스크립트에서 변수를 선언할 때 사용하는 키워드는 var, let, const 이렇게 총 3가지가 존재한다.

 

 

 

 

 

1. var 

 

var 키워드는 ES6 이전( let, const가 나오기 이전 )에 변수를 선언할 때 사용하던 키워드였다.

var 키워드를 사용하여 변수를 선언하면 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 "선언"단계와 "초기화"단계를 거치게 된다. 선언 단계에서는 스코프에 변수 식별자를 등록해 자바스크립트 엔진에 변수의 존재를 알리고 그 즉시 초기화 단계에서 undefined로 변수를 초기화한다.

 

var 키워드는 변수 블록을 고려하지 않고, 현재 함수(var 키워드를 선언한 함수)또는 전역 스코프 어디에서나 접근할 수 있는 변수를 선언한다.

 

// 변수 a에 대해 선언.
var a;

 

선언과 초기화가 동시에 진행되어 참조 에러가 발생하지 않고 undefined가 반환된다.

 

이렇게 되면 변수 선언문 이전에 변수에 접근해도 스코프에 변수가 존재하기 때문에 에러가 발생하지 않고 undefined를 반환한다. 이후에 변수 할당문을 통해 값이 할당된다.

 

 

// 변수 a에 1을 할당.
a = 1;

// var 키워드는 재선언도 가능하다.
var a = '하나';

 

var 키워드는 재할당뿐만 아니라, 위와같이 재선언도 가능하다.

 

 

 

 

 

👉 var 키워드는 자바스크립트 엔진에 의해 선언과 동시에 암묵적으로 undefined로 초기화 되며, 변수의 재선언 및 재할당이 가능하다.

 

 

 

 

 

 

2. let

 

let 키워드로 선언한 변수는 "선언"단계와 "초기화" 단계가 나누어져서 진행된다.

런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 선언 단계가 먼저 실행되지만 초기화 단계는 변수 선언문에 도달했을 때 실행되기 때문에, 초기화 단계 이전에 변수에 접근하려고 하면 var 키워드 같이 undefined 가 반환되는 것이 아니라 참조 에러(Refference Error)가 발생한다.

 

초기화 단계 이전에 변수에 접근을 시도하여 참조 에러가 발생했다.

let 키워드로 선언한 변수는 var 키워드와는 다르게 블록 레벨 스코프를 가진다. 

 

 

 

 

 

 

 

3. const

 

const 키워드는 '상수(constant)' 선언을 위해 주로 사용한다. const 키워드는 let 키워드와 비슷하지만 다른 점들이 몇가 지있다. 우선 const 키워드는 선언과 동시에 초기화를 해야하고, 그렇지 않으면 아래와 같은 문법 에러가 발생한다.

 

 

const 키워드는 let 키워드처럼 블록 레벨 스코프를 가지지만 let 키워드와는 다르게 변수의 재선언뿐만 아니라, 재할당 또한 불가능 하다.

 

하지만 재할당 없이 값을 변경할 수 있는 객체의 특성상 const 키워드로 선언된 변수에 객체 값이 할당 된 경우에는 값을 변경할 수 있다.

 

 

 

 

 

 

 

 

 

 

참고자료 )

모던 자바스크립트 DEEP DIVE - 이웅모 / 위키북스

var - MDN

let - MDN

const - MDN