[JavaScript] 변수의 생성과정과 호이스팅(Hoisting)

자바스크립트가 어떻게 동작하는지 공부하기위해 공부하던 중 호이스팅이라는 개념을 접하게 되어 공부한 내용을 정리

---

변수란?

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.

변수의 생성과정

변수 선언 단계

변수를 생성하는 것을 말하는데 자세히 말하면,
값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비한다. 이때 확보된 메모리 공간은 확보가 해제되기 전까지는 누구도 확보된 메모리 공간을 사용할 수 없도록 보호된다.

변수 초기화 단계

자바스크립트 엔진에 등록한 변수의 메모리 공간이 생성되고, 값이 없다면 undifind로 초기화되고, 변수에 메모리 주소값이 저장되는 단계이다.

변수 할당 단계

초기화 단계까지 마쳐 undefined가 할당된 변수에 원하는 값을 재할당한다.

호이스팅 이란?

JavaScript 호이스팅은 코드를 실행하기 전에 함수, 클래스, 변수, import 선언문이 해당 범위의 최상단으로 올리는 것이 아니라 최상단으로 올려진 것처럼 보이는 현상이다.

그런데 var 변수와 달리 let으로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작한다

// var 키워드로 선언한 변수는 런타임 이전에 선언 단계와 초기화 단계가 실행된다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 있다.

console.log(foo); // undefined

var foo;
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); //1

var 키워드로 선언한 변수는 런타임 이전에 자바스크립트 엔진에의해 암묵적으로 선언 단계와 초기화 단계가 한번에 진행된다.

// 런타임 이전에 선언 단계가 실행된다. 아직 변수가 초기화되지 않았다.
// 초기화 이전의 일시적 사각지대에서는 변수를 참조할 수 없다.

console.log(foo); // 참조 에러

let foo;
console.log(foo); // undefined

foo = 1; 
console.log(foo); //1

let 키워드로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 진행되는데

let 키워드로 선언한 변수는 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대(TDZ)라고 하는데 이 일시적 사각지대(TDZ) 때문에 호이스팅이 발생되지 않는 것처럼 보이는데 아래 예시로 확인해보자

let foo = 1; // 전역 변수

{
	console.log(foo); // 참조 에러
	let foo = 2; // 지역 변수
}

let 키워드로 선언한 변수가 호이스팅이 발생하지 않는다면 전역 변수 foo의 값을 출력해야 하는데 let 키워드로 선언한 변수도 호이스팅이 발생하기 때문에 참조 에러가 발생한다.