[JavaScript] JavaScript가 동작하는 원리 - 기본편

들어가며

"호이스팅이 왜 일어날까?", "스코프 체인이란 무엇일까?", "this는 왜 상황마다 달라질까?"

 

JavaScript를 공부해봤다면, 이 질문들은 한 번쯤 생각해보았을 것입니다.

 

이 세 가지는 따로 외워야 할 별개의 규칙이 아닌, 실행 컨텍스트라는 개념을 이해하면 전부 같은 원리로 설명됩니다.

이 글에서는 실행 컨텍스트가 무엇인지, 내부에 무엇을 담고 있는지, 그리고 호출 스택에서 어떻게 동작하는지를 다룹니다.

컨텍스트

실행 컨텍스트를 이해하기 앞서, 컨텍스트란 무엇인지 이해해야합니다.

컨텍스트(Context)란 상황, 맥락, 문맥 상의 의미를 의미합니다. 이를 개발자답게 해석해보면, 텍스트의 내용뿐만 아니라, 텍스트가 사용된 상황, 이전 문맥, 이후 맥락 등을 모두 가지고 있는 데이터 묶음을 가리킨다고 할 수 있습니다.

 

컨텍스트의 의미

실행 컨텍스트(Execution Context)란?

JavaScript 엔진은 코드를 실행하기 전에 먼저 평가(Evaluation) 단계를 거칩니다. 이 단계에서 "이 코드를 실행하려면 무엇이 필요한가"를 파악하고, 그 정보를 하나의 객체로 묶는데, 이 객체가 바로 실행 컨텍스트입니다.

JavaScript의 동작 과정은 평가와 실행단계로 나뉜다.

JavaScript의 실행 단계

JavaScript를 사용하기 위해서는 코드를 통해 명령어를 나열하며, 이를 활용하여 로직을 수행할 수 있습니다. 이때 코드를 작성하는 행위를 우리가 흔히 아는 코딩(coding)이라고 합니다.

*소스코드(Source Code)란?

JavaScript 뿐만 아니라 여러 개발 언어에서 작성된 코드를 소스코드라고 부릅니다. 
JavaScript가 동작할 때 크게 소스코드 평가과 소스코드 실행 단계로 나누어 동작하며, 총 4가지의 소스코드 타입을 가지고 소스코드 타입을 바탕으로 컨텍스트를 만듭니다. 여기서 만들어진 컨텍스트를 동작(실행)을 위한 컨텍스트, 즉 실행 컨텍스트라고 부릅니다.

소스코드 평가 단계에서는 컨텍스트를 생성한다.

소스코드 평가 단계에서는 실행 컨텍스트로 사용할 객체를 생성하고, 작성되어 있는 변수, 함수 등의 선언문을 파악하여 이름(식별자)을 프로퍼티 키로, 선언된 내용을 값으로 프로퍼티 값으로 실행 컨텍스트 객체의 프로퍼티로 등록합니다. 단, 값은 아직 할당하지 않습니다.

실행 컨텍스트 생성(간략히)

 

소스코드 실행 단계는 할당과 호출이 일어난다.

소스코드 평가 단계가 끝나면 소스코드 실행 단계가 시작됩니다. 소스코드 실행 단계에서는 소스코드 평가 이후 등록된 식별자에 값을 할당하고 함수를 호출하여 소스코드를 실행합니다.

실행 컨텍스트 생성과정 한눈에 보기

JavaScript는 소스코드 평가 단계에서 실행 컨텍스트를 생성하고, 선언문에 해당하는 식별자를 키로 등록합니다. 이후 소스코드 실행 단계에서 등록된 키에 맞는 값을 할당합니다.

소스코드 타입

4가지 소스코드 타입은 소스코드 평가에 의해 각각 전역 실행 컨텍스트, 함수 실행 컨텍스트, eval 실행 컨텍스트, 모듈 실행 컨텍스트가 생성됩니다.

소스코드 타입	설명	생성하는 실행 컨텍스트
전역 코드	전역에 존재하는 소스코드, 전역에 정의된 함수, 클래스 등은 포함되지 않음.	전역 실행 컨텍스트
함수 코드	함수 내부에 존재하는 소스코드, 내부에 정의된 함수, 클래스 등은 포함하지 않음.	함수 실행 컨텍스트
eval 코드	eval 함수에 인수로 전달되어 실행되는 소스코드.	eval 실행 컨텍스트
모듈 코드	모듈 내부에 존재하는 소스코드, 모듈 내부의 함수, 클래스 등은 포함하지 않음.	모듈 실행 컨텍스트

 

📞 호출 스택(Call Stack)

호출 스택이란, JavaScript 동작과정 단계 중, 실행(Runtime)에서 호출한 내용을 담고 있는 스택구조를 말합니다.

JavaScript는 평가 단계에서 만든 실행 컨텍스트를 실행 단계에서 호출하고 호출 스택에 담아 동작합니다. 앞서 배웠던 실행 컨텍스트가 호출 스택에 담으며 가장 최근에 담았던 실행 컨텍스트 내용을 기반으로 동작하고, 실행이 끝난 실행 컨텍스트를 꺼내는 방식으로 동작합니다.

이때 실행 추가된 실행 컨텍스트가 실행 완료되어야 다음 실행 컨텍스트를 진행할 수 있는데, 이를 동기(Synchronous)적으로 실행한다고 말합니다.

스택(Stack)

스택(Stack)이란, 데이터를 저장하는 방법 중 하나로, 차곡차곡 쌓아두고 위에서 부터 사용하는 방식으로 설명할 수 있습니다. 이를 다른 말로 선입후출(First In Last Out) 특징을 가지고 있는 자료구조라고 말할 수 있습니다.

자세한 내용은 아래 글을 참고해보시기 바랍니다.

 

2026.01.16 - [📚 STUDY/자료구조 & 알고리즘] - [자료구조] 스택(Stack)

[자료구조] 스택(Stack)

 

호출 스택 동작 과정

예시 코드가 동작하는 과정을 정리해보면 다음과 같습니다.

// 예시 코드
const x = 1;

// 외부 함수 func1
function func1 () {
  const y = 2;
  // 내부 함수 func2
  function func2 () {
    const z = 3;
    console.log(x + y + z);
  }
  func2();
}

func1(); // 6

 

1. 전역 코드의 평가

 

2. 전역 코드 실행을 위한 전역 실행 컨텍스트를 호출 스택에 추가 및 전역 코드 실행

 

3. 전역 코드 실행 중 func1 함수 호출하여 func1 함수 평가    

4. func1 함수 실행을 위한 func1 실행 컨텍스트를 호출 스택에 추가 및 func1 함수 실행

    
5. func1 함수 실행 중 func2 함수 호출하여 func2 함수 평가

6. func2 함수 코드 실행을 위한 func2 실행 컨텍스트 호출 스택에 추가 및 func2 함수 실행

7. func2 함수 실행 완료 후 호출 스택에서 func2 실행 컨텍스트 제거

    
8. func1 함수 실행 컨텍스트 복귀 및 func1 함수 남은 부분 실행

9. func1 함수 실행 완료 후 호출 스택에서 func1 실행 컨텍스트 제거

    
10. 전역 실행 컨텍스트 복귀 및 전역 코드 남은 부분 실행

    
11. 전역 코드 실행 완료 후 호출 스택에서 전역 실행 컨텍스트 제거

    
12. JavaScript 동작 종료

    

한 눈에 보는 호출 스택 동작 과정 예시