스코프체인

스코프란 ?

식별자는 자신이 선언된 위치에 따라서 참조할 수 있는 유효한 범위를 가지게 되며, 이를 스코프라고 합니다.

 

1. 전역(Global) 스코프

 

어느 곳에서든지 해당 변수 또는 함수에 접근할 수 있습니다.

let globalStr = "Hello";

console.log(globalStr) // Hello

function func() {
	console.log(globalStr);
}
func(); // Hello

    → 같은 위치에서든, 함수 안이든 위치 상관없이 접근할 수 있습니다.

 

2. 지역(Local) 스코프

 

유효한 범위 내에서만 해당 변수 또는 함수에 접근할 수 있습니다.

 

1 ) 함수(Function) 스코프

// 함수 스코프
function func() {
	let localStr = "Hello";
	console.log(localStr);
}

func() // Hello

console.log(localStr); // Uncaught ReferenceError: localStr is not defined at <anonymous>

 

2 ) 블록(Block) 스코프 (if, for, switch 등..)

// 블록 스코프
if (true) {
	let localStr = "Hello";
	console.log(localStr); // Hello
}

console.log(localStr); // Uncaught ReferenceError: localStr is not defined at <anonymous>

 

❗var 는 블록 스코프를 갖지 않는다.

JavaScript 초기에는 var와 함수 스코프만이 존재했습니다.
이후, let과 const가 도입되면서 블록 스코프를 가지는 변수를 만들 수 있게 되었지만,
기존 코드와의 호환성을 유지하기 위해 var는 여전히 함수 스코프만을 가질 수 있습니다.

{
    var str = "Hello";
    console.log(str); // Hello
}

console.log(str); // Hello​

---

스코프체인이란 ?

스코프 체인은 스코프가 계층적으로 연결되어 있는 것을 의미합니다.

 

JS엔진은 식별자를 찾을 때 제일 먼저 현재 스코프에서 찾고,

없다면 찾을 때까지 상위 스코프, 상위 스코프의 상위 스코프 마지막에는 전역 스코프까지 탐색합니다.

function func1() {
	const str = "Hello";

	function func2() {
		// const str = "World"; → 이 위치에 변수가 선언되었다면 "World"가 출력되었을 것이다.

		console.log(str); // "Hello"
	}

	func2();
}

func1();

 

다만, 상위 스코프에서 하위 스코프로의 참조는 불가능합니다.

function func1() {
	function func2() {
		const str = "Hello";
	}

	console.log(str); // Uncaught ReferenceError: str is not defined at func1
}

func1();

---

스코프체인의 원리

스코프 체인은 Lexical Environment를 단방향으로 연결한 링크드리스트 형태로 이루어져있습니다.

Outer Environment에서 자신이 참조하고 있는 상위 스코프의 Lexical Environment 정보를 수집합니다.

실제로 확인을 해보면, [[Scopes]] 프로퍼티 안에 스코프 체인의 정보가 있습니다.

function func1() {
	const str = "Hello";

	function func2() {
		console.log(str);
	}

	func2();
}

func1();

→ 인덱스 순서대로 참조를 하게 됩니다.

 

 

 

 

참고

08. scope 의 이해 · GitBook

 

[TIL] Scope Chain 이해하기 (JavaScript)

 

스코프와 스코프 체인 | JavaScript Basics

 

스코프 체인 과 변수 은닉화

 

[javascript] execution context, scope (실행 컨텍스트, 스코프)

 

자바스크립트 실행 환경(Execution Context)

 

Lexical Environment & Scope & TDZ