자바스크립트 엔진의 수행 방식 = 함수 실행 원리

Execution Context

---

자바스크립트 엔진은 코드가 작성된 자바스크립트 파일을 그대로 실행하는 것이아니라, 사실상 함수의 실행 방식과 비슷한 원리로 작동한다. 자바스크립트 엔진은 스크립트 파일을 구동할 때 기본적으로 두 가지 주요 단계를 거친다.

1. Creation (Pre-parsing) Phase: 실행하기 전에 변수와 함수가 어떤 것인지 분석하고 필요한 메모리 공간을 예약한다.
2. Execution Phase: 변수에 값을 할당하고 함수가 실제로 실행된다.

---

자바스크립트 엔진 구성: Stack + Heap

자바스크립트 엔진은 Stack + Heap 두개만 기억하면 된다. 자바스크립트 함수 동작원리도 마찬가지로 두개만 기억하자.

1. Stack(스택): 함수 호출 순서대로 함수가 저장되고 실행되는 공간 = 실행 컨텍스트
2. Heap: 렉시컬 환경(Lexical Environment) = 변수/함수 저장소 

https://1000sang-dev.tistory.com/12

자바스크립트 런타임과 자바스크립트 엔진의 동작 원리

해당 글을 참고하자 

 

자바스크립트 엔진 내 함수 동작 원리: Stack(실행 컨텍스트) + Heap(렉시컬 환경)

함수가 실행될 때, 자바스크립트 엔진은 해당 함수를 실행하기 위해 특정 메모리 구조를 사용한다.

이를 실행 컨텍스트(Execution Context)라고 한다. 실행 컨텍스트는 함수 실행을 위한 환경을 제공한다.

1. Stack(실행 컨텍스트): 함수가 실행되는 동안의 환경을 관리하는 스텍
2. Heap(렉시컬 환경): 함수 내에서 정의된 변수와 함수들이 저장되는 공간

렉시컬 환경에는 함수의 변수와 상수, 중첩 함수 등이 저장된다. `let`, `const`는 이 렉시컬 환경에서 저장되며, `var`는 함수의 변수 환경에 저장된다. `let`과 `const`는 블록 레벨에서 작동하며, `var`는 함수 레벨에서 작동한다.

 

실행 컨텍스트

이 쯤되면 실행 컨텍스트가 무엇인지 궁금해질 것이다. 

실행 컨텍스트는 함수가 실행되기 위해 필요한 메모리 영역이다. 함수가 호출될 때마다 실행 컨텍스트가 생성되며, 함수 실행이 끝나면 사라지게된다. 실행 컨텍스트는 다음과 같은 정보가 포함된다. 

 

1. 렉시컬 환경: 함수 내에서 사용되는 변수와 상수, 함수 등이 포함된 환경이다.

2. 변수 환경: `var`로 선언된 변수가 포함된 영역이다.

3. 스코프 체인: 상위 스코프에 접근하기 위한 참조가 포함된다.

 

example.js 파일 실행시, JS엔진은 가장 먼저 해당 파일이라는 Global Function 수행을 위한 실행 컨텍스트를 만들고 시작.

• JS 엔진 수행을 위한 최상위 함수: Global Function, 타 프로그램에서 main() 함수라고 생각하면 된다.
  • Global Function은 Global Object 전역 객체를 갖는다.
    • 웹 서버(Node.js)는 global
    • 웹 브라우저(크롬) 에서는 window

자바스크립트 엔진의 실행 과정

자바스크립트 파일이 실행될 때, 엔진은 두 가지 주요 단계를 거친다.

• Creation(Pre-parsing) Phase: 함수(파일) 분석하며 메모리 내 변수와 함수 적재

자바스크립트 엔진은 파일을 실행하기 전, 먼저 코드에 등장하는 모든 변수와 함수 선언을 분석하여 메모리에 적재한다.

이 과정을 Creation Phase라고 하며, 이 단계에서 변수와 함수가 먼저 메모리에 올라간다. 이 과정에서 중요한 개념 중 하나가 바로  Hoisting(호이스팅)이다. 

https://1000sang-dev.tistory.com/32

JavaScript 변수, 함수 정의 및 사용

해당 글에 호이스팅에 대한 자세한 설명이 나와있다. 

 

Lexical Scope(렉시컬 스코프)

함수가 선언될 때, 함수 내부에서 참조하는 변수가 어떤 값인지 결정하는 시점을 Lexical Scope라고 한다. 함수가 호출되는 시점이 아니라 선언되는 시점에서의 외부 변수를 참조한다.

let x = 10;
function outer() {
  console.log(x); // 10 (선언 시점의 변수 값)
}
x = 20;
outer(); // 여전히 10이 출력된다. 호출 시점의 x 값이아닌 선언 시점의 x값을 참조하기 때문.

 

• Execution Phase: 함수 실행을 위한 메모리 영역 확보 및 실행

이제 코드가 실제로 실행되는 Execution Phase로 넘어간다. 이 단계에서는 함수가 실행되기 위해 필요한 메모리 영역을 확보하고, 변수에 값이 할당된고 함수가 실행된다.

 

변수 할당과 Scope Chain

• 변수 할당: 이 단계에서는 변수가 실제로 값을 할당받는다. 함수 내부에서 변수를 찾지 못하면, 함수가 속한 상위 스코프나 글로벌 스코프에서 변수를 찾게된다. 이를 Scope Chain이라고 한다.

let a = 10;
function scopeTest() {
  let b = 20;
  console.log(a) // a는 함수 스코프에서 찾을 수 없기 때문에, 상위 스코프에서 찾는다
scopeTest(); // 10 출력

 

함수실행

• 함수가 실행될 때마다 Execution Context(실행 컨텍스트)가 생성된다. 이 실행 컨텍스트는 함수가 실행되면서 필요한 메모리 공간과 상태를 관리하는 역할을 한다. 함수가 종료되면 그와 관련된 실행 컨텍스트도 사라지게 된다.

TDZ (Temporal Dead Zone): let, const의 ReferenceError 이해

자바스크립트의 변수 호이스팅은 `var`, `let`, `const` 모두에게 적용된다. 그러나 `let`과 `const`는 TDZ(Temporal Dead Zone, 일시적인 사각지대)에 의해 `var`와는 다른 동작을 보인다. TDZ는 변수가 초기화되기 전에 접근하려고 할 때 발생하기 때문이다. 이로 인해 `let`과 `const`는 선언 이후에도 값을 할당하기 전까지 ReferenceError가 발생한다.

 

`var`와 `let`의 차이

• `var`는 호이스팅이되어 초기화까지 함께 이루어지기 때문에, 선언전에 접근해도 undefined를 반환한다. (선언 + 초기화)
• `let`과 `const`는 호이스팅되지만, 초기화가 실행 단계에서 이루어지므로 그 전에 접근하려고하면 ReferenceError가 발생한다.(선언O / 초기화 X)

console.log(a); // undefined(var로 선언된 a는 선언과 동시에 초기화)
var a = 5;

console.log(b); // ReferenceError(초기화 X)
let b = 10;

console.log(c); // ReferenceError(초기화 X)
const c = 15;

 

---

Lexical Scope + ScopeChain + Hoisting

▶ name = 'nero'

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

function wrapper() {
  name = 'nero'
  log();
}
wrapper();

 

Creation Phase(생성 단계)

 

1. 전역 실행 컨텍스트 생성

• 자바스크립트 코드를 실행하기 위해 전역 실행 컨텍스트를 생성한다.
• 이 컨텍슽으 안에 전역 변수와 함수들이 메모리에 등록된다.

2. 변수와 함수의 선언이 메모리에 올라감(호이스팅)

• `var name`은 undefined로 초기화되며 메모리에 올라간다.
• `log` 함수 선언이 메모리에 올라간다.
• `wrapper` 함수도 메모리에 올라간다.
• 함수 내부의 코드는 아직 실행되지 않았기 때문에 `name='nero'는 처리되지 않는다.

결과적으로, Creation Phase에서의 메모리 상태는

• `name`: undefined(호이스팅된 상태)
• `log`: 함수 log() 메모리 할당
• `wrapper`: 함수 wrapper() 메모리 할당

Execution Phase(실행 단계)

코드가 실제로 실행되며, 변수에 값이 할당되고 함수가 호출된다.

 

1. 전역 코드 실행

• `var name = 'zero';` 전역변수 `name`에 `'zero'`가 할당된다.
  • name: `'zero'` 
• `function log() {...}`와 `function wrapper() {...}`는 이미 메모리에 있으므로 함수 선언은 실행되지 않고 넘어간다.

2. `wrapper()` 함수 호출

• `wrapper()`를 호출하면서 wrapper 함수 내부 코드가 실행된다.
• wrapper 실행 시 새로운 실행 컨텍스트가 생성된다. 이대는 전역 변수 `name`에 접근할 수 있다.
• `name='nero'`가 실행되어, 전역 변수 `name`이 `'nero'`로 덮어씌워진다.

3. `log()` 함수 호출

• `log()` 함수는 wrapper 안에서 호출된다.
• `log()`가 실행될 때, 전역 변수 `name`을 읽어와 콘솔에 `'nero'`를 출력한다.
  • `wrapper`함수에서 이미 전역 변수 `name`이 `'nero'`로 덮어씌워졌다.

최종적으로 'nero'가 출력된다.

 

---

▶ var name='nero'

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

function wrapper() {
var name = 'nero'
  log();
}
wrapper();

 

Creation Phase(생성 단계)

 

1. 전역 실행 컨텍스트 생성

• 전역 실행 컨텍스트 생성.
• 자바스크립트는 전역에서 선언된 변수와 함수를 메모리에 적재

2. 변수와 함수의 선언이 메모리에 올라감 (호이스팅)

• `var name`은 undefined로 초기화되어 메모리에 올라감.
• `log`함수가 메모리에 올라감
• `wrapper`함수도 메모리에 올라감

Execution Phase(실행 단계)

 

1. 전역 코드 실행

• `var name = 'zero';` 실행으로 전역 변수 `name`에 `'zero'`가 할당된다.
  • name:`'zero'`

2. wrapper() 함수 호출

• 전역 코드에서 `wrapper()`가 호출되면 함수 내부의 코드가 실행된다.
• wrapper 함수가 실행되면서 wrapper 실행 컨텍스트가 생성된다.
  • wrapper 내부에서 `var name = 'nero';`가 실행되며, wrapper 함수 스코프에 새로운 `name`변수가 생성된다. 이 변수는 wrapper 함수 스코프에만 적용되므로, 전역 변수 `name`과는 별개의 변수이다. → 전혀 다른 객체. 헷갈리지 말 것 !
  • wrapper 스코프에서 `name`은 nero가 된다.
  • 그러나 log() 함수는 전역 스코프에 선언된 함수이기 때문에, log 함수는 전역 스코프의 변수에 접근한다.

3. log() 함수 호출

• log() 함수는 전역 스코프에 선언된 함수이므로, 전역 변수 `name`을 참조한다.
• 전역 변수 `name`의 값은 `'zero'`로 남아있다.
• 따라서 log() 함수가 호출되면 전역 변수 `name`의 값인 'zero'가 출력된다

최종적으로 'zero'가 출력된다.

 

---

🤯필자는 이 흐름을 이해하는데 몇 시간이나 걸렸다.. 헷갈렸던 이유가 바로 저 빨간글씨이다.

필자 생각에는 `nero`가 출력이 되어야하는데 왜 자꾸 `zero`가 출력이 되는 것일까?

 

이 고민 끝에 도출한 결론은 wrapper 함수 스코프에 있는 `name`과 전역변수 `name`은 서로 다른 변수라는 것이다. 전역 스코프의 변수는 log함수에서 참조되고 있기때문에, `zero`가 출력된다는 점을 알게되었다.

 

만약 `wrapper`함수 스코프에 있는 `name`이라는 변수 이름이 다르다면 덜 헷갈렸을 것 같다.

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

function wrapper() {
var sibar = 'nero'
  log();
}
wrapper();

 

위 코드를 실행하면 똑같이 `'zero'`가 출력된다.

 

이 글을 보는 사람이 만약 있다면 필자처럼 쓸데없는 고민의 시간을 아끼도록 하자

전역변수와 함수 스코프 내의 변수가 다르다는 점, 그리고 log함수는 전역 스코프에 있는 변수를 참조한다는 사실을 이해하면 헷갈리지 않을 것이다.

 

+) Scope Chain은 자바스크립트 엔진이 변수를 찾을 때 현재 스코프에서 먼저 검색하고, 해당 변수가 존재하지 않으면 상위 스코프로 계속해서 거슬러 올라가며 변수를 찾는 방식이다. (강산에를 떠올리도록 하자)  결국 자바스크립트 엔진은 변수가 선언된 선언부를 찾아가게 되는 것이다.

 

만약, 현재 스코프와 상위 스코프 어디에서도 해당 변수를 찾을 수 없다면, 최종적으로 전역 스코프를 확인하고, 그래도 변수를 찾지 못하면 ReferenceError를 발생시킨다.

 

😊 코드에서 함수와 변수가 어떤 스코프에 있는지 신경 써야한다는 점! 꼭 기억하도록 하자.

---

 

ℹ️참고

[ASAC 6기 강의자료]