소스코드의 평가 및 실행
모든 소스코드는 실행에 앞서 평가 과정을 거친다. 평가 과정에서는 실행 컨텍스트라는 것을 생성하고 변수, 함수의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 실행 컨텍스트에 키로 등록한다. 값은 아직 정해지지 않아 undefined상태이다.
이런 평가 과정이 끝나면 실행 단계가 시작된다. 즉 런타임 과정에서 변수나 함수의 값을 채워 넣는다. 이때 실행 컨텍스트에 존재하는 스코프를 참조하여 값을 정하게 된다.
var x;
x = 1위의 코드에서 평가 과정을 통해 1번 명령줄을 보고 x에 대한 키를 생성하고 실행과정에서 2번 명령줄을 보고 x에 값을 할당한다
실행 컨텍스트의 스택
전체 소스코드의 실행은 다음 순서를 가지게 된다
1. 전역 소스의 평가
2. 전역 소스의 실행
3. 전역 소스의 실행 과정에서 함수를 만나면 전역 소스의 실행을 잠시 중단하고 함수 내부로 진입
4. 함수 내부에 진입하면 함수를 실행하기 전에 함수를 평가
5. 함수의 실행
아래 소스코드를 보자.
const x = 1
function foo(){
const y = 2
function bar(){
const z = 3
}
bar()
}
foo()1. 전역소스 평가 및 실행 -> 실행 과정 중 foo() 함수 호출
2. foo() 함수의 평가 -> y, bar함수가 실행 컨텍스트에 키로 등록
3. foo() 함수의 실행 -> y, bar 함수에 값이 할당됨. 그리고 실행 과정 중 bar() 함수 호출
4. bar() 함수의 평가 및 실행
5. foo() 함수로 복귀
6. 전역 소스로 복귀
이 과정에서 3가지 실행컨텍스트(전역코드의 실행컨텍스트, foo의 실행컨텍스트, bar의 실행컨텍스트)가 만들어지고 각각의 실행 컨텍스트는 호출 순서대로 스택으로 쌓이게 된다. 실행 컨텍스트 스택은 코드의 실행 순서를 관리하게 된다.
*전역 실행 컨텍스트(Global Execution Context)
- 코드 실행이 시작되면 자동으로 생성
- 전역 객체(window 또는 globalThis)와 전역 스코프를 포함
- 전역 실행 컨텍스트는 프로그램 종료 시점까지 유지
*함수 실행 컨텍스트(Function Execution Context)
- 함수가 호출될 때마다 새로운 실행 컨텍스트가 생성
- 함수 내부에서 사용되는 변수와 스코프를 관리
렉시컬 환경
위의 설명을 요약하면, 모든 소스 코드는 평가와 실행 과정을 거치면서 실행컨텍스트라는 것을 생성하고, 그 실행 컨텍스트가 순서대로 쌓여 만들어진 실행 컨텍스트 스택에 의해 코드의 실행 순서가 정해진다.
이때 렉시컬 환경은 실행 컨텍스트를 구성하는 주요 요소이며 식별자와 식별자에 바인딩된 값, 그리고 상위 스코프 참조 기록을 관리하는 자료구조이다.
렉시컬 환경의 구성 요소
- 환경 레코드(Environment Record)
- 식별자와 식별자에 바인딩된 값이 저장되는 공간 - 외부 렉시컬 환경 참조(Outer Lexical Environment Reference)
- 현재 스코프를 포함하는 상위 스코프를 참조
렉시컬 환경이 중요한 이유
렉시컬 환경에서 값이 결정되는 방식은 렉시컬 스코프(Lexical Scope)를 기반으로 작동.
이는 변수나 함수가 코드 작성 위치에 따라 스코프가 결정되고 이를 기반을 값이 결정됨.
값 결정 방식
- 변수를 참조할 때, JavaScript는 현재 렉시컬 환경에서 해당 변수를 찾는다.
- 변수가 없으면 Outer Lexical Environment Reference를 따라 상위 렉시컬 환경으로 올라간다.
- 이를 스코프 체인(Scope Chain)이라고 한다.
const globalVar = "Global";
function outerFunction() {
const outerVar = "Outer";
function innerFunction() {
const innerVar = "Inner";
console.log(globalVar); // 상위 렉시컬 환경에서 찾음
console.log(outerVar); // 바로 상위 렉시컬 환경에서 찾음
console.log(innerVar); // 현재 렉시컬 환경에서 찾음
}
innerFunction();
}
outerFunction();- globalVar: innerFunction → outerFunction → 전역 렉시컬 환경 순으로 탐색.
- outerVar: innerFunction → outerFunction에서 바로 찾음.
- innerVar: innerFunction의 현재 렉시컬 환경에서 바로 찾음.
이러한 개념은 추후 '클로저'를 공부할 때도 도움이 됨
댓글