Jun 개발노트

Scope

2020-09-11

1. 정의

  • 참조 대상 식별자(변수명, 함수명)를 찾아내기 위한 규칙(결국 이름을 찾아내는 규칙)
  • 해당 Entity의 이름(변수/함수명)이 무슨/어떤 리터럴로 바인딩 되었는지 알아내는 규칙
  • 스코프를 통해서 참조 대상 식별자의 충돌 방지(동일한 이름이어도 스코프에 따라서 다른 값 할당)

2. Static(Lexical) Scope

  • 정의 및 선언의 위치에 따라 스코프가 결정된다.(실행시간과 호출 스택에 무관하다)
  • 변수의 유효범위를 단순히 구조를 보고 빠르게 찾을 수 있다.
  • 정의한 위치의 실행 컨택스트를 참고하여 스코프를 만들어준다(추가)
  • 스코프 체인을 통해 첫번째 → 두번째 → ... → 전역까지 검색을 하면서 찾는다
  • 스코프 체인은 찾는 순간 멈추고 그 값으로 바인딩하여 함수를 실행준비 끝!
  • 전역까지 찾았는데 없으면 undefined으로 값이 정의되지 않았다고 나타낸다.
// 예제 1
// 현재 main 컨텍스트
// scope = [main]
var x = 1;

// foo함수 실행시 실행컨텍스트안에는 scope 생성
// scope는 foo가 선언/정의되는 main 컨텍스트를 뒤로 생성
// scope = [foo, main] 
function foo() {
  var x = 10;
  bar();
}

// bar함수 실행시 실행컨텍스트안에는 scope 생성
// scope = [bar, main]
function bar() {
  console.log(x);
}

foo(); // 1
bar(); // 1

// 예제 2
// scope = [main]
var value = 1;

// scope = [foo, main]
function foo(){
	var value = 2;
	
	// scope = [bar, foo, main]
	function bar(){
		return value;
	}	
	
	console.log(bar());
}

foo() // 2

3. Dynamic Scope

  • 호출 위치에 따라 스코프가 변경된다(실행환경에 따라 변경된다)
  • 스코프 검색시 실행 중인 함수에서 검색을 하고 그 다음 함수를 호출한 컨텍스트를 기준으로 변수를 찾음
  • 자바스크립트에서는 this가 다이나믹 스코프처럼 호출한 실행 컨택스트를 보고 값을 할당한다(확실하지 않음)
var myObject = {
	name : foo,
	sayName : function(){
		console.log(this.name)
	}
}

var otherObject = {
	name : bar
}

otherObject.sayName = myObject.sayName;

myObject.sayName();
otherObject.sayName();

4. Key Point

  • 자바스크립트에서는 this와 변수는 다르게 값이 할당된다.
  • this는 동적(호출한 컨텍스트) 으로 변수는 정적(정의한 컨텍스트)으로 할당된다.