스코프란?

모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 이를 스코프라 한다.

즉, 스코프는 식별자가 유효한 범위를 말한다.

var x = 'global';

function foo() {
	var x = 'local';
	console.log(x); // local
}

foo();

console.log(x); // 'global'

위 코드를 보면 변수 이름이 x로 동일하지만, 결과는 다르게 나온다.

자바스크립트 엔진은 위처럼 스코프에 따라 어떤 변수를 참조해야 할 지 결정한다. 이를 식별자 결정이라 하며, 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙을 스코프라고도 할 수 있다.

스코프 내에서 식별자는 유일해야 하지만, 다른 스코프에는 같은 이름의 식별자를 사용할 수 있다.

즉, 스코프는 네임스페이스다.

스코프의 종류

스코프는 크게 전역과 지역으로 나뉜다.

var x = 'global x';
var y = 'global y';

function outer() {
	var z = 'outer local z';
	
	console.log(x); // 'global x'
	console.log(y); // 'global y'
	console.log(z); // 'outer local z'

	function inner() {
		var x = 'inner local x';

		console.log(x); // 'inner local x'
		console.log(y); // 'global y'
		console.log(z); // 'outer local z'
	}

	inner();
}

outer();

console.log(x); // 'global x'
console.log(z); // ReferenceError: z is not defined

스코프 체인

함수는 중첩될 수 있으며, 함수의 지역 스코프도 중첩될 수 있다. 스코프가 함수의 중첩에 의해 계층적 구조를 갖게 된다.

모든 지역 스코프의 최상위 스코프는 전역 스코프다.

변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다.

자바스크립트 엔진은 코드를 실행하기 전에 스코프체인과 유사한 자료구조인 렉시컬 환경을 실제로 생성한다.

<aside> 📌 렉시컬 환경의 자료구조는 Key - Value의 Map과 유사한 구조라고 볼 수 있다.

</aside>