minstudio

스코프와 호이스팅 (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); // 1
  // console.log(b); // ReferenceError: b is not defined
}
scopeTest();

// 2. 호이스팅 (Hoisting)
console.log(hoistedVar); // undefined (에러가 나지 않음!)
var hoistedVar = "나는 var입니다.";

// console.log(notHoistedLet); // ReferenceError (초기화 전 접근 불가 - TDZ)
let notHoistedLet = "나는 let입니다.";

// 함수 호이스팅
hello(); // "안녕!" (함수 선언문은 전체가 호이스팅됨)
function hello() {
  console.log("안녕!");
}
실행 결과
스코프와 호이스팅 (Scope & Hoisting) | Minstudio