[JavaScript]실행 컨텍스트

*해당 포스팅은 <인사이트 자바스크립트>책 내용을 공부하며 정리한 것입니다.

 

1. 실행 컨텍스트

특정 프로그램(크롬,엑셀...)을 실행하면 프로세스도 같이 실행되듯이 코드를 실행하면 실행 컨텍스트도 같이 실행된다. 코드 진행과 컨텍스트는 불가분의 관계이며, 컨텍스트에는드 실행 순서 등 실행에 필요한 메타 정보를 담고 있다.

컨텍스트 단위는 전역 코드에 대한 컨텍스트, 함수에 대한 컨텍스트, eval() 함수로 실행되는 코드로 나뉜다.

여기서는 전역 코드에 대한 컨텍스트, 함수에 대한 컨텍스트로 살펴 보겠다.

 

console.log("This is global context");

function ExContext1(){
	console.log("This is ExContext1");
}

fucntion ExContext2(){
	ExContext1();
    console.log("This is ExContext2");
}

ExContext2();

/*result
This is global context
This is ExContext1
This is ExContext2
*/

컨텍스트는 실행전 스택으로 쌓이고 후입선출로 하나씩 실행된다. 위 코드로 순서를 살펴보면,

가장 먼저 전역 컨텍스트가 만들어지고  ExContext2() 컨텍스트, ExContext1() 컨텍스트가 만들어 지고 나서 실행과 종료를 거친 후 전역 실행 컨텍스트의 실행이 완료되면 모든 실행이 끝난다. 

 

실행 컨텍스트 고려한 코드 실행 과정은 다음과 같다.

1) 활성 객체 생성

2) arguments 객체 생성

3) 스코프 정보 생성

4) 변수 생성

5) this 바인딩

6) 코드실행

 

1) 활성 객체 생성

- 실행에 필요한 메타정보를 담고 있는 객체로, 사용자가 정의한 변수 및 객체를 저장하며 새로 만들어진 컨텍스트로 접근 가능하게 되어 있다.

 

2) arguments 객체 생성

- arguments 객체는 함수를 호출할 때 넘긴 인자들이 배열 형태로 저장된 객체를 의미하며, 1)에서 만들어진 활성 객체가 arguments 객체를 참조한다.

구체적으로 살펴보기 위해 아래처럼 add함수에 arguments객체를 찍어보면,

결과 값은 아래와 같다.

arguments객체를 살펴보면, 전달된 인자 값, 인자의 개수(length), 함수의 참조값(callee)를 확인할 수 있다.

 

3) 스코프 정보 생성

- 컨텍스트의 유효 범위를 나타내는 스코프 정보를 생성한다. 유효 범위 안에서 변수와 함수가 존재한다. 예를 들어 C언어의 경우 if문,for문, 함수 안에서 선언된 변수는 해당 블록 안에서만 유효하므로 밖에서 접근할 수 없다.

그러나 자바스크립트의 경우 for문,if문은 유효 범위가 없고 함수만이 유효 범위를 갖는다. 함수의 유효범위는 [[scope]]프로퍼티에서 정의되는데 각각의 함수는 [[scope]]프로퍼티로 컨텍스트의 스코프 체인을 참조한다. 정리하면 실행 컨텍스트는 실행된 함수의 [[scope]]프로퍼티를 기반으로 새로운 스코프 체인을 만든다.  

 

4) 변수 생성

- 코드 실행에 사용되는 변수의 생성이 이루어진다. 함수 인자의 경우 각각의 프로퍼티가 만들어지고 그 값이 할당된다. 만약 값이 없다면 undefined가 할당 된다.

 

5) this 바인딩

- this 키워드를 사용하는 값이 할당된다. 여기서 this가 참조하는 객체가 없으면 전역 객체를 참조한다.

 

6) 코드 실행

코드 실행 ~^_^