스코프 (Scope)

우리가 선언한 변수 혹은 함수가
어디서 어디까지 유효한지에 대한 범위를 의미 한다.

스코프의 종류

스코프는 전역 스코프(Global Scope)와 지역 스코프(Local Scope)로 나뉜다.

전역 스코프 (Global Scope)

• 가장 바깥 영역의 코드를 전역 스코프 라고 한다.
• 코드의 모든 범위에서 사용 가능 하다.
• 전역 스코프에서 선언 한 변수를 전역변수 라고 한다.

지역 스코프 (Local Scope)

• 전역 스코프를 제외한 스코프를 지역 스코프 라고 한다.
• 함수 스코프(Function Scope), 블록 스코프(Block Scope)가 있다.
• 함수 몸체의 내부 혹은 if문의 { }(블록) 내부에서 사용 한다.
• 지역 스코프에서 선언 한 변수를 지역변수 라고 한다.

특징

• 함수 내부에서 선언 된 변수는 함수 밖에서 참조할 수 없고
  함수 내부에서만 사용 가능 하다.

• 전역에서 선언 된 변수는 함수 내부에서 참조할 수 있다.

• 화살표 함수는 함수 스코프가 아니라 블록 스코프이다

ex) 전역 스코프 지역 스코프 유효 범위

const value = 'hello'; // 전역 변수

function myFunction() {
  const value = 'bye';	// 지역 변수 (함수 스코프)
  if(true) {
    const value = 'world'; // 지역 변수 (블록 스코프)
    console.log(value);	// world
  }
  console.log(value);	// bye
}   
myFunction();
console.log(value);	// hello 

ex) 스코프 체인 (Scope Chain)

• 스코프 체인은 쉽게 말해서 스코프간의 상하관계를 의미한다.

• 스코프를 안에서 부터 바깥으로 차례로 검색 한다.

• 스코프에서 최상의 스코프는 전역 스코프이다.

• 함수A안에 함수B가 있다고 쳐보자. 함수B에서 변수x를 찾는다고 하고 함수B에서 변수x가 없다면 함수B의 상위 스코프인 함수A로 올라가 변수x를 찾는다.

• 상위 스코프인 함수A 에서도 찾지 못한다면 함수A의 상위 스코프인 전역 스코프로 이동하여 찾게된다.

const global = 'global';
function outer() {
	const outerVariable = 'outer';
	function inner() {
		const innerVariable = 'inner';
		console.log(outerVariable); // outer
		console.log(global);    // global
	}
	inner();
	console.log(innerVariable); // innerVariable is not defined
}
outer();

• 함수의 상위스코프는 함수가 정의된 위치에 따라 결정 된다.
  
  
• inner함수의 상위 스코프는 outer함수이고
  outer함수의 상위 스코프는 전역 스코프인 전역 변수 global이 된다.
  
  
• 자바스크립트 엔진은 변수가 있는지 없는지 식별자를 스코프 체인을 통해 올라간다.
  
  
• inner함수에서 console.log(outerVariable)는 우선 inner함수에 outerVariable라는 변수가 있는지 찾는다. 없으면 상위 스코프인 outer함수에서 찾는다.
  
  
• inner함수에서 console.log(global)은 우선 inner함수에 global이라는 변수가 있는지 찾는다. 없으면 상위 스코프인 outer함수에서 찾는다.
  outer함수에도 없으므로 outer함수의 상위 스코프인 전역 스코프로 올라가 찾게 된다. 전역 스코프에는 global이라는 전역 변수가 있기에 참조가 가능하다.
  
  
• 스코프는 모든 바깥 스코프에 접근 할 수 있다. 이렇게 상위 스코프를 접근하면서 찾아가는 방식을 스코프 체인 이라고 한다.
  
  
• 하지만 상위 스코프를 접근해서 변수를 참조할 수 있지만,
  상위 스코프에서 하위 스코프에 접근할 수는 없다.
  outer함수에서 console.log(innerVariable)를 보면 innerVariable은 하위 스코프인 inner함수에 존재 하기 때문에
  'innerVariable is not defined'를 출력 한다.

ex) var의 유효범위

if(true) {
	const block = 'block';
}
console.log(block); // block is not defined

if(true) {
	var block = 'block';
}
console.log(block); // block

var는 오직 전역 스코프와 함수 스코프 범위만 가지기 때문에
블록 안에서 선언되도 블록 외부에서 사용이 가능하다.