[JS]실행 컨텍스트(Execution Context)

실행 컨텍스트(Execution Context)란 자바스크립트 코드가 scope, hoisting, this, function, closure 등의 동작원리를 담고 실행되는 환경을 말한다.

 

자바스크립트 코드가 실행되는 순간 전역 컨텍스트가 Stack에 쌓이게 되고 다른 함수가 호출될때마다 쌓이게 되는 구조라고 생각하면된다.

 

컨텍스트의 원칙 4가지가 있다.

• 먼저 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 컨텍스트가 생긴다.
• 컨텍스트 생성 시 컨텍스트 안에 변수객체(arguments, variable), scope chain, this가 생성된다.
• 컨텍스트 생성 후 함수가 실행되는데, 사용되는 변수들은 변수 객체 안에서 값을 찾고, 없다면 스코프 체인을 따라 올라가며 찾는다.
• 함수 실행이 마무리되면 해당 컨텍스트는 사라집니다.(클로저 제외) 페이지가 종료되면 전역 컨텍스트가 사라집니다.

위 4가지 원칙을 알 수 있는 코드가 바로 아래에 나와있는 코드이다.

 

var x = 'xxx';

function foo () {
  var y = 'yyy';

  function bar () {
    var z = 'zzz';
    console.log(x + y + z);
  }
  bar(); // 2번째 함수 호출
}
foo(); // 1번째 함수 호출

 

• 코드를 실행하면 먼저 전역 컨텍스트가 생성되고 stack에 쌓이게 된다 이때 전역 컨텍스트에 변수객체에는 argument가 없고 변수만 존재한다 전역 컨텍스트 모든 전역 변수, 전역 함수 등을 포함하는 전역 객체(Global Object / GO)가 된다.
• 이후 foo();가 호출되었을때 foo의 컨텍스트가 생성된 뒤 전역 컨텍스트 위에 쌓이게 되고 변수객체, scope chain, this가 생성된다 이후 함수가 실행된다.
• foo()가 실행되면서 bar()를 호출하였기 때문에 foo()의 컨텍스트 위에 bar()의 컨텍스트가 생성된뒤 쌓이게 되고 foo() 처럼 변수객체, scope chain, this가 생성되고 함수가 실행된다.

3.1 이때 bar()의 console.log(x + y +z)를 실행하면 xxxyyyzzz가 출력된다. 스코프 체인을 모른다면 의아할 것이다.

var 변수의 스코프 범위는 분명 함수인데도 불구하고 어째서 bar 함수내에 없는 변수 var x, y의 값인 xxx,yyy가 출력되는가?

 

답은 bar함수내에서 변수 x, y가 없다면 상위 스코프를 올라가며 해당 변수를 찾게된다.

console.log(x + y + z)에서 x를 찾는다고 가정할때

1. 먼저 bar 함수내에서 변수가 있는지 찾아본다. 없다.
2. 그렇다면 bar 함수의 상위 함수인 foo 함수에서 변수 x를 찾아본다. 없다.
3. foo 함수의 상위 함수인 global에서 찾아본다. x가 있다.

위 처럼 상위 스코프를 포함하는 것을 스코프 체인(scope chain)이라고 말한다.

 

 

이 stack에서 나가는 것은 가장 실행을 먼저 끝낸 순서대로 나가게 된다.

1. bar의 console.log(x + y + z)가 끝나면 bar 컨텍스트가 stack에서 나가게 되고
2. foo또한 bar가 호출이 된뒤에 실행을 끝맞추었기 때문에 stack에서 나가게 된다.

이후 전역 컨텍스트만 남게 되는데 전역 컨텍스트는 브라우저를 종료하지 않는 이상 나가지 못한다.

이렇게 가장 먼저 들어와서 가장 나중에 나가는 구조를 LIFO(Last In First Out, 후입 선출)이라고 한다.

 

정리하자면 실행 컨텍스트는 위 처럼 컨텍스트가 생성되고 변수객체(arguments, variable), scope chain, this가 생성되어 함수를 실행하는 일련의 실행환경을 실행 컨텍스트라고 한다.