[Javascript는 어떻게 돌아갈까? 1편]JavaScript Execution Context (실행 컨텍스트)란?

TwentyFiveSeven·2021년 1월 22일

ExecutionContext JavaScript

여기 정말 설명이 잘되어있는 곳이 있습니다.
제가 이해하기 힘들었던 부분들을 나름 풀어서 설명해보겠습니다.

자바스크립트는 어떻게 돌아갈까 ?

누군가는 어떻게 자바스크립트가 돌아가는지 궁금해할지 모르고, 누군가는 당연하게 그냥 넘었갔을 것입니다.
자바스크립트는 위 사진과 같은 브라우저 환경에서 돌아갑니다.
아직은 잘 모르겠죠????

이제부터 하나씩 알아봅시다.

이번시간에는 왼쪽에 보이는 JavaScript Engine에 대해 알아보겠습니다.

Heap: 메모리 할당이 일어나는 곳
Call Stack(Execution Context Stack): 코드가 실행될 때 실행 컨텍스트(Context Stack)가 쌓이는 곳

간단하게 설명하자면 이렇게 정의를 내릴 수 있습니다.
그럼 여기서 드는 의문점은 그래서 Execution Context가 뭔데? 입니다.

그래서 Execution Context가 뭔데 ?

ECMAScript에 정의된 내용을 쉽게 정리하자면 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경입니다.

ECMAScript란 : 자바스크립트(Javascript)가 다양한 웹 브라우져에서 자바스크립트(Javascript)가 공통되게 잘 작동하기 위해서 표준 규격이 필요해졌는데, 이 때문에, ECMA 국제 기구에서 “ECMAScript Standard”라 불리는 스크립트 표준이 만들게 되었습니다. 쉽게 정리하자면 ECMAScript는 자바 스크립트를 이루는 코어(Core) 스크립트 언어입니다.
출처: https://takeuu.tistory.com/93 [워너비스페셜]

실행 가능한 코드는 뭐지 ?

실행 가능한 코드는 3가지가 존재합니다.

전역 영역에 존재하는 전역 코드
함수 영역에 존재하는 함수 코드
eval 함수로 실행되는 Eval 코드

하지만 일반적으로 실행 가능한 코드는 전역코드, 함수 코드 입니다.

두개의 실행 가능한 코드는 알겠는데 왜 eval은 일반적으로 실행 가능한 코드가 아닐까요?

eval()은 문자로 표현된 JavaScript 코드를 실행하는 함수입니다.
문자라.. 뭔가 위험할 것같은데..? 맞습니다.
Eval을 사용하지않아야 하는 이유를 꼭 확인해주세요.

이제 실행 가능한 코드의 실행컨텍스트의 환경이 어떻게 이루어졌는지 알아봅시다.

실행 가능한 코드(전역코드, 함수코드)를 만나게 되면 새로운 컨텍스트가 생성됩니다.

전역코드를 만났을 때는 최초 한번만 생성되어 스택에 쌓입니다.
- 애플리케이션이 종료될 때(웹 페이지에서 나가거나 브라우저를 닫을 때)까지 유지됩니다.
함수코드(함수)를 만날 때마다 컨텍스트가 생성되어 스택에 쌓입니다.
- 함수가 종료되면 스택에서 사라집니다.

아래의 그림은 코드가 진행되면서 실행 컨텍스트 스택이 쌓여가는 모습을 보여주고 있습니다.

var one = 'one';

function first () {
  var two = 'two';

  function second () {
    var three = 'three';
    console.log(x + y + z); //output: one two three
  }
  second();
}

first();

간단히 과정을 정리해보자면

1.전역코드로 진입하면서 컨텍스트 생성 및 스택에 추가
2.first() 함수호출 코드를 만나서 함수 컨텍스트 생성 및 스택에 추가
3.second() 함수호출 코드를 만나서 함수 컨텍스트 생성 및 스택에 추가
4.차례대로 컨텍스트파기 및 컨트롤 반환

위와 같은 순서로 이뤄집니다.

실행 컨텍스트 스택에 쌓여지는 실행 컨텍스트는 어떤 것을 가지고 있을까요 ?

실행컨텍스트는 3가지의 프로퍼티를 가지고 있습니다

1.Variable Object
2.Scope Chain
3.this

2.1. Variable Object란 ?

var one = 'one';

function first () {
  var two = 'two';

  function second () {
    var three = 'three';
    console.log(x + y + z); //output: one two three
  }
  second();
}

first();