[JS] 스코프 체인, 렉시컬 스코프, 중첩함수에 대하여

1. 중첩함수와 외부함수

---

함수는 전역에서 정의할 수도 있고, 내부에서 정의할 수도 있다. 함수 몸체 내부에서 함수가 정의된 것을 '함수의 중첩'이라고 한다.

그리고 함수 몸체 내부에서 정의한 함수를 '중첩함수(nested function)'
중첩함수를 포함하는 함수를 '외부함수(outer function)'라고 한다.

 

함수는 중첩될 수 있으므로, 지역 스코프도 중첩될 수 있다.

이는 스코프가 함수의 중첩에 의해 계층적 구조를 갖는다는 것을 의미한다.

다시 말해 중첩 함수의 지역 스코프는 중첩 함수를 포함하는 외부 함수의 지역 스코프와 계층적 구조를 갖는다.

 

이때 외부 함수의 지역 스코프를 중첩 함수의 상위 스코프라 한다.

// 전역 스코프
var x = 'global x'
var y = 'global y'

// 지역 스코프(outer)
function outer(){
  var z = 'outer z';

  // 지역 스코프(inner)
  function inner(){
    var x = 'inner x';

    console.log(x); // 1)
    console.log(y); // 2)
    console.log(z); // 3)
  }

 

위 코드에서는 outer 함수의 지역과 inner 함수의 지역, 그리고 전역지역이 있다.
이때 outer 함수가 만든 지역 스코프는 inner 함수가 만든 지역 스코프의 상위 스코프다.

그리고 outer 함수의 지역 스코프의 상위 스코프는 전역 스코프다.

 

2. 스코프체인

---

이처럼 모든 스코프는 하나의 계층적 구조로 연결되며, 모든 지역 스코프의 최상위 스코프는 전역 스코프다.

이렇게 스코프가 계층적으로 연결된 것을 '스코프 체인'이라고 한다.

위 그림에서는 전역 스코프, outer 함수의 지역 스코프, inner 함수의 지역 스코프로 이뤄진다.

 

변수를 참조할 때는 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색(identifier resolution)한다.

 

3. 검색예시

---

1) x 변수를 참조하는 코드의 스코프인 inner 함수의 지역 스코프에서 x 변수가 선언되었는지 검색 -> inner 함수에 x 변수 존재함 -> 검색된 변수 참조
2) y 변수를 참조하는 코드의 스코프인 inner 함수의 지역 스코프에서 y 변수가 선언되었는지 검색 -> inner 함수에 y 변수 존재 X -> 상위 스코프인 outer 함수에서 검색 -> outer 함수에 y변수 존재 X -> 상위 스코프인 전역(global)스코프에서 검색 -> 전역 스코프에 y 변수 존재함 -> 검색된 변수 참조
3) z 변수를 참조하는 코드의 스코프인 inner 함수의 지역 스코프에서 z 변수가 선언되었는지 검색 -> inner 함수에 z 변수 존재 X -> 상위 스코프인 outer 함수에서 검색 -> outer 함수에 z변수 존재함 -> 검색된 변수 참조

 

절대 하위 스코프로 내려가면서 식별자를 검색하는 일은 없다. 이는 상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조할 수 있지만 하위스코프에서 유효한 변수를 상위 스코프에서 참조할 수 없다는 것을 의미한다.

 

4. 렉시컬 스코프

---

var x = 1;

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

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

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

 

함수의상위 스코프가 결정되는 패턴을 2가지로 예측할 수 있다

1) 함수를 어디서 호출했는지에 따라 함수의 상위 스코프 결정 ( 동적 스코프 )

2) 함수를 어디서 정의했는지에 따라 함수의 상위 스코프 결정 ( 렉시컬 스코프, 정적 스코프 )

 

동적스코프는 함수를 정의하는 시점에는 함수가 어디서 호출될지 알 수 없다.

따라서 함수가 호출되는 시점에 동적으로 상위 스코프를 결정해야 하기 때문에 동적 스코프라고 부른다.

 

정적 스코프 , 즉 렉시컬 스코프는 동적 스코프처럼 상위 스코프가 동적으로 변하지 않고 함수 정의가 평가되는 시점에 상위 스코프가 정해진다. 대부분의 언어를 비롯해 자바스크릅티는 렉시컬 스코프를 따른다.

 

이처럼 함수의 상위 스코프는 함수 정의가 실행될 때 정적으로 결정된다.