자바스크립트 코드는 어떻게 실행될까?

자바스크립트 코드를 작성할 때, 단순한 코드라도 브라우저가 이를 해석하고 실행하는 과정은 복잡합니다. 코드와 컴퓨터가 이해하는 형태는 다르며, 자바스크립트 엔진이 파싱, 컴파일, 실행 과정을 통해 이를 처리합니다.

이러한 실행 과정을 알면 코드 최적화, 호이스팅, 스코프 등을 효율적으로 다룰 수 있게 됩니다. 본 글에서는 자바스크립트 코드의 실행 과정과 실행 컨텍스트를 자세히 살펴보겠습니다.

자바스크립트 코드 실행 과정

자바스크립트 엔진의 실행 과정은 크게 파싱, 컴파일, 실행으로 나눌 수 있습니다.

1) 파싱(Parsing)

자바스크립트 엔진은 코드를 문법적으로 분석하고 실행할 준비를 합니다. 초기 단계에서 코드가 토큰으로 나누어지며, 이후 추상 구문 트리(AST)가 생성됩니다. AST는 코드의 구조를 트리 형태로 나타내며, 최적화와 문법 오류 검출에 도움을 줍니다.

2) 컴파일(Compilation)

AST가 생성되면, 자바스크립트 엔진은 이 구조를 바이트 코드로 변환하는 컴파일 과정을 거칩니다. 바이트 코드는 고수준 언어와 기계어의 중간 형태로, JIT(Just-In-Time) 컴파일을 통해 실행 중에 네이티브 코드로 변환됩니다.

3) 실행(Execution)

바이트 코드가 생성된 후, 실행 컨텍스트가 생성되며 변수 할당과 함수 호출 등이 이루어집니다. 자바스크립트는 콜 스택을 활용해 실행 컨텍스트를 관리하며, 실행이 완료되면 컨텍스트가 제거됩니다.

function sayHello() {  console.log("Hello, world!");}sayHello();

실행 컨텍스트란?

실행 컨텍스트는 코드 실행 시 생성되며, 변수와 함수, 객체의 정보를 관리하는 키 개념입니다. 함수 호출의 흐름, 호이스팅, 스코프 체인 등을 이해하는 데 도움이 됩니다.

1) 콜스택

콜 스택은 함수 실행 순서를 LIFO 구조로 관리합니다. 함수가 호출될 때마다 실행 컨텍스트가 추가되고, 실행 완료 후 제거됩니다.

function first() {  second();  console.log("함수1");}function second() {  third();  console.log("함수2");}function third() {  console.log("함수3");}first();

2) 실행 컨텍스트의 종류

전역 실행 컨텍스트와 함수 실행 컨텍스트가 있으며, 각각 프로그램 전체와 함수 호출에 따른 정보를 가집니다.

let globalVar = "전역 변수";function greet() {  let message = "안녕하세요";  console.log(message);}greet();

3) 실행 컨텍스트의 생성과 종료

실행 컨텍스트는 생성, 초기화, 실행 단계를 거치며 코드 실행 환경의 설정과 변수의 초기화, 실행 결과를 처리합니다.

function sayHello() {  let text = "Hello, world!";  console.log(text);}sayHello();

실행 컨텍스트의 내부 구조

실행 컨텍스트는 변수 환경과 렉시컬 환경을 포함하며, 이들은 변수와 함수 선언, 코드의 스코프를 관리합니다.

1) 변수 환경(Variable Environment)

변수 환경은 변수 및 함수 선언을 포함하고, 호이스팅의 개념을 사용하여 선언된 변수를 메모리에 미리 등록합니다.

console.log(name); // undefinedvar name = "JavaScript";console.log(name); // "JavaScript"

2) 렉시컬 환경

렉시컬 환경은 현재 실행 컨텍스트에서의 변수, 함수 및 매개변수를 관리하며, 스코프 체인을 결정하는 역할을 합니다.

function outer() {  let outerVar = "바깥 변수";  function inner() {    let innerVar = "안쪽 변수";    console.log(innerVar); // "안쪽 변수"    console.log(outerVar); // "바깥 변수"  }  inner();}outer();

클로저는 외부 함수의 변수를 기억하는 내부 함수의 특성으로, 다음 예시에서 확인할 수 있습니다.

function makeCounter() {  let count = 0;  return function () {    count++;    console.log(count);  };}const counter = makeCounter();counter(); // 1counter(); // 2

마치며

자바스크립트의 실행 과정은 파싱, 컴파일, 실행으로 나뉘며, 이 과정에서 생성되는 실행 컨텍스트는 코드의 구조와 실행 흐름을 이해하는 데 필수적입니다. 이를 통해 스코프, 호이스팅, 클로저 등을 깊이 있게 이해하고 안정적이며 효율적인 코드를 작성할 수 있습니다.