13. 스코프(Scope, 유효 범위)

식별자(변수, 함수, 클래스 등의 이름)가 유효한 범위
모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다.
자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조해야 할 것인지 결정한다.
만약 스코프라는 개념이 없다면 같은 이름을 갖는 변수는 충돌을 일으키므로 프로그램 전체에서 하나밖에 사용할 수 없다.
```
const x = 1;

function foo() {
	const x = 2;
	console.log(x);
}

console.log(x); // 1
foo(); // 2
```
위의 코드에서 두개의 x 변수가 있지만 각자 foo 함수 내에서의 x는 foo 함수 안에서만 사용할 수 있다. 이 때 두 개의 x 변수는 식별자 이름이 동일하지만 자신이 유효한 범위, 즉 스코프가 다른 별개의 변수다.

스코프의 종류

전역 스코프(global scope)

전역이란 코드의 가장 바깥을 말한다.
전역에 변수를 선언하면 전역 스코프를 갖는 전역 변수가 된다.
전역 변수는 젼역 스코프를 가지므로 어디서든지 참조할 수 있다.

지역 스코프(local scope)

지역이란 함수 내부를 말한다.
지역에 변수를 선언하면 지역 스코프를 갖는 지역 변수가 된다.
지역 변수는 자신의 지역 스코프와 하위 지역 스코프(중첩 함수 내)에서 유효하다.

var x = "global x";
var y = "global y";

function outer() {
	var z = "outer's local z"

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

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

	inner();
}

outer();

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

스코프 체인

스코프는 함수의 중첩에 의해 계층적 구조를 가져 연결된 것을 말한다.
외부 함수의 지역 스코프가 중첩 함수의 상위 스코프, 전역 스코프가 외부 함수의 상위 스코프가 되어 체인처럼 연결되어 있다.
- 위의 코드를 보면 outer 지역 함수와 inner 지역 함수가 있다. inner 함수는 outer 함수의 중첩 함수다.
- 이 때 outer 함수가 만든 지역 스코프가 inner 함수가 만든 지역 스코프의 상위 스코프다. 그리고 outer의 상위 스코는 전역 스코프다.
  
  inner 함수 코드 실행 순서
  1. x 변수를 참조하는 코드의 스코프인 inner 함수의 지역 스코프에서 x 변수가 선언되었는지 검색한다.
    1. inner 함수 내에 선언된 x 변수가 존재한다. 따라서 검색된 변수를 참조하고 검색을 종료한다.
  2. y 변수를 참조하는 코드의 스코프인 inner 함수의 지역 스코프에서 y 변수가 선언되었는지 검색한다.
    1. inner 함수 내에는 y 변수의 선언이 존재하지 않으므로 상위 스코프인 outer 함수의 지역 스코프로 이동한다.
    2. outer 함수 내에도 y 변수의 선언이 존재하지 않으므로 또 다시 상위인 전역 스코프로 이동한다.
    3. 전역 스코프에는 y 변수의 선언이 존재한다. 따라서 검색된 변수를 참조하고 검색을 종료한다.
따라서 모든 지역 스코프의 최상위 스코프는 전역 스코프다.