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

<aside> 💡 스코프는 식별자가 유요한 범위를 말한다.

</aside>

var x = 'global';

function foo() {
  var x = 'local';
  console.log('1번', x);
}

foo();

console.log('2번', x);

자바스크립트 엔진은 두 개의 변수 중에서 어떤 변수를 참조해야 할 것인지를 결정해야한다….. 🧐

<aside> 💡 식별자 결정 : 같은 두개의 변수(x)에서 어떤 변수를 참조 할것인지 결정 해야한다.

</aside>

<aside> 💡 스코프란 자바스크립트 엔진이 식별자를 검색할때 사용하는 규칙

</aside>

x라는 변수는 2개인데 식별자 이름은 동일하지만 자신이 유효한 범위, 즉 스코프가 다른 별개의 변수이다.

스코프의 종류

변수는 자신이 선언된 위치 (전역 또는 지역)에 의해 자신이 유효한 범위인 스코프가 결정된다.

1. 전역 스코프

   1. 전역이란 코드의 가장 바깥 영역을 말한다.
   2. 전역은 전역 스코프(global scope)를 만든다.
   3. 전역에 변수를 선언하면 전역 스코프를 갖는 전역(global variable)변수가 된다.

   <aside> 💡 전역 변수는 어디서든지 참조할 수 있다.

   </aside>

2. 지역 스코프

   <aside> 💡 지역이란 ? 함수 몸체 내부를 말한다.

   </aside>

   1. 지역변수는 자신이 선언된 지역과 하위 지역(중첩 함수)에서만 참조 할 수 있다.
   2. 지역변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효하다.

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(z);  // Error

스코프 체인

함수 몸체 내부에서 함수가 정의된 것을 함수의 중첩 이라고 한다.