[Javascript] 실행 컨텍스트

Javascript 언어의 가장 중요한 개념 중 실행 컨텍스트를 다뤄보겠습니다. 

 

1. 실행 컨텍스트란?

실행할 코드에 제공할 환경 정보들을 모아놓은 객체를 뜻합니다. 각 환경에 있는 정보를 모아놓은 실행 컨텍스트가 콜스택에 쌓여 실행이 되기 때문에 실행되는 코드의 환경정보와 순서를 보장할 수 있게 합니다. 실행 컨텍스트가 활성화 될 때 호이스팅, 환경정보 구성, this 값이 설정됩니다.

2. 실행 컨텍스트의 구성

1) 변수객체 (variable environment)

현재 컨텍스트 내부에서 사용하는 식별자(변수) 들의 대한 정보가 생성되며, 외부 환경 정보 및 선언 시점의 렉시컬 환경(Lexical Environment)의 스냅샷 정보를 담습니다. 렉시컬 환경이란 변수객체에 호이스팅된 변수 및 함수들의 정보들의 초기 값을 전달하고 이후에는 변수객체의 실시간 변경사항을 업데이트 하여 관리하여 최신화 합니다. 또한 렉시컬환경은 식별자들의 초기 정보를 기억하고 있습니다. 

 

변수객체는 변수와 메개변수 및 인수정보, 함수선언의 정보를 가지는 객체를 가리키는데 이때 Global Context의 객체를  전역객체/GO(Global Object)라고 하고 함수 컨텍스트의 객체를 활성객체/AO(Activation Object)라고 합니다. 

console.log(test) // undefined   
//test는 코드 실행전에 식별자가 정의 되었기 때문에 reference error는 발생하지 않음

let test = 'test'
let test2 = 'test2'
console.log(test2) // 'test2'

 

2) 스코프 체인(Scope Chain)

스코프는 식별자의 탐색 유효범위를 뜻합니다. 자신의 활성객체를 포함하여 상위 컨텍스트 -> 상위 컨텍스트.. -> global Object순서로 연결됩니다. 자신의 활성객체부터 가장 마지막 global까지 탐색 범위를 가지는 것을 Scope Chain이라고 합니다.

 

3) this 바인딩

각 식별자들이 바라봐야 할 this정보를 가지고 있습니다. 함수 호출 패턴에 의하여 결정됩니다.

 

호이스팅이란?

코드 실행 시 변수객체가 생성될 때 선언된 변수와 함수를 가장 위로 끌어 올리는 것을 호이스팅 이라고 합니다. 함수의 경우 선언식과 표현식에 따라 동작이 달라지게 됩니다. 

///// 코드 실행전
foo(); 
bar(); 
console.log(x);

var foo = function() {
    console.log("foo"); 
};
function bar() {
    console.log("bar");
}
var x =  1;

///// 호이스팅 발생 시
var foo; // 변수값 선언
var x; // 변수값 선언
function bar (){  //함수선언
	console.log("bar");
}

//foo(); // Uncaught TypeError: foo is not a function
console.log(foo) // undefined
bar(); // 'bar'
console.log(x); // undefined

foo = function() {
	console.log("foo");
}
x = 1;

 

 

참고사이트

https://velog.io/@yejineee/%EC%8B%A4%ED%96%89-%EC%BB%A8%ED%85%8D%EC%8A%A4%ED%8A%B8%EC%9D%98-%EC%84%B8-%EA%B0%80%EC%A7%80-%EA%B0%9D%EC%B2%B4-VO-SC-this

https://junilhwang.github.io/TIL/Javascript/Domain/Execution-Context/#_4-outerenvironmentreference%E1%84%8B%E1%85%AA-scope