변수의 유효범위

피드백 및 오류 수정은 항상 환영합니다. 꼭 이상하거나 잘못되어져 있는 내용들에 대해서는 딴지를 걸어주세요!

Scope

i) 변수가 유효한 범위
ii) 변수에 접근할 수 있는 범위

Scope의 종류

• Global Scope(전역 스코프)
  함수 밖의 공간들은 모두 전역 스코프이다. 전역 스코프에서 선언된 변수들은 다른 모든 scope에서 참조와 수정이 가능하다. Window는 Global Scope에 정의된 전역 객체로 모든 곳에서 사용가능하고 객체명은 생략이 가능하다.
• Local Scope(지역 스코프)
  모든 함수들의 각각의 지역 스코프를 가지고 있다. 즉, 해당 함수안에서 선언된 변수들은 그 함수의 지역 스코프에 해당한다.
  • Function Scope(함수 스코프)
    var로 선언된 변수들이 함수 내에서 선언되었을 때, 그 함수 내에서만 참조 가능하다.
  • Block Scope(블럭 스코프)
    ES6에서 const와 let이 새로 생기면서 생긴 스코프로 이 keyword들로 선언된 변수들은 해당 block 내에서만 참조 가능하다. Block은 {}으로 묶인 부분을 말한다. 아래 예제에서 function scope인 var을 제외한 const와 let으로 선언된 변수들은 if block 밖에서 접근하려하기 떄문에 오류가 나온다.

	function foo(){
		if(true) {
			var car1 = benz;
			const car2 = BMW;
			let car3 = audi;
		}
		console.log(car1);
		console.log(car2);
		console.log(car3);
	}

	foo();
	// benz
	// car2 is not defined
	// car3 is not defined

Scope Chain

JS에서는 변수의 유효범위를 호출한 함수의 local scope부터 바깥으로 global scope까지 넓혀가며 찾는다.마치 선팅된 차와 같이 내부 함수에서는 외부 함수 변수에 접근이 가능하지만 반대는 불가능하다.

Lexical Scoping

함수의 스코프는 함수가 선언(컴파일) 될 떄에 미리 정해진다.

var number = 1;
function a() {
  var number = 10;
  b();
}
function b() {
  console.log(number);
}
a(); 
b();
// 1
// 1

실행과 관계없이 유효범위는 함수가 선언될 때 이미 다 정해진다. b 함수가 선언될 때 b의 상위 스코프는 전역 스코프이다. 그리하여서 a()에서 b 함수를 실행 할때 b 지역 스코프에서 먼저 number 변수를 찾아보고 없으면 전역 스코프에서 찾는다.

lexcial scoping과 반대로 함수의 스코프가 함수가 실행(런타임) 될 떄 정해지는 dynamic scoping도 존재한다.

---

REFERENCES

• JavaScript: Introduction to Scope (function scope, block scope)
• (JavaScript) Lexical Scope(Static Scope) and Dynamic Scope
• JavaScript Scope