소년코딩

함수를 호출할 때 해당 함수의 호출 정보가 차곡차곡 싸여있는 콜 스택(call stack)이라는게 있다.

실행 컨텍스트는 콜 스택에 들어가는 실행 정보 하나와 비슷하다.

자바스크립트에서 실행 컨텍스트는 실행 가능한 자바스크립트 코드 블록이 실행되는 환경이다.

1. 실행 컨텍스트(Excution context)

대부분의 경우 함수로 실행 컨텍스트가 생성되며, 이 코드 블록 안에 변수 및 객체, 실행 가능한 코드들이 들어있다.

이 코드가 실행되면 실행 컨텍스트가 생성되고, 실행 컨텍스트는 스택안에 하나씩 차곡차곡 싸이고, 제일 위에 위치하는 실행 컨텍스트가 현재 실행 되고있는 컨텍스트이다

현재 실행되는 컨텍스트에서 이 컨텍스트와 관련 없는 실행 코드가 실행되면, 새로운 컨텍스트가 생성되어 스택에 들어가고 제어권이 그 컨텍스트로 이동한다.

console.log('This is global  context');
 
function context1() {
     console.log('This is context1');
}
 
function context2() {
     context1();
     console.log('This is context2');
}
 
Context2();
 
/* 출력 결과
/ This is global context
/ This is context1
/ This is context2
*/

2. 실행 컨텍스트 생성

실행 컨텍스트의 구조는 다음과 같다.

function sum(x, y) {
    var a = x, b = y;

    function add() {
        return a + b;
    }
   
    return add();
}

var num = sum(1, 2); // 3

- 실행 컨텍스트 생성 순서

• 변수 객체 생성
• 활성 객체 생성(함수일 경우)
• arguments 객체 생성
• 스코프 정보 생성
• 변수 생성
• this 바인딩
• 코드 실행 생성

1) 변수 객체(Variable object)

변수객체는 실행 컨텍스트에서 사용되는 지역 변수 및 함수 선언을 저장하는 객체이다.

다음은 전역 실행 컨텍스트의 변수 객체의 상태를 나타낸다.

이후 sum() 함수가 실행되었다고 가정하겠다.

2) 활성 객체(Activation object)

함수가 호출되면 실행 컨텍스트가 생성되고, 자바스크립트 엔진은 해당 컨텍스트에서 실행에 필요한 여러가지 정보를 담을 객체를 생성하는데,

이를 활성 객체라고 한다. 이 활성 객체는 매개 변수, arguments 객체, 사용자가 정의한 변수및 객체를 저장한다.

활생 객체는 변수 객체와 다르게 arguments 객체가 있으며, 실행 컨텍스트 안에서 변수 객체로 사용되어진다.

3) arguments 객체 생성

arguments 객체를 생성한다.

앞서 만들어진 활성 객체는 arguments 프로퍼티로 이 arguments 객체를 참조한다.

4) 스코프 정보 생성

현재 컨텍스트의 유효 범위를 나타내는 스코프 정보를 생성한다.

이 스코프 정보는 현재 실행 중인 실행 컨텍스트 안에서 연결리스트와 유사한 형식으로 만들어진다.

현재 컨텍스트에서 특정 변수에 접근해야할 경우 이 리스트를 활용하며 [[scope]], 스코프 체인이라고 부른다.

5) 변수 생성

현재 실행 컨텍스트 내부에서 사용되는 지역 변수의 생성이 활성 객체 내에서 이루어진다.

함수 인자는 각각의 프로퍼티가 만들어져 그 값이 할당되며, 만약 값이 넘겨지지 않았다면 undfined가 할당된다.

주의할 점은 이 과정에서 내부 변수나 내부 함수는 단지 메모리 생성만 하고, 초기화는 각 변수나 함수에 해당하는 표현식이 실행되기 전까지 이루어지지 않는다는 것이다.

따라서 변수 a, b에는 먼저 undefined가 할당된다.

6) this 바인딩

this 키워드를 사용하는 값이 참조된다. 어떤 객체가 참조되는지는 this 바인딩 규칙을 따른다.

7) 코드 실행

이렇게 하나의 실행 컨텍스트가 생성되고, 활성 객체(=변수 객체)가 만들어진 후에, 코드에 있는 여러가지 표현식 실행이 이루어진다.

이렇게 실행되면서 변수의 초기화 및 연산, 또 다른 함수의 실행 등이 이루어진다.

undefined가 할당된 변수 a, b도 이 과정에서 1, 2의 값이 할당된다.

8) 전역 실행 컨텍스트

코드 실행이 완료된후 전역 실행 컨텍스트의 모습이다.

전역 실행 컨텍스트는 전역 객체 하나만을 포함하는 스코프체인이 있다.

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.