이전 포스팅에서 JS는 런타임시 엔진이 스택, 큐에서 자바스크립트를 실행하는 것을 배웠다. 스택과 큐에서 구체적으로 어떤 일이 벌어질까?

JS 엔진의 수행 방식

엔진이 자바스크립트를 실행시킨다는 것은 자바스크립트 파일이 아닌 함수를 실행시킨다는 것이다. 파일은 main 함수인 격.
즉, 자바스크립트 파일 구동 방식은 함수 구동 방식과 동일하다.
자바스크립트의 함수 구동 방식을 모른다면 이전 포스팅 실행 컨텍스트 을 먼저 정독하길 바란다.

간단하게 말하자면 stack = 실행 컨텍스트 , heap = 렉시컬 환경 인 셈이다.
엔진 내 함수는 stack이라는 메모리를 할당받은 일종의 프로세스로서 ,함수가 실행되는 공간을 실행 컨텍스트라 한다.
긴 말 필요없이 코드를 보자.

var name = 'zero';
function log() {
  console.log(name);
}

function wrapper() {
  name = 'nero'; 
  log();
}
wrapper(); // name 출력값 맞춰보세요~!

1️⃣ Creation(Pre-parsing) Phase

js 파일이 런타임 되기 전 먼저 변수,함수 등이 선언, 초기화시킨다. 자바스크립트 특성상 키워드로 선언한 모든 식별자는 호이스팅되므로 선언 위치는 무관하다. 이 과정에서 var로 선언된 변수들은 선언과 초기화가 함께 처리되며, 스코프가 전역이거나 함수 단위로 제한된다.

2️⃣ Execution Phase

선언 및 초기화 단계 이후엔 함수 실행을 위한 메모리 영역을 확보하고 실행시킨다. 이 때, 스택에는 실행 컨텍스트가 쌓이게 되며, 각 컨텍스트는 함수 호출에 필요한 모든 정보를 포함한다.

3️⃣ = 🔁 2️⃣

함수가 실행(호출)됨에 따라 EC가 콜스택에 쌓이고 EC 내부에 변수 및 함수는 Lexical(Static) Scope 렉시컬 스코프를 참고하여 선언 및 실행된다. 필요한 경우(해당 EC내에 변수에 대한 정보가 없어서 부모로 거슬러올라가야함) scope chaining을 한다.

위와 같은 과정으로 "nero"가 출력된다.

💬 var이 아닌 let, const라면?

let name = 'zero';
function log() {
  console.log(name);
}

function wrapper() {
  name = 'nero'; 
  log();
}
wrapper(); // name 출력값 맞춰보세요~!

과정은 좀 다르지만 역시 "nero"가 출력된다.

var과 달리 let 선언자 사용시 선언과 초기화는 별개로 일어난다. 처음 듣는다면 이전 포스팅 호이스팅 을 정독하라.

💬 var name="nero"라면?

var name = 'zero';
function log() {
  console.log(name);
}

function wrapper() {
  var name = 'nero'; 
  log();
}
wrapper(); // name 출력값 맞춰보세요~!

• wrapper 가 호출되어 wrppaer E.C에서 name이 nero로 선언 및 할당되었기 때문에 Global E.C 에서 name은 zero
• log함수가 호출되어 Lexical scope를 따라 Global E.C 의 name을 참조하기 때문에 "zero"가 출력된다.

정리

JS 엔진은 자바스크립트 코드를 처리할 때 실행 컨텍스트(EC)를 스택에 쌓아서 관리한다. 이 과정에서 변수와 함수는 호이스팅되어 선언과 초기화 단계를 거친다. 함수 실행 시, 스코프 체이닝을 통해 필요한 변수를 찾아가며, var와 let/const는 스코프 규칙에 따라 다르게 동작한다.

참고
✔️ 함수의 범위(scope)