[Javascript] Javscript 동작(2)

JS(ko.wikipedia.org)

 

이전 글에서 Javascript가 어떻게 동작하는지를 알아봤습니다. JS engine이 create phase에서 execution context라는 것을 만듭니다. 처음 코드를 접했을 때는 global execution context를 만들어 execution stack(call stack)에 push를 하고 함수가 호출될 때마다 각 함수만의 execution context를 만들어서 stack에 push합니다. 그 후에 실행을 시키고 stack에서 pop을 하게 됩니다.

 

Execution context & Execution stack

 

 

저번 글에서 creation phase 부분에서 execution context를 생성한다고 하였고 이번 글에서는 execution phase에 대해서 이야기해보려고 합니다. 이전 글을 못 보셨으면 먼저 읽고 오시길 바랍니다.

2022.03.20 - [웹/Javascript] - [Javascript] Javascript 동작(1)

[Javascript] Javascript 동작(1)

 

Execution Phase

 실행 단계에서는 모든 변수에 대해서 할당이 완료되고 코드가 최종적으로 실행이 됩니다. 말 그대로 실행을 하는 단계입니다.

 

 

코드를 예시로 얘기해보겠습니다.

 

let a = 20;
const b = 30;
var c;

function multiply(e, f) {
	var g = 20;
	return e * f * g;
}

c = multiply(20, 30);

 위의 코드가 실행이 되면 JS engine은 global execution context를 생성합니다. 생성 단계(Creation Phase)에서 다음과 같은 global execution context가 생성이 됩니다.

 

GlobalExectionContext = {

  LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Object",
      // Identifier bindings go here
      a: < uninitialized >,
      b: < uninitialized >,
      multiply: < func >
    }
    outer: <null>,
    ThisBinding: <Global Object>
  },
  
  VariableEnvironment: {
    EnvironmentRecord: {
      Type: "Object",
      // Identifier bindings go here
      c: undefined,
    }
    outer: <null>,
    ThisBinding: <Global Object>
  }
}

 위의 global execution context를 보면 a, b는 <uninitialized>이고 c는 undefined로 되어있는데 이건 나중에 Hoising에서 알게 됩니다. c는 var로 정의했기에 Lexical environment가 아닌 Variable environment의 environment record에 바인딩 됩니다.

 

 

실행 단계를 거치면 모든 변수들에 할당이 완료됩니다. 그럼 위의 global execution context는 다음과 같이 변합니다.

GlobalExectionContext = {

LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Object",
      // Identifier bindings go here
      a: 20,
      b: 30,
      multiply: < func >
    }
    outer: <null>,
    ThisBinding: <Global Object>
  },
  
VariableEnvironment: {
    EnvironmentRecord: {
      Type: "Object",
      // Identifier bindings go here
      c: undefined,
    }
    outer: <null>,
    ThisBinding: <Global Object>
  }
}

 

 multiply(20, 30) 함수를 마주쳤을 때, 새로운 execution context가 생성이 됩니다. 생성 단계를 통해 생성된 function execution context는 다음과 같습니다.

 

FunctionExectionContext = {

LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Declarative",
      // Identifier bindings go here
      Arguments: {0: 20, 1: 30, length: 2},
    },
    outer: <GlobalLexicalEnvironment>,
    ThisBinding: <Global Object or undefined>,
  },
  
VariableEnvironment: {
    EnvironmentRecord: {
      Type: "Declarative",
      // Identifier bindings go here
      g: undefined
    },
    outer: <GlobalLexicalEnvironment>,
    ThisBinding: <Global Object or undefined>
  }
}

 

이 후에 위의 execution context는 실행 단계를 통해 변수들의 할당이 완료될 것입니다. function execution context는 다음과 같이 바뀝니다.

 

FunctionExectionContext = {

LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Declarative",
      // Identifier bindings go here
      Arguments: {0: 20, 1: 30, length: 2},
    },
    outer: <GlobalLexicalEnvironment>,
    ThisBinding: <Global Object or undefined>,
  },
  
VariableEnvironment: {
    EnvironmentRecord: {
      Type: "Declarative",
      // Identifier bindings go here
      g: 20
    },
    outer: <GlobalLexicalEnvironment>,
    ThisBinding: <Global Object or undefined>
  }
}

 

위의 execution context가 실행이 된 후 return value는 c 에 저장이 됩니다. 그럼 global execution context에 있는 c의 값이 update되고 나머지 코드 실행이 끝나면 프로그램이 종료됩니다.

 

 

 

 

※ 해당 글은 밑에 blog를 번역하며 ES6문서를 보고 내용들을 추가하였습니다. 틀린 점이나 궁금한 점이 있으면 댓글 달아주세요

 

참고자료

https://blog.bitsrc.io/understanding-execution-context-and-execution-stack-in-javascript-1c9ea8642dd0

Understanding Execution Context and Execution Stack in Javascript

https://262.ecma-international.org/6.0/#sec-execution-contexts

ECMAScript 2015 Language Specification – ECMA-262 6th Edition