13.1 스코프

• var키워드로 선언된 변수는 같은 스코프 내에서 중복 선언이 허용된다.

13.2 스코프의 종류

• 전역과 지역 2가지
• 전역
  • 전역은 전역스코프를 만든다.
  • 전역변수는 어디서든지 참조할 수 있다.
• 지역
  • 지역이란 함수 몸체 내부를 의미
  • 지역은 지역스코프를 만든다.
  • 지역변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효하다.

13.3 스코프 체인

• 함수의 중첩
  • 함수 몸체 내부에서 함수가 정의된 것
  • 중첩함수와 외부함수
    • 함수 몸체 내부에서 정의한 함수 (중첩함수)
    • 중첩함수를 포함하는 함수 (외부함수)
• 함수는 중첩될 수 있으므로 함수의 지역 스코프도 중첩될 수 있다.
  • 스코프는 함수의 중첩에 의해 계층적인 구조를 가짐 (스코프 체인)
• 변수의 참조는 어떻게 이루어질까?
  • 자바스크립트엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작해, 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다.
  • 상위 스코프에서 선언한 변수를 하위 스코프에서 참조 가능
• 스코프 체인은 물리적으로도 존재할까?
  • Yes!
  • 자바스크립트 엔진은 렉시컬 환경을 실제로 생성한다!
  • 변수 선언이 실행되면 변수 식별자가 이 자료구조(렉시컬 환경)에 key로 등록되고, 변수 할당이 일어나면 변수 식별자에 해당하는 값을 변경한다.
• 결국 스코프 체인은? 실행 컨텍스트의 렉시컬 환경을 단방향으로 연결한 것

13.3.1 스코프 체인에 의한 변수 검색

• 상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조할 수 있지만 하위 스코프에서 유효한 변수를 상위 스코프에서 참조할 수 없다.
• 스코프 체인으로 연결된 계층적인 구조는 상속과 유사. (부모의 자산을 자식이 자유롭게 사용할 수 있지만 자식의 자산을 부모가 사용할 수 는 없다.)

13.3.2 스코프 체인에 의한 함수 검색

• 중첩함수가 있다고 했을 때,

function foo() {
	console.log('global function foo');
}

function bar() {
	// 중첩 함수
	function foo() {
		console.log('local function foo');
	}
	foo(); // (1)
}

bar();

• 함수 선언문으로 함수를 정의하면?
  • 런타임 이전에 함수 객체가 먼저 생성된다.
  • 자바스크립트 엔진은 함수 이름과 동일한 이름의 식별자를 암묵적으로 선언하고 생성된 함수 객체를 할당한다.
• 위 예제의 모든 함수는 ‘함수 이름과 동일한 이름의 식별자’에 해당된다.
• (1)에서 foo 함수를 호출하면 자바스크립트 엔진은 함수를 호출하기 위해 먼저 함수를 가리키는 식별자 foo를 검색한다.
• 결국 함수도 식별자에 해당하기 때문에 식별자에 함수 객체가 할당된 것 외에는 일반 변수와 다를 바가 없다.
• 따라서 위 예제의 실행결과는local function foo

13.4 함수 레벨 스코프

• 지역은 함수 몸체 내부를 의미, 지역은 지역 스코프를 만든다.
  → 코드 블록이 아닌 ‘함수에 의해서’ 지역 스코프가 생성됨!
• C, Java 등 대부분의 프로그래밍 언어는 함수 몸체만이 아니라 모든 코드 블록(if, for, while, try/catch)이 지역 스코프를 만든다. → 블록 스코프
• var로 선언된 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. → 함수 레벨 스코프
  • 코드 블록 내에 선언되었다 할지라도 모두 전역 변수!
  • 따라서 전역 변수는 중복 선언되고 의도치 않은 전역 변수의 값이 재할당되거나 값이 바뀌는 상황 이 발생한다.

    var x = 1;
    if (true) {
    	var x = 10;
    }
    
    console.log(x); // 10

    var i = 10;
    for (var i = 0; i < 5; i++) {
    	console.log(i); // 0 1 2 3 4
    }
    
    console.log(i) // 5

---

13.5 렉시컬 스코프

var x = 1;

function foo() {
	var x = 10;
	bar();
}

function bar() {
	console.log(x);
}

foo();
bar();

상위 스코프 결정 방법은?

1. 함수를 어디서 호출했는지 → 동적 스코프
2. 함수를 어디서 정의했는지 → 렉시컬 스코프 (정적 스코프)
   • 자바스크립트를 비롯한 대부분의 프로그래밍 언어

→ 함수의 상위 스코프는 언제나 자신이 정의된 스코프

예제 실행결과

• bar 함수는 전역에서 정의된 함수이므로, 함수 선언문으로 정의된 bar는 전역 코드가 실행되기 전에 ‘먼저 평가되어 함수 객체를 생성‘한다.
• 이때 생성된 함수 객체는 상위 스코프를 기억한다. (bar의 경우 전역 스코프)
• 따라서 어디에서 호출되든지에 상관없이 전역변수 x의 값 1을 두번 출력한다.