실행 컨텍스트 (execution context)

 

Execution Context

실행 컨텍스트는 실행환경입니다.

어떤 실행환경일까요? 코드가 실행되기 위한 정보를 담고있는 환경입니다.

 

 

두가지의 실행환경이 있습니다.

Global Context   /   Functional Context

전역 컨텍스트 (Global Context)

처음 코드를 실행시키는 순간에 생기는 컨텍스트로서

모든 것을 관리하여 페이지가 종료될때 사라집니다.

 

함수 컨텍스트 (Functional Context)

함수를 호출할 때 생성되고, 함수의 모든 동작이 종료되면 사라집니다.

(closure는 예외) 

 

 

컨텍스트의 정리

1. 코드를 실행하면 전역 컨텍스트가 생성되고, 함수를 호출할 때마다 함수 컨텍스트가 생성됩니다.

2. 컨텍스트가 생성될때 안에는   변수 객체 (arguments, variable)    스코프 체인 (scope chain)     this  가 생성됩니다. 

3. 함수가 실행될때 사용되는 변수를 함수 컨텍스트의 변수 객체에서 찾고 없다면, 스코프 체인을 따라 올라가서 찾습니다.

4. 함수의 실행이 끝나면 컨텍스트가 사라지고, 페이지가 종료되면 전역컨텍스트가 사라집니다. 

 

 

 

컨텍스트의 3가지 객체

  변수 객체 (arguments, variable)  

실행 컨텍스트가 생성이 되면 실행에 필요한 정보들이 담길 객체를 생성합니다.

variable, parameter & arguments, 함수 선언

 

 스코프 체인 (scope chain)  

전역 객체와 함수의 스코프 리스트를 저장하고 있습니다.

실행 컨텍스트가 참조할 수 있는 변수, 함수 선언들의 정보를 가르키는 리스트입니다.

자바 스크립트가 스코프 체인을 통해서 정적 스코프를 파악하여 참조를 확장시킵니다.

 

  this  

this 의 값은 5가지 패턴으로 할당됩니다.

전역 (global)   함수 호출 (function invocation)   메서드 호출 (method invocation)

[call, apply, bind] 호출   new 로 생성된 객체(construction)

 

 

 

 

예시 )

let eng = 'Hello';

function says (kor) {
  console.log(eng + ' ' + kor);
}

function greetings() {
  let kor = '안녕하세요';
  says(kor);
}

greetings()

 

Global Context

전역 컨텍스트가 생성되면 두번째의 원칙에 따라서 변수 객체, 스코프 체인, this 가 들어옵니다.

전역 컨텍스트에 argument 는 없고, variable 은 변수들 입니다. scope chain 은 자기 자신입니다.

그래서 this 는 다른 설정이 없다면 window 입니다. 만약에 this 를 바꾸고 싶다면 new 를 호출합니다.

 

//객체형식으로 표현

'전역 컨텍스트': {
  변수객체: {
    arguments: null,
    variable: [{ eng: 'Hello' }, { greetings: Function }, { says: Function }],
  },
  scopeChain: ['전역 변수객체'],
  this: window,
}

 

Function Context

greetings 함수를 호출하는 순간 함수 컨텍스트가 생성됩니다. 전역 컨텍스트는 그대로 존재하는 상태입니다.

함수 컨텍스트에 argument 는 없고, variable 은 kor 입니다. chain scope는 greeting 변수객체와 전역 변수객체입니다.

this 는 설정해준 것이 없으므로 window 입니다.

 

//객체형식으로 표현

'greetings 컨텍스트': {
  변수객체: {
    arguments: null,
    variable: [{ kor: '안녕하세요' }],
  },
  scopeChain: ['greeting 변수객체', '전역 변수객체'],
  this: window,
}

 

greeting 함수에서 says 함수를 호출되면 함수 컨텍스트가 생성됩니다. 이전의 컨텍스트들은 존재하는 상태입니다.

함수 컨텍스트에 argument 가 kor 입니다. variable 은 없습니다. chain scope는 says 변수객체와 전역 변수객체입니다.

says함수가 greeting에서 호출되어도 선언 시에 정적 스코프에 따라서 says 스코프는 전역 컨텍스트의 scope chain 입니다. this는 window입니다.

 

//객체형식으로 표현

'says 컨텍스트': {
  변수객체: {
    arguments: [{ kor: '안녕하세요' }],
    variable: null,
  },
  scopeChain: ['says 변수객체', '전역 변수객체'],
  this: window,
}

// says 함수 실행
console.log(eng + ' ' + kor);	 // eng -> 전역 변수객체, kor -> arguments

 

says 함수가 실행되며 종류 후 says 컨텍스트가 사라지고, greetings 함수의 실행이 종료됩니다. greetings 컨텍스트가 사라지고, 전역 컨텍스트도 사라집니다.