[JavaScript] 실행 Context와 Scope

자바스크립트 엔진이 어떻게 동작 하는지 알아보자.

 

실행 컨텍스트 (Execution Context)

실행 컨텍스트 스택 (call stack) (출처 엘리스SW트랙)

자바스크립트 엔진은 실행 컨텍스트 스택의 흐름에 따라 동작한다.

실행 컨텍스트란? 코드의 흐름과 변수 따위 등 함수 동작에 필요한 환경 정보가 담긴 객체를 지칭한다.

실행 컨텍스트 (출처 엘리스SW트랙)

 

This

this는 기본적으로 window를 가리키고, console.log와 같은 함수는 window에 포함되어 있다. 프로그래밍에서 의도한 위치의 변수나 함수를 사용하기 위해 this를 적절하게 사용해야한다.

 

[JavaScript] This 포인터 이해하기

 

Variable Object

스코프(실행되는 환경 혹은 범위)에 있는 변수들을 담고 있다. 스코프가 존재하지 않는다면 변수 명이 같은 변수가 2개 이상 존재할 때 충돌을 일으킬 수 있다.

 

Scope Chain

다음에 연속적으로 실행되어야 할 동작을 담고 있다.

 

 

동작 흐름

실행 컨텍스트 스택이 만들어지고 실행되는 과정은 다음과 같다.

1. 자바스크립트 엔진이 코드의 유무와 관련 없이 전역 실행 컨텍스트를 생성한다.
2. 함수가 호출되게 될 때, 함수의 환경 정보들을 모아 실행 컨텍스트를 생성, 스택에 Push한다.
3. 맨 마지막으로 실행된 print 함수(예시 참고)의 실행 컨텍스트는 변수 v를 가지고 있고, 해당 실행 컨텍스트에서만 사용된다.
4. print 함수가 생성할 다음 실행 컨텍스트가 없으므로 print 함수를 실행하고, 끝나면 스택에서 Pop한다.
5. 스코프 체인을 따라 스택이 순차 실행된다. 모두 실행이 완료되면 실행 컨텍스트로 돌아온다.

 

 

실행 컨텍스트 생성 과정

1. 생성 단계에서 엔진이 변수 선언을 읽는다. 함수 선언문, 함수 표현식, 변수 등을 읽어 실행 컨텍스트에 저장한다. 변수는 실행 컨텍스트의 렉시컬 환경 Lexical Environment을 구성하고 함수 전체가 기록되며 이외의 값은 기록되지 않는다.
2. 실행 단계에서 변수 값을 할당한다. 변수에 값을 할당하는 구문을 만나면 실행 컨텍스트에 값을 저장한다.

 

 

Lexical Environment

렉시컬 환경은 스코프의 변수와 함수를 매개변수로 저장하는 객체이다. 코드가 실행 되면서 참조가 필요한 변수 값이 있을 때, 이 객체에서 식별자 이름을 Key로 찾는다. 함수의 고유한 영역을 구성하는 환경이라고 할 수 있다.

function print(v) {
	let id = 'a5vf32s';
    console.log(`${id} is running : ${v}`);
}

print()

//Lexical Environment's record
{v: undefined, a: 'a5vf32s' };

 

 

Lexical Scope

자바스크립트는 렉시컬 스코프를 따르는데 함수 스코프를 생성될 때 어디서 호출 되었는지에 따르는 것이 아닌, 어디서 생성 되었는지를 따르는 것이다. 정적 스코프(Static scope)라고도 부른다. 렉시컬 환경이 함수의 고유한 영역을 구성하고, 이러한 특성을 따르는 것이다.

var value = 5;

function first() {
  var value = 10;
  second();
}

function second() {
  console.log(value);
}

first(); // 5
second(); // 5

위의 코드는 first() 내에 선언된 value는 second() 스코프의 value가 되지 않음을 보여주고 있다.