자바스크립트 해부: Execution Contexts, Hoisting, Scopes & Closures

Source: Dev.to

실행 컨텍스트란 무엇인가?

실행 컨텍스트는 JavaScript 엔진이 코드 복잡성을 관리하도록 도와주며, 함수가 작성 복잡성을 관리하는 방식과 유사합니다. 엔진은 두 가지 유형의 컨텍스트를 생성합니다:

• 전역 실행 컨텍스트 – 시작 시 생성됩니다.
• 함수 실행 컨텍스트 – 함수가 호출될 때마다 생성됩니다.

각 컨텍스트는 생성 단계와 실행 단계를 가집니다.

• 생성: 엔진은 전역 객체(window(브라우저) 또는 global(Node)), this, 변수/함수를 위한 메모리를 설정하고, 변수들을 undefined로 초기화하며, 함수 선언을 완전히 로드합니다.

호이스팅(Hoisting) 설명

호이스팅은 생성 단계에서 발생합니다. 변수 선언은 undefined로 설정되고, 함수 선언은 라인‑바이‑라인 실행 전에 완전히 로드됩니다. 따라서 아래 코드가 name에 대해 undefined를 출력하는 이유를 설명합니다:

console.log('name: ', name);          // undefined
console.log('getUser: ', getUser);    // [Function: getUser]

var name = 'Tyler';

function getUser() {
  return { name: name };
}

함수 선언은 변수와 달리 완전히 호이스팅됩니다.

함수 실행 컨텍스트

함수가 호출될 때 새로운 함수 실행 컨텍스트가 생성됩니다. 이 컨텍스트는 다음을 포함합니다:

• 전역 객체 대신 arguments 객체
• 자체 this 바인딩
• 호이스팅된 로컬 변수와 함수 선언

호출이 발생하면 새로운 컨텍스트가 호출 스택에 푸시되고, 실행이 끝나면 팝되어 JavaScript의 단일 스레드 특성을 반영합니다.

인자는 로컬 변수로 변환되고, 내부 변수는 자신의 컨텍스트에 머무릅니다. 예를 들어 handle을 getURL(handle)에 전달하면 전역과 함께 로컬에 추가됩니다.

스코프와 스코프 체인

스코프는 현재 실행 컨텍스트에서 변수 접근성을 정의합니다. 로컬 변수가 컨텍스트가 팝된 후에는 접근할 수 없으며, 이를 사용하려 하면 ReferenceError가 발생합니다:

function foo() {
  var bar = 42;
}
foo();
console.log(bar); // ReferenceError

변수를 로컬에서 찾지 못하면 엔진은 스코프 체인을 따라 상위 컨텍스트로 이동해 전역 스코프까지 탐색합니다. 서로 다른 컨텍스트에 동일한 이름(name)의 변수가 여러 개 존재할 경우, 엔진은 먼저 로컬에서 해결하고, 그 결과는 undefined, Jordyn, Jake, Tyler와 같이 탐색 순서에 따라 달라집니다.

클로저(Closure) 실전

클로저는 내부 함수가 외부(부모) 스코프의 변수를, 부모 함수 실행이 끝난 후에도 계속 접근할 수 있게 해줍니다. 아래 예시에서 반환된 inner 함수는 x에 대한 참조를 유지합니다:

function makeAdder(x) {
  return function inner(y) {
    return x + y;
  };
}

const add5 = makeAdder(5);
console.log(add5(2)); // 7

inner 함수는 x에 대한 클로저를 형성하여 호출 간에 값을 보존합니다.

자세한 내용은 다음을 방문하세요:
Ultimate Guide to Execution Contexts, Hoisting, Scopes, and Closures in JavaScript