스코프(Scope) 완전 정리

1️⃣ 스코프란?

**스코프(Scope)**는 변수에 접근 할 수 있는 유효 범위를 의미합니다.
자바스크립트에서 스코프는 변수가 "어디서 선언되가, 어디까지 접근 가능한지"를 결정합니다.

• 스코프는 자바스크립트 엔진이 변수를 찾는 규칙입니다.
• 변수 참조 시 엔진은 현재 스코프 → 상위 스코프 → ... → 전역 스코프 순으로 탐색합니다. (스코프 체인)

2️⃣ 스코프의 종류

🔹 전역 스코프 (Global Scope)

• 프로그램 전체에서 접근 가능
• 브라우저에서는 window / Node.js에서는 global 객체에 바인딩
• 과도한 전역 변수 사용은 충돌 위험

var a = 1;	// 전역 변수
let b = 2;	// 전역 범위에 선언되지만, window에 올라가진 않음
console.log(window.a);	// 1
console.log(window.b);	// undefined

🔹 함수 스코프 (Function Scope)

• var 키워드는 함수 단위로 스코프가 생성
• 블록(if, for) 내부에서 선언해도 함수 전체에서 접근 가능

function test() {
	if (true) {
		var x = 10;	// 함수 스코프
	}
	console.log(x);	// 10
}
test();

🔹 블록 스코프 (Block Scope)

• let, const는 블록 단위 {}로 스코프가 생성
• 함수 외에도 if, for, while 같은 블록 내부에서만 유효

if (true) {
	let y = 20;
	const z = 30;
}
// console.log(y); // ❌ ReferenceError

🔹 렉시컬 스코프 (Lexical Scope)

• 스코프는 선언 위치에 따라 결정
• 실행 위치가 아니라 정의된 위치 기준으로 상위 스코프가 정해짐

function outer() {
	const msg = "Hello";
	function inner() {
		console.log(msg);
	}
	return inner;
}

const fn = outer();
fn(); // "Hello" (outer 종료 후에도 msg 참조 가능)

🔹 모듈 스코프 (Module Scope, ES6+)

• ES 모듈(.mjs 또는 type="module")에서는 파일 자체가 독립적인 스코프
• 모듈 내부 변수는 전역 공간에 등록되지 않음

// module.mjs
const secret = 123;
expoer const value = 456;

// window.secret ❌
// window.value ❌

3️⃣ 스코프 체인 (Scope Chain)

• 변수를 찾을 때 현재 스코프 → 상위 스코프 → ... → 전역 순으로 탐색
• 하위 스코프에서 상위 스코프 참조 가능하지만, 반대는 불가능

const x = 1;

function outer() {
	const y = 2;
	function inner() {
		const z = 3;
		console.log(x, y, z);
	}
	inner();
}
outer(); // 1 2 3