Execution Context 실행 컨텍스트

자바스크립트에 동작 원리를 이해하는 중요한 개념중 하나로 실행 컨텍스트에 대해서 알아보자.

실행 컨텍스트는 자바스크립트 코드가 실행 되고 연산되는 범위를 나타내는 추상적인 개념이라고 할수 있다. 실행 컨텍스트를 알고나면 변수와 함수는 어느 범위 안에서 어떻게 사용가능한 것인지 이해하는데 도움이 된다.

자바스크립트 엔진은 코드 실행하기 위해서 아래와 같은 정보가 필요하다.

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

Execution Context 종류

실행 컨텍스트의 종류는 전역 컨텍스트, 함수 컨텍스트 두가지가 있다.

전역 컨텍스트는 함수 내부에서 실행되는 코드를 제외하고 모두 전역 컨텍스트로 볼수 있다. 함수 컨텍스트는 함수가 호출이 될 때 생성되고 함수가 동작을 다하게 되면 소멸된다.

Execution Context 3가지 객체

실행 컨텍스트는 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이지만 객체의 형태로 3가지 프로퍼티를 소유한다.

• 변수 객체(arguments, variable)
• scope chain
• this

아래 코드를 통해서 컨텍스트 종류와 3가지 객체를 살펴보자.

var color = 'black'
function bar (text) {
  console.log(text + color)
}
function foo () {
  var color = 'white'
  bar('color is ')
}
foo() 

// color is black

전역 컨텍스트

{ // 전역 컨텍스트
  '변수 객체': {
    arguments: null,
    variable: [ 'color', 'bar', 'foo' ]
  },
  scopeChain: [ '전역 변수 객체' ],
  this: window
}

foo 함수 컨텍스트

{ // foo 함수 컨텍스트
  '변수 객체': {
    arguments: null,
    variable: [ 'color' ]
  },
  scopeChain: [ 'foo 변수 객체', '전역 변수 객체'],
  this: window
}

bar 함수 컨텍스트

{ // bar 함수 컨텍스트
  '변수 객체': {
    arguments: [{ text: 'color is' }],
    variable: null
  },
  scopeChain: [ 'bar 변수 객체', '전역 변수 객체'],
  this: window
}

bar()는 실행된 곳이 아닌 선언된 위치에서 스코프 체인의 값이 결정 된다. bar()함수 내부에서 color 값을 찾을수 없기에 스코프 체인을 따라 올라가 값을 찾게 되고 전역에 선언된 color값을 참조하게 된다.

실행 컨텍스트와 더불어 호이스팅, 클로저를 학습 한다면 자바스크립트의 많은 문제들을 해결 할 수 있다.