[JavaScript] 스코프 체인(Scope Chain), 렉시컬환경

스코프란?

Scope의 사전적 의미는 범위이다. 자바스크립트에서 스코프체인의 의미를 생각해보자면 변수가 접근할 수 있는 범위 또는 변수를 찾기위한 규칙 정도로 이해하면 좋을것같은데요! 변수를 찾는데 접근범위랑 규칙이 필요할까 싶어 코드 하나를 가져와 봤습니다.

var a = 333;
var outer = function() {
	var inner = function() {
    	console.log(a);  //(1)
        var a = 222;
    };
    inner();
    console.log(a); //(2)
};
outer();
console.log(a); //(3)

(1),(2),(3)의 결과가 어떻게 나오는지 단번에 아셨나요? 결과는 차례대로 Undefined, 333, 333 인데요, 아쉽게도 저는 틀렸답니다 하하... 그렇다면 왜 이런 결과가 나올까요??

 

1. 렉시컬 환경(Lexical Enviorment)

먼저 스코프의 동작을 이해하기 위해서는 렉시컬 환경(Lexical Enviroment)에 대해서 알아야 하는데요 코드가 시작되면 전역 렉시컬 환경 객체(Global Lexical Enviorment)가 만들어지고 코드를 실행하기 앞서 선언되어 있는 변수와 함수를 먼저 글로벌 환경에 저장합니다. 이때 변수와 함수 선언 방식에 따라 저장방식이 달라지는데요

 

변수가 var로 선언되는 경우는 렉시컬 환경에 변수이름을 key, undefined를 value 값으로 하여 초기화합니다. 이것은 함수가 실행되기 이전에 일어나는 과정인데, 변수 선언이 끌어올려지는 호이스팅이 이러한 과정 때문에 일어나게 됩니다. 그래서 우리는 값을 선언하지 않았어도 에러가아닌 undefined라는 값을 얻게 됩니다. 이러한 이유로 위의 예시는 undefined가 출력된다고 보면 되겠네요.  

 

변수가 let, const로 선언되는 경우는 변수이름을 key, uninitialized를 value로 초기화합니다. 이런경우에도 선언은 되어있지만 var로 선언된 경우와 마찬가지로 선언 줄에 도달하기 전에 값을 참조할 수 없는데 uninitialized 값을 얻는게 아니라 ReferenceError가 발생하게 됩니다.

 

2. 스코프, 스코프 체인(Scope Chain)

outer 함수 내부에 선언된 2번째 콘솔의 경우는 왜 333일까요? inner함수에서 a를 222로 선언했는데 말이죠. 이것은 안에서는 바깥을 볼 수 있지만 바깥에서는 안쪽을 볼 수 없다는 규칙을 기억하면 될 것 같습니다. Outer의 변수 a는 Inner의 변수 a를 볼 수 없기 때문에 바깥으로 a값을 찾으러 떠난답니다..그래서 333이 나오게 되는 것이죠.. 전역에 선언된 a도 같은 규칙으로 생각하시면 될것 같습니다 썬팅된 자동차를 생각하며 금방이해할수 있지 않을까 싶네요.(안보이니깐 궁금하더라구요...)

 

스코프 체인의 규칙의 간단한 예시

 

 

3. 정리하자면

1. 렉시컬 환경에서 함수에 선언된 변수들은 undefined로 초기화 된다. 값이 선언 되기 전에 호출되는 경우 선언된 형에 따라 undefined 또는 에러가 발생한다.

2. 스코프 체인은 안에서 바깥 방향으로 만 참조가 가능하다.