Javascript - 실행컨텍스트 완벽하게 이해하기

자바스크립트 실행컨텍스트 이해하기

 

자바스크립트는 웹 개발에 널리 사용되는 프로그래밍 언어입니다. 이 글에서는 자바스크립트의 핵심 개념 중 하나인 실행 컨텍스트에 대해 설명하고, 이를 이해하는 것이 왜 중요한지 알아봅니다.

 

실행 컨텍스트 개요

실행 컨텍스트(Execution Context)는 자바스크립트 코드가 실행되는 환경을 말합니다. 각 실행 컨텍스트는 해당 환경의 변수, 함수, 스코프, this 바인딩 등에 대한 정보를 포함합니다. 코드 실행 시, 실행 컨텍스트 스택에 쌓이며, 현재 실행 중인 컨텍스트가 가장 위에 위치합니다.

 

실행 컨텍스트 생성 과정

실행 컨텍스트는 다음 세 단계를 거쳐 생성됩니다.

1. 렉시컬 환경(Lexical Environment) 생성: 변수와 함수를 저장하는 환경을 생성합니다. 이 과정에서 선언문이 실행되며, 변수는 undefined로 초기화됩니다.
2. 변수 환경(Variable Environment) 생성: 실행 컨텍스트의 변수 객체를 위한 별도의 렉시컬 환경을 생성합니다.
3. this 바인딩: 함수 호출 방식에 따라 this의 값이 결정됩니다. 전역 컨텍스트에서는 this가 전역 객체를 가리키며, 함수 내에서는 호출 방식에 따라 다르게 바인딩됩니다.
4. 렉시컬 환경과 스코프 체인

렉시컬 환경은 식별자와 그에 상응하는 값을 저장하는 구조입니다. 코드가 실행될 때, 식별자를 참조하면 렉시컬 환경에서 해당 식별자의 값을 찾습니다. 렉시컬 환경은 자바스크립트의 스코프 체인을 구성하는 요소로, 현재 실행 컨텍스트의 렉시컬 환경부터 시작하여 상위 렉시컬 환경을 차례대로 탐색합니다.

 

호이스팅

호이스팅(호isting)은 실행 컨텍스트가 생성되는 과정에서 변수 선언과 함수 선언이 렉시컬 환경의 맨 위로 끌어올려지는 현상을 말합니다. 이로 인해 변수나 함수를 선언 전에 참조하거나 호출해도 에러가 발생하지 않습니다. 단, 변수의 경우 undefined로 초기화되므로 할당 전에 참조하면 undefined가 반환됩니다. 함수 선언은 선언 자체가 끌어올려지므로 호출 가능하지만, 함수 표현식은 호이스팅되지 않습니다.

console.log(myVar); // undefined
console.log(myFunction()); // "Hello, World!"

var myVar = 10;

function myFunction() {
  return "Hello, World!";
}

 

클로저

클로저(Closure)는 내부 함수가 외부 함수의 변수에 접근할 수 있는 개념입니다. 자바스크립트의 함수는 일급 객체로, 다른 변수에 할당하거나 다른 함수의 인자로 전달할 수 있습니다. 클로저를 사용하면, 외부 함수의 실행이 종료된 이후에도 외부 함수의 변수에 접근할 수 있습니다. 이를 통해 모듈 패턴, 캡슐화 등의 구현이 가능해집니다.

function outerFunction() {
  var count = 0;

  function innerFunction() {
    count++;
    console.log(count);
  }

  return innerFunction;
}

const counter = outerFunction();
counter(); // 1
counter(); // 2
counter(); // 3

 

정리

이 글에서는 자바스크립트 실행 컨텍스트의 개념과 렉시컬 환경, 스코프 체인, 호이스팅, 클로저 등과 관련된 주요 개념을 살펴보았습니다. 이러한 개념들을 이해하고 활용하면, 자바스크립트 코드를 더욱 효과적으로 작성하고 디버깅할 수 있습니다.