[JS] 06. 변수가 사는 세상, 스코프(Scope)와 호이스팅

자바스크립트에서 "왜 이 변수가 여기서는 안 보이지?" 혹은 "왜 갑자기 undefined가 나오지?"라는 의문이 든다면 100% 스코프와 호이스팅의 문제이다.

 

스코프란? - 우리 말로 범위를 뜻한다. 즉 변수나 함수에 접근하거나 호출할 수 있는 범위이다.

C#에서는 전역, 지역 변수, 함수와 같다.

1. 스코프 (Scope): 변수의 유효 범위

스코프는 변수에 접근할 수 있는 범위를 뜻한다.

① 전역 스코프 (Global Scope)

코드의 가장 바깥 영역이다. 여기서 선언된 변수는 어디서든 접근이 가능하다. 하지만 너무 많이 쓰면 데이터 오염의 위험이 있다.

② 지역 스코프 (Local Scope)

특정 영역 안에서만 유효하다. 자바스크립트는 크게 두 가지 지역 스코프를 가진다.

• 함수 레벨 스코프: 함수 내부에서 선언된 변수는 함수 밖에서 부를 수 없다. (var)
• 블록 레벨 스코프: {}(중괄호)로 둘러싸인 모든 곳(if, for 등) 안에서만 유효하다. (let, const)

---

2. let, const vs var (C# 개발자가 꼭 알아야 할 점)

과거에는 var를 썼지만, 현대 자바스크립트에서는 let과 const만 사용한다. 그 결정적인 이유는 블록 스코프 때문이다.

 

JavaScript

 

if (true) {
    var globalLike = "나는 어디서든 보여요"; // 함수 스코프
    let localOnly = "나는 이 안에서만 보여요"; // 블록 스코프
}

console.log(globalLike); // 출력됨
console.log(localOnly);  // ReferenceError 발생!

---

3. 호이스팅 (Hoisting): 선언을 위로 끌어올리기

자바스크립트 엔진은 코드를 실행하기 전, 변수와 함수 선언을 코드 최상단으로 '끌어올리는 것처럼' 동작한다.

• var의 호이스팅: 선언과 동시에 undefined로 초기화된다. (위험!)
• let, const의 호이스팅: 선언은 되지만 초기화되지 않아, 선언문 이전에 사용하려고 하면 에러가 발생한다. (TDZ: Temporal Dead Zone)

 

JavaScript

 

console.log(hoistedVar); // undefined (에러는 안 남)
var hoistedVar = "Hello";

// console.log(safeLet); // ReferenceError (안전)
let safeLet = "Hi";

---

 

통합 테스트 코드 (Chapter07-1.js)

JavaScript

 

// [실습: 스코프와 호이스팅 테스트]

let globalVal = "전역";

function scopeTest() {
    let localVal = "지역";
    
    if (true) {
        let blockVal = "블록";
        var functionVal = "함수레벨";
        console.log(globalVal, localVal, blockVal); // 모두 접근 가능
    }

    console.log(functionVal); // var는 블록을 무시하고 함수 안이면 접근 가능
    // console.log(blockVal); // Error! 블록 스코프 변수는 접근 불가
}

scopeTest();

// --- 주의해야 할 호이스팅 예시 ---
console.log("현재 이메일 설정 확인:", userEmail); // undefined (에러 안 남)
var userEmail = "Test1234@naver.com"; 

// console.log(userAge); // Error! (안전한 let 사용 권장)
let userAge = 30;