[JS] 스코프 체인

 

스코프 체인에 대해서 살펴보자.

스코프 체인을 알기전에 우리는 '스코프' 를 명확히 알아야 한다. 

 

 

스코프란?

 

스코프는 변수명에 대한 유효범위이다.

⇒ 외부에서 선언한 변수는 외부 뿐 아니라 내부에서도 접근이 가능하지만

내부에서 선언된 변수는 오직 내부에서만 접근할 수 있다.

 

자바스크립트 es6 문법에서는 let과 const의 등장으로

블록에 의해서도 스코프 경계가 발생하게 함으로써 다른 언어와 비슷해졌다.

다만 이러한 블록은 var로 선언한 변수에 대해서는 작용하지 않고,

오직 let, const, strict mode에서의 함수 선언 등에 대해서만 범위로서의 역할을 수행한다.

es6에서는 이 둘의 구분을 위해서 함수 스코프, 블록 스코프라는 말을 사용한다.

 

(함수 스코프, 블록 스코프에 대해서는 var, let, const를 비교하며 설명하였다. 참고)

https://seo0yoon.tistory.com/188

[JS] var, let, const 차이점

 

 

 

스코프 체이닝은 뭘까?

 

: 코드 상에서 어떤 변수에 접근하려고 하면 현재 컨텍스트의 렉시컬 환경을 탐색하고 발견되면

그 값을 반환하고, 발견하지 못할 경우 다시 외부 환경 참조에 담긴 렉시컬 환경을 탐색하는 과정을 거친다.

전역 컨텍스트의 렉시컬 환경까지 탐색해도 해당 변수를 찾지 못하면 undefined를 반환하고,

이렇게 변수명 유효범위를 안에서 부터 바깥으로 차례로 검색해나가는 것을 스코프 체인이라 한다.

 

여기서

외부 환경 참조는 예를들어 a라는 함수 안에 b함수가 있고, b함수 안에 c함수가 있다고 했을 때,

c함수의 외부 렉시컬 환경 참조는 b의 렉시컬 환경을 참조하고, b의 외부 환경 참조는 a의 렉시컬 환경을 참조한다.

이렇게 연결리스트 형태를 띄고, 마지막엔 전역 컨텍스트의 렉시컬 환경이 있을 것이다.

외부 환경 참조는 오직 자신이 선언된 시점의 렉시컬 환경만 참조하고 있으므로

가장 가까운 요소부터 차례대로만 접근 할 수 있고, 다른 순서로는 접근이 불가능하다.

이런 구조적 특성 덕분에 여러 스코프에서 동일한 식별자를 선언한 경우에는

무조건 스코프 체인 상에서 가장 먼저 발견된 식별자에만 접근이 가능하게 된다.

 

 

var a= 1;

var outer = function () {

var inner = function () {

 console.log(a);

 var a = 3;
};

inner();

console.log(a);

};

outer();

console.log(a);

 

outer함수 내부에서는 outer 및 전역 스코프에서 생성된 변수에 접근할 수 있지만

inner 스코프 내부에서 생성된 변수에는 접근하지 못한다. 

inner함수 내부에서는 inner, outer, 전역 스코프 모두에 접근할 수 있다.

 

하지만 스코프 체인 상에 있는 변수라고 해서 무조건 접근이 가능한 것은 아니다.

위 코드 상의 식별자 a는 전역 공간에서도 선언했고, inner함수 내부에서도 선언했다.

inner함수 내부에서 a에 접근하려고 하면 무조건 스코프 체인 상의 첫 번째, 인자, inner 스코프의

렉시컬 환경부터 검색할 수밖에 없다. inner 스코프의 렉시컬 환경에 a 식별자가 존재하므로 스코프 체인을 검색하지 않고, 즉시 inner 렉시컬 환경 상의 a 를 반환하게 된다.

즉 inner 함수 내부에서 a변수를 선언했기 때문에 전역 공간에 선언한 동일한 이름의

a변수에는 접근할 수 없는 셈이다.

이를 변수 은닉화 라고 한다.