var, let, const 동작원리

💎 var, let, const

var, let, const는 자바스크립트에서 변수를 선언하는 키워드이다.

var는 함수 스코프, let과 const는 블록 스코프를 가진다.

var 키워드로 선언한 변수는 중복 선언이 가능하다.

 

 

자바스크립트에서 중요한 개념 중 하나인 호이스팅.

마치 코드가 최상단으로 끌어올려진 것처럼 동작한다는 정도로 이해하고 넘어갔던 개념이다.

console.log(result);
var result;

var 키워드로 선언한 변수의 실행 결과는 undefined 이다.

 

console.log(result);
let result;

let으로 선언할 경우 실행 결과는 레퍼런스 에러가 발생한다.

여기서 발생한 레퍼런스 에러는 result가 선언되지 않았다는 에러이다.

 

이러한 현상이 발생하는 이유는 자바스크립트가 선언문(변수, 함수, 클래스)을 런타임 이전에 먼저 실행하기 때문인데

한가지 의문이 드는 부분이 있을 수 있다.

 

var와 let 모두 같은 변수 선언문임에도 결과가 다른 이유는 무엇일까?

var 키워드는 선언과 초기화 단계가 동시에 진행되지만

let은 선언과 초기화 단계가 분리되어 진행된다.

 

따라서 var는 선언, 초기화가 동시에 진행되기 때문에 런타임 이전에 변수가 undefined로 암묵적 초기화가 되어 undefined가 출력된 것이고, let은 선언과 초기화 단계가 분리되어 진행되므로 선언은 호이스팅되었지만, 초기화는 이루어지지 않았기 때문에 서로 다른 결과가 나타난 것이다.

 

또, let은 var와 달리 TDZ(Temporal Dead Zone)가 존재하는데

변수 선언 이전에 참조했을 때 이 영역에 해당하므로 참조 에러가 발생하게 된다.

 

TDZ란, 

let이나 const로 선언된 변수는 선언된 코드 이전에 변수에 접근 하려고 하면 참조 에러를 발생하는 구간을 의미한다.

(let, const는 초기화 전에 읽거나 쓸 수 없다.)

 

var

var 키워드로 선언한 변수의 경우 런타임 이전에 변수가 선언되어 메모리에 올라간다.

또, 자바스크립트 엔진에 의해 undefined라는 값을 가진다.

다른 언어에서는 흔히 변수를 초기화하지 않았을 때 쓰레기 값을 가지게 되는데 자바스크립트에서는 undefined를 암묵적으로 할당하여 쓰레기 값을 갖지 않도록 하며 변수가 의도적으로 할당되지 않았음을 구분하는 용도로 사용된다.

var로 선언한 전역 변수의 경우 window 객체의 속성으로 추가된다. (let과 const는 전역 변수로 선언하더라도 window 객체의 속성으로 추가되지 않는다.)

 

const

const는 자바스크립트에서 '상수'를 나타낼 수 있는 키워드로

선언과 동시에 값을 반드시 할당해야 한다.

선언과 함께 값 할당이 이뤄지지 않으면 Missing initializer in const declaration 문법 에러가 발생한다.

 

ES6

let, const는 자바스크립트 ES6에 도입된 문법으로 변수의 일관성과 예측 가능성을 개선하기 위해 추가된 키워드이다.

 

정리

var	let	const
- 재선언, 재할당 가능 - 선언과 초기화가 동시에 이루어짐 (런타임 이전에 undefined를 암묵적으로 할당) - 전역 변수로 선언 시 window 객체의 속성으로 추가됨 - 함수 스코프를 가짐	- 같은 스코프 내 중복 선언 불가능 - 블록 스코프를 가짐 - 변수 선언은 호이스팅이 이루어지나, 초기화는 변수 선언문에 도달했을 때 발생 - TDZ 영역 존재	- 같은 스코프 내 재선언 및 재할당 불가능 - 선언과 초기화가 분리되어 있으므로 변수 선언은 호이스팅이 이루어지나, 초기화는 변수 선언문에 도달할 때 발생 - 선언과 할당이 동시에 이루어져야 함 - 블록 스코프를 가짐 - 상수 - TDZ 영역 존재

var, let, const는 모두 호이스팅이 발생한다.