호이스팅과 undefined 최종 정리

진하의 메모장·2025년 1월 6일

undefined 복습 자바스크립트 호이스팅

공부일기

목록 보기

3/66

2025 / 01 / 06

호이스팅과 undefined에 대해 최종 정리해보자!

저번 시간에 배운 호이스팅과 undefined에 대해 헷갈리는 부분이 있어서 개념과 특징을 정리해봤습니다!

💌 호이스팅

변수 선언과 함수 선언이 코드 실행 전에 자바스크립트 엔진에 의해 끌어올려지는 현상을 말합니다.
이는 자바스크립트 코드가 실행될 때 변수나 함수 선언이 실제 코드 실행 전에 메모리로 이동하는 과정입니다.

var - 변수 선언이 호이스팅되며, 초기화 전에 참조하면 undefined가 반환됩니다.
let, const - 변수 선언만 호이스팅되고, 초기화되기 전까지는 참조할 수 없으며, ReferenceError가 발생합니다.
함수 선언문 - 함수 전체가 호이스팅되므로, 어디서든 호출할 수 있습니다.
함수 표현식 - 변수에 할당된 함수는 호이스팅되지 않으며, 변수에 할당되기 전에 호출하면 TypeError가 발생합니다.

var와 let의 호이스팅 차이점

특성	var	let
호이스팅 방식	변수 선언만 호이스팅, 값은 undefined로 초기화	변수 선언만 호이스팅, 초기화되기 전까지 참조 불가
초기화 전 참조 시	undefined 값 반환	ReferenceError 발생
TDZ (Temporal Dead Zone)	없음	있음 (초기화 전에 변수 참조 불가)

결론

var는 변수 선언이 호이스팅되면서 초기화되지 않으면 undefined로 처리됩니다.

let은 변수 선언만 호이스팅되고, 초기화되기 전까지 참조하려고 하면 ReferenceError가 발생합니다. ( TDZ )

let에서의 undefined 값?

let으로 선언한 변수는 선언 시점에서 초기화되지 않으면 undefined로 간주됩니다.
var와 비슷하지만, let은 참조할 수 없게 되는 구역(TDZ)과 관련된 다른 동작을 가집니다.
결론적으로, let으로 선언된 변수는 초기화되지 않으면 undefined로 간주하는 값을 가지며, 이를 출력하면 undefined가 반환됩니다.

💌 undefined로 간주되는 :

undefined와 undefined로 간주되는 값은 다른 의미일까?
"undefined로 간주되기만 하는 상태"와 undefined는 사실상 같은 값을 의미합니다.

undefined는 자바스크립트에서 값이 할당되지 않은 변수나 함수가 반환하지 않은 값을 나타내는 특수한 값입니다.

let으로 선언된 변수가 초기화되지 않은 상태일 때 그 변수는 undefined 값을 가지게 됩니다.

호이스팅과 관련된 점 :

let으로 선언된 변수는 호이스팅이 일어나지만, 초기화되기 전에는 사용할 수 없습니다.
즉, 초기화 전에는 참조할 수 없기 때문에 undefined가 아니라 undefined로 간주되기만 하는 상태입니다.
초기화되지 않은 변수는 undefined로 반환되는 것처럼 동작하지만, 실제로는 값이 할당되지 않았기 때문에 undefined가 반환되는 것입니다.

차이점 :

이름	설명
undefined	자바스크립트에서 값이 할당되지 않은 변수나 함수의 반환 값으로 사용되는 실제 값
초기화되지 않은 let 변수	let으로 선언된 변수는 초기화되지 않으면 값이 undefined로 간주되지만, 그 변수는 여전히 존재하고 메모리 공간에 할당되어 있습니다. 그래서 console.log(변수명)를 호출하면 undefined가 출력됩니다.

중요한 부분

let으로 선언한 변수는 초기화되지 않으면 값이 undefined로 간주한다.
let z;
console.log(z); // undefined가 출력됩니다.
위 코드에서 z는 선언만 되었고, 초기화되지 않았기 때문에 undefined가 출력됩니다.

이것은 undefined라는 값이 변수에 할당된 상태입니다.

💌 최종 정리

1. var의 호이스팅 동작

호이스팅 - var로 선언된 변수는 선언만 끌어올려지고, 변수의 값은 끌어올려지지 않습니다. 즉, 변수는 선언된 위치로 끌어올려지고, 초기화는 그 이후에 이루어집니다.

결과 - 변수 선언이 끌어올려지지만, 값은 초기화가 될 때까지 undefined입니다.
console.log(a); // undefined
var a = 10;
호이스팅 과정 - 자바스크립트 엔진은 이 코드를 다음과 같이 처리합니다:
1 ) var a; (변수 선언만 끌어올려짐)
2 ) console.log(a);는 a를 참조하려고 하지만, a는 아직 값이 할당되지 않았으므로 undefined가 출력됩니다.
3 ) a = 10; (변수 초기화)

var로 선언된 변수는 선언만 먼저 실행되고, 초기화는 실제 코드가 실행되는 시점에 이루어집니다.

2. let의 호이스팅 동작

호이스팅 - let으로 선언된 변수도 선언은 끌어올려지지만, 초기화는 끌어올려지지 않으며, 초기화되기 전까지 해당 변수에 접근할 수 없습니다.

초기화 전에는 "Temporal Dead Zone (TDZ)"이라는 일시적인 죽은 구역에 있어, 참조하려고 하면 ReferenceError가 발생합니다.

결과 - 변수 선언은 끌어올려지지만, 초기화되기 전까지 참조할 수 없으며, ReferenceError가 발생합니다.
console.log(b); // ReferenceError
let b = 20;
호이스팅 과정 - 자바스크립트 엔진은 이 코드를 다음과 같이 처리합니다:
1 ) let b; (변수 선언만 끌어올려짐)
2 ) console.log(b);는 b가 아직 초기화되지 않았기 때문에, TDZ에 있는 상태이므로 ReferenceError가 발생합니다.
3 ) b = 20; (변수 초기화)

let으로 선언된 변수는 초기화되기 전까지 참조할 수 없으며, ReferenceError가 발생합니다.

3. let에서도 undefined을 얻을 수는 있다.

let으로 선언된 초기화되지 않은 변수는 undefined로 간주, 실제로 undefined 값을 가짐.

undefined로 간주되기만 하는 상태라는 표현은 사실상 undefined 값이 실제로 할당된 상태를 설명하는 말과 동일합니다.

공부 후기

호이스팅과 undefined라는 개념을 이번에 자바스크립트를 공부하며 알게되었는데, 따로 모르는 부분과 헷갈리는 부분을 공부해보니까 확실히 이해할 수 있었는 것 같다.

프로그래밍에서는 작은 단어의 차이로도 의미가 달라지는 것을 알 수 있었다. ^ ̳ᴗ ̫ ᴗ ̳^ྀི