Variables scope and hoisting

프로그램의 안정성과 흐름을 결정짓는 **변수 스코프(Scope)**와 **호이스팅(Hoisting)**에 대해 알아보겠습니다.

---

1. 변수 스코프 (Variable Scope)

스코프란 '변수가 영향을 미치는 범위'를 의미합니다.

변수가 어디에서 선언되었느냐에 따라 접근할 수 있는 영역이 달라집니다.

① 전역 스코프 (Global Scope)

함수나 블록 바깥에서 선언된 변수로, 코드 전체 어디서든 접근할 수 있습니다.

② 지역 스코프 (Local Scope)

특정 범위 안에서만 유효한 변수입니다.

• 함수 스코프: 함수 내부에서 선언된 변수는 그 함수 안에서만 쓸 수 있습니다.
• 블록 스코프: if, for, while 등 중괄호 { } 안에서 선언된 변수는 그 블록 안에서만 쓸 수 있습니다. (let, const만 해당)

🖥️ 스코프 예제 코드

JavaScript

 

let globalVar = "전역 변수";

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

scopeTest();

---

2. 호이스팅 (Hoisting)

호이스팅이란 자바스크립트 엔진이 코드를 실행하기 전, 변수와 함수 선언을 코드의 최상단으로 끌어올리는 것 처럼 동작하는 현상입니다.

① var 변수의 호이스팅

var로 선언한 변수는 선언 전에도 호출할 수 있습니다. (값은 undefined로 나옵니다.) 이는 프로그램의 논리적 흐름을 방해하므로 권장되지 않습니다.

② let, const 변수의 호이스팅

let과 const도 실제로는 호이스팅이 일어납니다. 하지만 선언되기 전까지는 **일시적 사각지대(TDZ: Temporal Dead Zone)**에 갇혀 있어 접근 시 에러를 발생시킵니다. 이 덕분에 더 안전한 코딩이 가능합니다.

🖥️ 호이스팅 예제 코드

JavaScript

 

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

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

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

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

---

3. 요약 표: 변수 선언 방식 비교

구분	var	let	const
스코프	함수 스코프	블록 스코프	블록 스코프
재선언	가능 (위험함)	불가능	불가능
재할당	가능	가능	불가능 (상수)
호이스팅	발생 (undefined)	발생 (TDZ 에러)	발생 (TDZ 에러)

---

학습 정리

• 변수는 자신이 태어난 중괄호 { } 안에서만 살아있다는 점을 명심하세요.
• 호이스팅 때문에 선언문이 아래에 있어도 위에서 인지될 수 있지만, 에러를 막기 위해 항상 변수를 상단에 선언하는 습관을 들여야 합니다.
• 현대 자바스크립트에서는 보안과 유지보수를 위해 var 대신 **let과 const**를 사용합니다.

---

변수의 범위와 선언의 비밀에 대해 모두 학습하셨습니다!

---