실행 컨텍스트(execution context)

실행 컨텍스트(execution context)는 쉽게 보면 코드가 실행되고 있는 구역,범위에 대한 개념정도로 볼 수 있다.
실행 컨텍스트는 실행할 코드에 제공할 환경정보들을 모아놓은 객체이다.
ECMAScript 스펙에서는 실행 컨텍스트를 ‘실행 가능한 코드를 형상화하고 구분하는 추상적인 개념’이라고 정의 한다.

자바스크립트 엔진은 코드를 실행하기 위해 실행에 필요한 여러가지 정보들을 알고 있어야 한다고 한다. 실행에 필요한 정보들은 아래와 같다.

  • 변수: 전역변수, 지역변수, 매개변수, 객체의 프로퍼티
  • 함수 선언
  • 변수의 유효범위(Scope)
  • this

코드를 실행하면 ‘전역 컨텍스트(Global execution Context)’가 생깁니다. 전역 컨텍스트는 브라우저가 종료 될 때까지 유지됩니다.
특정 ‘함수’안에서 실행되는 코드가 아니라면 코드는 전역 컨텍스트에서 실행됩니다.

함수가 호출 될때 해당 함수에 대한 실행 컨텍스트가 생성된다.(Functional Execution Context) 함수들은 각각 자신만의 실행 컨텍스트를 가지지만
이를 함수가 호출 되어야 만들어 집니다.

예제로 한번 보겠습니다.

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
// (1)
var a = 1
function outer() {
function inner() {
console.log(a) // undefined
var a = 3
console.log(a) // 3
}
inner() // (2)
console.log(a) // 1
}
outer() // (3)
console.log(a) // 1

위의 코드의 실행 순서를 따라가 보면

  • 처음에 자바스크립트 코드를 실행하면(1) 전역 컨텍스트가 콜 스텍에 담깁니다.
  • 순차적으로 코드를 읽다가 (3)에서 outer 함수를 호출하면
  • outer함수에 대한 실행 컨텍스트를 생성한 후 콜 스텍에 담습니다.
  • 콜 스텍에 새로운 컨텍스트가 놓인상태가 됐으므로 전역 컨텍스트와 관련된 코드 실행을 일시 중단하고 outer 함수에 대한 실행 컨텍스트를 실행합니다.
  • outer 함수 내부의 코드들을 순차로 실행합니다.
  • (2)에서 inner 함수가 호출되서 inner함수의 실행 컨켄스트가 콜 스택의 가장 위에 담기면
  • outer 컨텍스트와 관련되 코드의 실행을 중단하고
  • inner함수 내부의 코드를 순서대로 진행합니다.
  • inner함수 내부의 값을 출력하고 나면 inner함수의 실행이 종료되면서 inner 실행 컨텍스트가 콜 스택에서 제거됩니다.
  • inner컨텍스트의 의해 중단되었던 outer (2)줄 다음부터 실행됩니다.
  • a 변수 값을 출력하고 outer함수의 실행이 종료되며 outer실행 컨텍스트가 종료되며 콜 스택에서 제거됩니다.
  • 중단되었던 전역 컨텍스트 (3)의 다음 줄부터 실행됩니다.
  • a 변수의 값이 출력되고 전역 컨텍스트도 콜 스택에서 제거 됩니다.

스택구조를 잘 살펴보면 한 실행 컨텍스트가 콜 스택의 맨위에 쌓이는 순간이 곧 현재 실행할 코드에 관여하게 되는 시점임을 알 수 있습니다.
기존의 컨텍스트는 새로 쌓인 컨텍스트보다 아래에 위치 할 수 밖에 없기 때문입니다. 이렇게 어떤 실행 컨텍스트가 활성화될 때 자바스크립트 엔진은 해당 컨텍스트에 관련된 코드들을 실행하는 데 필요한 환경 정보들을 수집해서 실행 컨텍스트 객체에 저장합니다.

실행 컨텍스트의 3가지 객체

실행 컨텍스트 자체는 코드를 형상화하고 구분하는 추상적인 개념이지만 물리적으로는 객체의 형태를 가지며 3가지 프로퍼티를 가진다.

Variavle Object (VO / 변수객체)

변수, 매개변수, 인수정보, 함수 선언의 정보를 담고있는 객체
컨텍스트 내부 전체를 처음부터 끝까지 쭉 훑어나가며 순서대로 정보를 수집
전역 실행 컨텍스트와 함수 실행 컨텍스트 일때 내용이 다르다
전역 컨텍스트의 경우 - 유일하며 최상위에 위치하고 모든 전역 변수, 전역 함수 등을 포함하는 전역 객체(Gloval Object / GO)
함수 컨텍스트의 경우 - Acrivation Object(AO / 활성 객체)를 가리키며 매개변수와 인수들의 정보를 배열의 형태로 담고있는
arguments object가 추가됨

호이스팅

변수를 선언하고 초기화 했을때 선언 부분이 코드의 최상단으로 끌어올려지는 현상.
선언부만 올라가므로 최기화 또는 대입 부분은 그대로 남아있음
함수 선언식의 경우에는 함수 전체가 통째로 끌어올려짐

javascript
1
2
3
4
5
6
7
8
function a (x) {
console.log(x);
var x;
console.log(x);
var x = 2;
console.log(x);
}
a(1)

위의 코드를 호이스팅 개념처럼 변경하면

javascript
1
2
3
4
5
6
7
8
9
10
11
12
function a () {
var x;
var x;
var x;

x = 1
console.log(x);
console.log(x);
x = 2;
console.log(x);
}
a()

인자들과 함께 함수를 호출한 경우의 동작은 전달된 인자를 arguments object에 담는 것을 제외하면 코드내부에서 변수를 선언한 것과 다르지 않아서 함수 내부의 코드 최상단에서 선언 및 할당이 이뤄진것으로 간주하여 적용

javascript
1
2
3
4
5
6
7
8
function a () {
console.log(b);
var b = 'bbb';
console.log(b);
function b () {};
console.log(b);
}
a();

위의 코드를 호이스팅 개념처럼 변경하면

javascript
1
2
3
4
5
6
7
8
9
function a () {
var b;
function b () {};
console.log(b);
b = 'bbb';
console.log(b);
console.log(b);
}
a();

함수 선언식의 경우는 식이 통째로 끌어올려지는것에 주의합니다.

Scope Chain(SC)

스코프 체인은 일종의 리스트, 전역 객체와 중첩된 함수의 스코프의 레퍼런스를 차례로 저장
해당 전역 또는 함수가 참조 할 수 있는 변수, 함수 선언 등의 정보를 담고있는 전역 객체 또는 활성 객체의 리스트
현재 실행 컨텍스트의 활성 객체로 시작해서 순차적으로 상위 컨텍스트의 활성 객체를 가리키며 마지막에는 전역 객체를 가리킴
스코프 체인 상에서 가장 먼저 발견된 식별자에만 접근 가능하며 스코프 체인은 식별자 중에서 변수를 검색하는 메커니즘

javascript
1
2
3
4
5
6
7
8
9
10
11
var a = 1;
var outer = function () {
var inner = function () {
console.log(a);
var a = 3;
};
inner();
console.log(a);
};
outer();
console.log(a);

this value

this 프로퍼티에는 this 값이 할당 됨
this에 할당되는 값은 함수 호출 패턴에 의해 결정된다.

Reference

댓글

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×