🔝 호이스팅

지난 포스팅에서 변수에 대해 간략히 알아보았다.
이번 포스팅에서는 변수 사용법을 알아보겠다.
선언과 할당은 어떻게 이루어지고 각 선언자에 따라 어떤 특징이 있는지! 🚗 💨 💨

📌 변수 선언과 할당

변수란 메모리 주소의 식별자로써, 메모리 주소와 매핑 관계를 맺고 있다. 즉, 변수는 값이 아니라 메모리 주소를 기억하고 있다는 의미이다.
변수는 선언 - 초기화 - 할당 의 과정을 거친다.

선언이란?

변수가 기억하는 메모리 주소의 공간을 확보하고, 변수명과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것이다.
말이 어려운데, 쉽게 말하면 할당된 메모리 셀에 값을 저장하기 위한 준비단계이다.
즉, 해당 셀에 저장한 값이 없고 이는 할당되지 않은 상태임을 의미한다.

초기화란?

변수가 선언된 이후 최초로 값을 할당한 것이다. 선언자에 따라 초기화가 암묵적으로 이뤄질수도, 이뤄지지 않을 수도 있다. 밑에서 자세히 살펴보자.

할당이란?

선언 및 초기화를 거친 메모리 셀에 값을 저장하는 것이다.

var score=80;

위처럼 선언과 할당을 하나의 문으로 단축해서 표현할 수 있다.
주의할 점은 선언과 할당이 동시에 실행되는 것은 아니라는 것이다.
변수 선언은 런타임 이전에 먼저 실행되고 할당은 런타임에 실행되기 때문이다.
이는 호이스팅과 연관이 깊으므로 역시 밑에서 자세히 다루도록 하겠다.

만약 재할당이 이뤄진다면?

var x=10; //변수 선언과 값 할당
x=30; //값 재할당

어렵게 생각할 것 없이 변수가 다른 메모리 주소를 확보하고 셀 안에 값을 저장한다.
즉, 새로운 메모리 공간을 확보해 새롭게 할당할 값을 저장하는 것이다.
원래 메모리 셀에 저장되어 있던 값들은 가비지 콜렉터에 의해 메모리에서 자동 해제된다.

변수의 선언-초기화-할당-(재할당) 을 알아보았다.
몇가지 의문점이 생겼을 것이다.
예컨데, 선언자에 따라 초기화 default value가 다르다는 점, 선언과 할당을 하나의 문으로 작성했음에도 동시에 일어나지 않는다는 점이 그럴 것이다.
그 이유를 알아보자 🚗💨💨

📌 호이스팅

호이스팅이란 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징이다.

console.log(v); // undefined
var v = 5;
console.log(v); // 5

위의 코드에서 특이점이 오지 않는가? 변수 v가 var로 선언되기도 전에 콘솔이 원시값 undefined로 출력된다.
이것이 바로 자바스크립트의 호이스팅이다.
선언문만 코드의 최상단으로 끌어올리는 것이다.
자바스크립트 엔진의 관점에서 본 코드는 다음과 같다.

var v; // 최상단에서 선언
console.log(v); // undefined
v = 5; //할당문은 기존 위치
console.log(v); // 5

첫번째 콘솔에 주목해보자.
값을 할당하지 않았는데 undefined라는 원시값이 출력되는 것을 확인할 수 있다.
이는 var로 선언한 변수 v가 undefined로 초기화되었음을 시사한다.
다른 선언자로 선언한 변수에서도 동일한 현상이 발생할까?

console.log(l); // ReferenceError: l is not defined
let l = 5;
console.log(l); // 5

console.log(c); // ReferenceError: c is not defined
const c = 5;
console.log(c); // 5

var로 선언한 변수와 달리 let, const로 선언한 변수들은 값이 할당되기 전에는 Reference Error가 발생한다.
에러가 발생했으므로 let,const는 호이스팅이 되지 않는다는 뜻일까? 😯

호이스팅은 var, let, const, function, class 와 같은 키워드를 사용한 모든 식별자에서 발생한다.
모든 선언문은 런타임 이전 단계에서 먼저 실행되기 때문이다.
그렇다면 let, const로 선언한 변수들에서는 왜 에러가 발생할까?
이에 대한 답은 에러 메세지에서 찾을 수 있다.

Reference Error 즉, 참조 에러는 자바스크립트 엔진이 변수 l, c의 메모리 주소값을 찾지 못했음을 의미한다.
자바스크립트에서는 이를 TDZ 상태에 빠졌다고 한다.

📌 TDZ(Temporary Dead Zone)

TDZ란 자바스크립트 엔진에 의해 변수가 메모리 공간과 매핑은 되지만 초기화되지 않아 접근할 수 없는 상태이다. 정확히는 참조할 수 없는 상황이다.

var과 let,const의 차이를 여기서 발견할 수 있다.
var은 선언과 초기화가 동시에 발생해 값을 할당하기 전에도 undefined로 초기화되어있지만
let, const는 선언과 초기화가 분리되어 진행되기 때문에 할당 전에는 초기화되어있지 않다.

자바스크립트 엔진 관점에서 본 코드로 보면 이해가 쉽다.

👩🏼‍💻 개발자 관점 코드

console.log(foo);

let foo;
console.log(foo);

foo=1;
console.log(foo);

⚙️ 엔진 관점 코드

let foo; // 호이스팅에 의해 변수 선언이 상단으로 옮겨짐. 하지만 초기화는 여기서 이루어지지 않음.

console.log(foo); // TDZ로 인해 ReferenceError 발생
// let foo; // 실제 코드 상의 위치. 여기서 초기화가 이루어짐 (foo = undefined)

console.log(foo); // undefined. 변수 선언문에 도달하여 초기화된 이후, foo는 undefined 값을 가짐

foo = 1; // 할당문에서 foo 변수에 1을 할당
console.log(foo); // 1. foo 변수에 값이 할당되어 있으므로 1을 출력

이는 const 키워드로 선언한 변수도 동일하다.
다만 const 키워드는 반드시 선언과 동시에 초기화해야한다.

const c; //SyntaxError : Missing initializer in const declaration

💅🏻 이번 포스팅에서는 JavaScript의 변수 선언부터 할당까지의 과정과 함께 호이스팅과 TDZ(Temporary Dead Zone)의 중요 개념을 알아보았다. var, let, const 각각의 키워드를 사용할 때 발생하는 세밀한 차이점과 그로 인한 초기화 및 할당의 행동 양식을 분석했다. ✨ 특히, 호이스팅이 모든 선언자에게 발생하며, let과 const의 경우 선언과 초기화가 분리되어 처리되는 점을 잊지 말자 ! ✨