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

실행 컨텍스트

실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.
JS는 동일한 환경에 있는 환경 정보들을 모은 실행 컨텍스트를 Call Stack에 쌓아올린 후 실행하여
코드의 환경과 순서를 보장할 수 있게 됩니다.

 

즉, 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경 이라고 말할 수 있다.

실행 가능한 코드 3가지

• 전역 코드 : 전역 영역에 존재하는 코드
• Eval 코드 : eval() 로 실행되는 코드
• 함수 코드 : 함수 내에 존재하는 코드

 

실행 순서

1) 생성 단계 (Creation Phase)

Execution Context 생성. 선언문만 실행해서 Environment Record에 기록합니다.

2) 실행 단계 (Execution Phase)

Environment Record를 참조하거나 업데이트를 진행합니다.

 

---

스코프 vs 실행 컨텍스트

스코프는 실행 컨텍스트 내에 존재한다. 스코프 체인이라는 개념을 통해 실행 컨텍스트 간에 서로 접근 가능한 변수와 함수를 결정한다. 실행 컨텍스트는 스택(Stack) 자료 구조로 관리되며, 새로운 컨텍스트가 생성될 때마다 스택의 맨 위에 새로운 컨텍스트가 추가된다.

 

function first() {
  console.log("first() 실행");

  function second() {
    console.log("second() 실행");

    function third() {
      console.log("third() 실행");
    }

    third();
  }

  second();
}

first();

 

이렇게 JS엔진이 실행되면 전역실행컨텍스트를 생성한 뒤 first(), second(), third() 실행 컨텍스트를 순서대로 쌓아놓는다. JS가 찾아야할 내용이 있으면 마지막으로 쌓인 실행컨텍스트에서 찾아본 뒤 없으면 스코프체인을 타고 밑으로 내려간다.

종료할땐 마지막에 들어온 것 부터 종료한다. => 후입선출(LIFO)

(스택 = Last In First Out)

 

 

함수 표현식 = 변수 호이스팅과 동일하게 동작

test(); // reference error

const test = () => {
	console.log('success test');
}

test2(); // type error : test2 is not a function

var test2 = () => {
	console.log('success test2');
}

 

 

 

함수 호이스팅(함수 선언문)

test(); // success test 문제없이 출력

function test() {
	console.log('success test');
}

success test가 출력되는 이유는 함수는 전역컨텍스트를 실행할때,

함수 선언과 동시에 함수에 있는 일반함수정보 전체가 전부 생성단계에서 저장 된다.

따라서 선언 전에도 함수를 사용할 수 있다.