Variable Scope (변수 스코프)와 Hoisting (호이스팅)

 

🟨 Variable Scope

변수에 접근할 수 있는 범위를 의미한다. 변수는 선언된 위치에 따라 사용할 수 있는 범위가 결정된다.

 

◼ Global Scope (전역 스코프)

함수나 블록({}) 밖에서 선언한 변수. 프로그램 어디에서나 접근할 수 있으며, 모든 함수와 블록 내부에서도 접근할 수 있다.

let globalVar = "전역 변수";

function test() { console.log(globalVar); // 접근 가능
}

test(); console.log(globalVar); // 접근 가능

 

---

 

❗ 단, 같은 이름의 지역 변수가 있으면 지역 변수가 우선한다. ❗

let name = "전역";

function test() {
    let name = "지역";
    console.log(name); // 지역
}

 

◼ Local Scope (지역 스코프)

특정 범위 안에서만 사용할 수 있는 변수.

1️⃣ Function Scope (함수 스코프)

function test() {
    let functionVar = "함수 변수";
    console.log(functionVar); // 접근 가능
}

test();

// console.log(functionVar); // 에러

• 함수 내부에서 선언한 변수는 해당 함수 안에서만 사용할 수 있다.

 

2️⃣ Block Scope (블록 스코프)

if (true) {
    let blockVar = "블록 변수";
    console.log(blockVar); // 접근 가능
}

// console.log(blockVar); // 에러

• if, for, while 등의 {} 블록 안에서 let 또는 const로 선언한 변수는 해당 블록 안에서만 사용할 수 있다.

 

◼ 스코프의 접근 범위

1️⃣ 전역 변수는 어디서든 접근할 수 있다.

2️⃣ 함수 내부에서는 전역 변수와 자신의 지역 변수에 접근할 수 있다.

3️⃣ 블록 내부에서는 전역 변수, 함수 변수, 그리고 해당 블록에서 선언한 변수에 접근할 수 있다.

4️⃣ 블록 밖에서는 블록 변수에 접근할 수 없다.

 

 

---

 

⚙️ 실전 예제 코드⚙️

let globalVar = "전역 변수";

function scopeTest() {
    let functionVar = "함수 변수";
    
    if (true) {
        let blockVar = "블록 변수";
        console.log(globalVar);   // 접근 가능
        console.log(functionVar); // 접근 가능
        console.log(blockVar);    // 접근 가능
    }
    
    // console.log(blockVar); // 에러! 블록 밖에서는 접근 불가
}

scopeTest();

 

---

 

🟨 Hoisting

자바스크립트 엔진이 코드를 실행하기 전에 변수와 함수 선언을 먼저 처리하는 동작을 의미한다.

실제로 코드가 이동하는 것은 아니며, 선언이 코드의 최상단으로 끌어올려진 것처럼 동작한다.

 

◼ var 변수의 호이스팅

console.log(name); // undefined

var name = "철수";

• var로 선언한 변수는 선언 전에 참조할 수 있지만, 값은 아직 할당되지 않았기 때문에 undefined가 출력된다.

 

◼ let, const 변수의 호이스팅

// console.log(age); // ReferenceError

let age = 25;

• let과 const도 선언 자체는 호이스팅되지만, 초기화되기 전까지는 TDZ(Temporal Dead Zone, 일시적 사각지대)​에 존재하기 때문에 접근 시 ReferenceError가 발생한다.

 

 

📍 POINT 📍

✔️ 지역 변수는 자신이 선언된 스코프 안에서만 사용할 수 있다. ✔️

✔️ 변수는 사용하기 전에 선언하는 습관을 들이는 것이 좋다. ✔️

✔️ 현대 자바스크립트에서는 보안과 유지보수를 위해 var 대신 let과 const를 사용한다. ✔️

 

 

📋 변수 선언 방식 비교 📋

구분	var	let	const
스코프	함수 스코프	블록 스코프	블록 스코프
재선언	가능	불가능	불가능
재할당	가능	가능	불가능 (상수)
호이스팅	O (undefined)	O  (TDZ)	O  (TDZ)
블록 스코프	X	O	O

 

---

 

⚙️ 실전 예제 코드⚙️

// 1. var의 경우
console.log(name); // 결과: undefined (에러는 안 나지만 값이 없음)
var name = "철수";

// 2. let의 경우
// console.log(age); // 결과: ReferenceError (TDZ 때문에 에러 발생)
let age = 25;

// 3. 함수의 경우
sayHi(); // 결과: "안녕!" (함수 선언문은 전체가 호이스팅됨)

function sayHi() {
    console.log("안녕!");
}