[Javascript] 스코프 체인과 렉시컬 스코프

스코프 체인과 렉시컬 스코프

스코프 체인

 

함수는 중첩될 수 있으므로 힘수의 지역 스코프도 중첩될 수 있다. 이는 스코프가 함수의 중첩에 의해 계층적 구조를 갖는다는 것을 의미한다.

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

 

모든 스코프는 위의 그림과 같이 하나의 계층적 구조로 연결된다.

항상 최상위 스코프는 전역 스코프이다.

 

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

 

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

 

자바스크립트 엔진은 절대 하위 스코프로 내려가면서 식별자를 검색하지 않는다.

상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조할 수 있지만 하위 스코프에서 유효한 변수를 상위 스코프에서 참조할 수 없음을 의미한다.

 

 

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

function func2() {
 function func1() {
  console.log('local function func1');
 }

 func1(); // local function func1
}

func2();

결과

함수 선언문으로 함수를 정의하면 런타임 이전에 함수 객체가 먼저 생성된다.

그리고 자바스크립트 엔진은 함수 이름과 동일한 이름의 식별자를 암묵적으로 선언하고 생성된 함수 객체를 할당한다.

 

함수는 식별자에 함수 객체가 할당된 것외에는 일반 변수와 다를 건 없다.

따라서 스코프는 '식별자를 검색하는 규칙' 이라고 표현할 수 있겠다.

 

함수 레벨 스코프

지역은 코드 블록이 아닌 함수에 의해서만 지역 스코프가 생성된다.

대부분의 프로그래밍 언어는 함수 몸체만이 아니라 모든 코드 블록이 지역 스코프를 만들고,

이런 특성을 블록 레벨 스코프라 한다.

 

하지만 var 키워드로 선언된 변수는 오로지 함수의 코드 블록 만을 지역스코프로 인정한다. 

이것은 함수 레벨 스코프 라고한다.

 

var i = 10;

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

console.log(i); // 5

함수 밖에서 var 키워드로 선언된 변수는 코드 블록 내에서 선언되었다 할지라도 모두 전역 변수이다.

for문에서 반복을 위해 선언된 변수 또한 var 키워드로 선언하면 전역 변수가 된다.

 

렉시컬 스코프

var x = 1;

function func1() {
 var x = 10;
 func2();
}

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

func1(); // 1
func2(); // 1

함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정하는 방식을 동적 스코프라 한다.

함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정하는 방식은 정적 스코프라 한다.

자바스크립트는 렉시컬 스코프(정적 스코프)를 따르므로 함수를 어디서 정의했는지에 따라 상위 스코프를 결정한다.

함수가 호출된 위치는 상위 스코프 결정에 영향을 주지 않는다.

 

위 예제의 func2 함수는 전역에서 정의된 함수이므로, func1 함수 안에서 호출하였더라도 전역 스코프를 기억한다.