[Javascript]자바스크립트 실행 컨텍스트 완벽 가이드: 개념부터 실전까지!

자바스크립트 실행 컨텍스트는 자바스크립트가 어떻게 코드를 실행하고 변수 및 함수의 스코프를 관리하는지를 이해하는 데 중요한 개념입니다. 이번 포스팅에서는 실행 컨텍스트의 기본 개념부터 고급 주제까지 단계별로 알아보겠습니다.

≣ 목차

• 실행 컨텍스트의 기본 개념💡
• 실행 컨텍스트의 구성 요소🔍
• 코드 실행 과정에서의 실행 컨텍스트🔄
• 실행 컨텍스트 예제 코드🖥️
• 자바스크립트 엔진의 실행 컨텍스트 관리⚙️
• 실행 컨텍스트와 관련된 오류 해결 방법 🚧

---

01. 실행 컨텍스트의 기본 개념💡

실행 컨텍스트 정의

실행 컨텍스트는 특정 코드가 실행될 때 자바스크립트 엔진이 해당 코드에 대해 생성하는 환경입니다.

실행 컨텍스트의 생성과정

코드가 실행될 때 실행 컨텍스트가 생성되고, 이는 호출 스택(Call Stack)에 쌓입니다.

호출 스택(Call Stack)과의 관계

호출 스택은 실행 컨텍스트가 쌓이는 구조입니다. 호출된 함수들이 순서대로 스택에 쌓이고, 실행이 완료되면 스택에서 제거됩니다.

---

02. 실행 컨텍스트의 구성 요소🔍

변수 객체(Variable Object)

변수 객체는 실행 컨텍스트가 생성될 때 함께 생성되며, 함수 내의 변수 및 함수 선언을 포함합니다.

스코프 체인(Scope Chain)

스코프 체인은 변수 객체를 통해 변수를 검색하는 구조입니다. 이는 현재 실행 컨텍스트와 상위 컨텍스트의 변수 객체를 포함합니다.

this 바인딩(this binding)

this 바인딩은 실행 컨텍스트가 생성될 때 결정됩니다. 이는 호출한 객체를 참조합니다.

스코프 체인과 this에 관한 내용은 아래 포스팅을 참고해 주세요😁

[Javascript]자바스크립트 스코프 완벽 가이드: 기초부터 고급까지

[Javascript]자바스크립트 this 완벽 가이드: 개념부터 활용까지!

---

03. 코드 실행 과정에서의 실행 컨텍스트🔄

전역 컨텍스트(Global Context)

전역 컨텍스트는 자바스크립트 코드가 처음 실행될 때 생성되는 컨텍스트입니다.

함수 컨텍스트(Function Context)

함수 컨텍스트는 함수가 호출될 때마다 생성되는 실행 컨텍스트입니다.

Eval 컨텍스트(Eval Context)

Eval 컨텍스트는 eval() 함수를 호출할 때 생성됩니다.

---

04. 실행 컨텍스트 예제 코드🖥️

// 전역 컨텍스트 예제
var a = 10;
function foo() {
  console.log(a); // 10
}
foo();

// 함수 컨텍스트 예제
function bar() {
  var b = 20;
  function inner() {
    console.log(b); // 20
  }
  inner();
}
bar();

// 중첩 함수와 실행 컨텍스트 예제
function outer() {
  var c = 30;
  function middle() {
    var d = 40;
    function inner() {
      console.log(c, d); // 30 40
    }
    inner();
  }
  middle();
}
outer();

---

05. 자바스크립트 엔진의 실행 컨텍스트 관리⚙️

실행 컨텍스트 생성과 소멸

자바스크립트 엔진은 함수 호출 시 새로운 실행 컨텍스트를 생성하고, 함수 실행이 끝나면 이를 소멸시킵니다.

자바스크립트 엔진의 최적화 기법

자바스크립트 엔진은 실행 컨텍스트를 효율적으로 관리하기 위해 다양한 최적화 기법을 사용합니다.

메모리 관리와 가비지 컬렉션(Garbage Collection)

실행 컨텍스트가 소멸되면, 메모리에서 관련 변수와 함수도 제거됩니다. 이는 가비지 컬렉터가 자동으로 처리합니다.

---

06. 실행 컨텍스트와 관련된 오류 해결 방법🚧

'undefined' 오류 처리

실행 컨텍스트에서 변수 선언이 호이스팅 되지만 초기화되지 않아 발생하는 'undefined' 오류를 처리합니다.

'this' 바인딩 문제 해결

this 바인딩이 예상과 다르게 동작할 때, 명확한 바인딩을 위해 call, apply, bind 메서드를 사용합니다.

스코프 체인 문제 해결

스코프 체인에서 변수 검색이 어려운 경우, 클로저를 활용하여 문제를 해결할 수 있습니다.