자바스크립트 동작 원리 이해하기

2024.07.31 - [TIL(Today I Learn)] - [데브코스 FE] 2주차 다섯번째 수업 2024/07/26

[데브코스 FE] 2주차 다섯번째 수업 2024/07/26

 

지난 복습 포스팅에서 작성했던 글중 일부였던 '자바스크립트 동작 원리'를

따로 포스팅으로 정리하여 복습하고자 한다.

---

 

다양한 API를 이용하고 받아오는 값을 처리하는과정에서

함수 call stack 개념과 비동기 개념의 이해는 매우 중요하다!

 

자바스크립트는 단일 스레드 기반이다.

즉 여러작업이 들어와도 동시에 하나의 작업만 처리가 가능하다.

 

이러한 싱글 스레드의 한계를 보완하기 위해, 비동기 콜백(asynchronous callback)이 사용된다.

비동기 콜백에는 Web APIs, Promise(ES6~)가 존재한다.

자바스크립트에서는 어떻게 이러한 비동기 콜백이 동작할까?

 

🔍자바스크립트 엔진 V8 구조

☑️ Memory Heap : 메모리 할당이 일어나는 공간

☑️ Call stack : 코드 실행에 따라 스택 프레임이 쌓이는 공간. 함수의 실행 순서를 결정한다.

LIFO(후입 선출)을 따른다.

 

🔍자바스크립트 런타임(동작 환경)

자바스크립트는 단일 스레드이지만,

자바스크립트 엔진이 돌아가는 환경, 즉 브라우저나 Node.js에서는

여러개의 스레드가 사용된다.(다중스레드)

 

• Web APIs : DOM, AJAX, Timer 등 브라우저에서 제공하는 api
• Callback queue : 콜백 함수들이 대기하는 곳(FIFO 선입선출)
• Event Loop : call stack이 비워질 때마다 callback queue에 대기 중인 콜백함수가 있다면, callback 함수를 call stack에 보내줌.

이렇게 다른 스레드 환경에서

자바스크립트 엔진과 구동 환경을 연동하기 위해 사용하는 장치가

Event Loop 이다!

이벤트 루프는 이따 다시 다뤄보는 걸로 하자.

 

🔍호출 스택(Call stack)

호출 스택은 여러 함수들(functions)을 호출하는 스크립트에서 해당 위치를 추적하는 인터프리터 (웹 브라우저의 자바스크립트 인터프리터같은)를 위한 메커니즘입니다. 현재 어떤 함수가 동작하고있는 지, 그 함수 내에서 어떤 함수가 동작하는 지, 다음에 어떤 함수가 호출되어야하는 지 등을 제어합니다.
- MDN

 

MDN 공식문서에서 Call stack 의 정의를 확인할 수 있다.

 

function multiply(x, y) {
    return x * y;
}
function printSquare(x) {
    var s = multiply(x, x);
    console.log(s);
}
printSquare(5);

 

위 코드를 예시로 설명하고자 한다.

이 코드가 실행될때, 호출 스택(Call stack)의 동작 단계는 다음과 같다.

 

호출 스택은 후입 선출 원리를 따르기때문에,

함수가 계속 호출된다면(콜 스택에 스택이 계속 쌓이는 경우)

아래와 같이 콜백지옥이 발생할 수 있다.

function foo {
  foo();
}
foo();

 

🔍이벤트 루프(Event Loop)

따라서, 자바스크립트에서 싱글 스레드의 한계를 보완하고자

비동기 콜백(asynchronous callback) 을 이용한다.

 

 

자바스크립트 코드 실행 중에 이벤트를 만나면

이벤트가 콜백 큐에 차례대로 쌓인다.

(콜백 큐는 FIFO, 선입선출 룰을 따른다.)

 

이벤트 루프는 콜 스택이 비었는지 정기적으로 확인하고,

비었으면 콜백 큐에 있는 이벤트를 가져다 콜 스택에 밀어넣는다.

이 한 번의 작업을 틱(tick) 이라고 한다.

이벤트 루프는 이 작업은 반복(loop)한다.

 

 

 

출처