[자바스크립트] 실행 컨텍스트 (Excution Context) 🗒

안녕하세요~ 이번에는 자바스크립트에서 실행 컨텍스트 (Excution Context) 에 대해 알아보겠습니다. 실행 컨텍스트가 무엇인지, 실행 컨텍스트에 대한 예시 코드를 작성해보면서 이해하는 시간을 가지게 되겠습니다.

목차 📒

1. 실행 컨텍스트

1-1. 실행 컨텍스트란?

1-2. 실행 컨텍스트 구조

1-3. 실행 컨텍스트 예시 코드

서론 🗒

앞서 설명하기전 "실행 컨텍스트" 키워드에 접근해 봅시다.  "실행" 말 그대로 실행하는 것으로 해석이 되고, "컨텍스트"는 번역하면 "맥락"이라고 나옵니다. 그럼 이 키워드를 조합하면 "실행하는 맥락" 이라고 해석이 되겠습니다. 그럼 본격적으로 실행 컨텍스트(Exction Context)을 살펴보시죠

 

 

 

본론 🗒

1. 실행 컨텍스트 (Exction Context) 

 

1-1. 실행 컨텍스트란? 

자바스크립트에서 실행 컨텍스트는  식별자를 좀 더 효율적으로 관리해서 퍼포먼스를 끌어 올렸다고 보면 된다.

 

 

1-2. 실행 컨텍스트 구조🌍

이렇게 실행 컨텍스트는 코드 실행이 시작되면 가장 먼저 전역 실행 컨텍스트가 생성되고, 호출 스택에 쌓입니다. 그 이후 함수가 호출될 때 마다 실행 컨텍스트를 생성합니다. 

 

실행 컨텍스트 순서

1. 전역 실행 컨텍스트 생성 : 코드 실행이 시작될 때 가장 먼저 생성됩니다.
2. 함수 호출 시 실행 컨텍스트 생성 : 함수가 호출될 때마다 새로운 실행 컨텍스트가 생성되고, 호출 스택에 쌓입니다.
3. 실행 컨텍스트 실행 : 호출 스택의 가장 위에 있는 실행 컨텍스트의 코드가 실행됩니다.
4. 실행 컨텍스트 제거 :함수 호출이 완료되면 해당 함수의 실행 컨텍스트는 콜 스택에서 제거된다

 

 

1-3. 실행 컨텍스트 예시 코드

각각 코드 한줄마다 주석으로 설명하였습니다. 

// 첫 번째 에시코드
function foo() {
  // foo 함수의 실행 컨텍스트 생성
  let a = 1; // a 변수에 1 할당
  function foo2() {
    // foo2 함수의 실행 컨텍스트 생성 (foo 함수의 실행 컨텍스트 내부에 생성)
    console.log(b); // b 변수를 찾으나 foo2의 스코프에 없으므로 ReferenceError 발생
    console.log(foo3()); // foo3 함수 호출
  }
  foo2(); // foo2 함수 호출
  let b = 2; // b 변수에 2 할당 (foo 함수의 변수 객체에 저장)
  // foo2 함수 호출 시점에는 b가 undefined 상태였으므로 ReferenceError 발생
}

function foo3() {
  // foo3 함수의 실행 컨텍스트 생성
  return 4;
}

foo(); // foo 함수 호출, foo 함수의 실행 컨텍스트 생성

// 두 번째 예시코드
function boo() {
  // boo 함수의 실행 컨텍스트 생성
  let b = 3; // b 변수 선언 및 할당
  function boo2() {
    // boo2 함수의 실행 컨텍스트 생성
    console.log(b); // 여기서 상위 스코프의 변수를 참조하여 3을 출력
    boo3(); // boo3 함수 호출
    function boo3() {
      // boo3 함수의 실행 컨텍스트 생성 
      console.log(a); // 참조 에러 발생한다 ,  a는 boo3의 스코프에 존재하지 않음
    }
    const a = 2; // a 변수 선언 및 할당, 하지만 const 는 블록 스코프이기 때문에 boo3()에 접근이 불가
  }
  const a = 1; // a 변수 선언 및 할당
  boo2();
}

boo();

// 세 번째 에시코드 
function poo(){
    const num2 = 2; // num2 의 2를 할당 
    function poo2(num2) { // function poo2 함수에 매개변수 num2를 할당한다
        console.log(num2) // 콘솔을 출력하는데 num2에 저장된 2를 출력한다
    }
    const num3 = 5; // num3 의 5를 할당 
    function poo3(num3) { // 함수 poo3에 매개변수 num3을 할당
        poo2(num3) // poo2의 매개변수는 함수의 실행 위치의 정의한 매개변수의 이름으로 전달한 값이 할당되고 초기화된다,
        //  let num3 = 2; 이라는 변수가 초기화된다.          
        console.log(num3); // 현재 함수에 정의된 매개변수에 전달된 값을 호출한다.
    }
    const num4 = 6;
    function poo4(num4) {  
        poo3(num2); // poo3의 매개변수 num2는 상위 스코프에 있는 num2를 참조하여 값을 할당하고 poo3 함수의 실행 위치의 변수를 초기화하여 값을 할당한다.  
    }  
    poo4(); //poo4() -> undefined
}
poo();

결론 🗒

자바스크립트 실행 컨텍스트에 대해 알아보았습니다. 직접 콘솔을 출력하지말고 그림으로 직접 그려봤지만 순서가 헷갈리는 경우가 종종 있었습니다. 전역 컨텍스트가 생성이 되고, 각 함수를 호출을 하게 되면 새로운 실행 컨텍스트가 생성이 되고 함수 호출이 완료되면 해당 함수의 실행 컨텍스트는 콜 스택에서 제거된다는 것을 알게 되었습니다.

 

이상으로 자바스크립트 실행 컨텍스트에 대해 마치겠습니다.   감사합니다😃😃😃