스코프와 호이스팅 (Scope & Hoisting)
변수가 어디까지 유효한지를 나타내는 스코프(Scope)와, 변수 선언이 최상단으로 끌어올려지는 듯한 현상인 호이스팅(Hoisting)에 대해 알아봅니다.
호이스팅(Hoisting) 완벽 이해하기
호이스팅은 코드가 실행되기 전에 "변수 선언"과 "함수 선언"을 스코프의 맨 위로 끌어올리는 자바스크립트의 고유한 특징입니다.
👨💻 우리가 작성한 코드
console.log(myVar); // 선언하기도 전에 썼는데 에러가 안 난다고?
var myVar = "Hello!";
console.log(myVar);
🤖 JS 엔진이 해석한 코드 (호이스팅 적용)
var myVar; // 🎈 1. 선언부만 맨 위로 '끌어올림'
console.log(myVar); // 2. 값은 안 올라왔으니 undefined 출력
myVar = "Hello!"; // 3. 원래 자리에서 비로소 값 할당
console.log(myVar); // 4. 이제 "Hello!" 출력됨
주의: let과 const도 호이스팅이 되지만, 값이 할당되기 전에는 "접근 불가 구역(TDZ)"에 빠져 참조 에러가 발생합니다. (이것이 더 안전하고 예측 가능한 코딩 방식입니다!)
스코프(Scope) 시각화
[전역 우주] var global = 1;
[함수 은하계] var funcVar = 2;
{ 블록 행성 } let blockVar = 3;
안에서는 밖(은하계, 우주)이 다 보임
밖에서는 안쪽 행성, 은하계가 안 보임
// 1. 블록 스코프 (let, const) vs 함수 스코프 (var)
function scopeTest() {
if (true) {
var a = 1; // 함수 스코프 (if문 밖에서도 접근 가능 - 과거의 유물)
let b = 2; // 블록 스코프 (if문 밖에서 접근 불가 - 안전함!)
const c = 3; // 블록 스코프
}
console.log("a의 값:", a); // 1 (접근 가능)
// console.log("b의 값:", b); // ❌ 에러 발생: b is not defined
}
scopeTest();
// 2. 호이스팅 (Hoisting): 선언이 위로 끌어올려지는 현상
console.log("hoistedVar (초기화 전):", hoistedVar); // undefined (에러 안 남!)
var hoistedVar = "나는 var입니다.";
console.log("hoistedVar (할당 후):", hoistedVar); // "나는 var입니다."
// console.log(notHoistedLet); // ❌ 에러 발생: 초기화 전 접근 불가 (TDZ)
let notHoistedLet = "나는 let입니다.";
// 함수 호이스팅
hello(); // "안녕!" (함수 선언문은 통째로 호이스팅되어서 먼저 호출 가능!)
function hello() {
console.log("안녕!");
}