[JS] Understanding Javascript Function Executions — Call Stack, Event Loop , Tasks & more

원문

Understanding Javascript Function Executions — Call Stack, Event Loop , Tasks & more

 

JavaScript의 내부 작동 방식, 특히 함수 실행, 호출 스택, 이벤트 루프, 비동기 처리 등에 대해 깊이 있는 내용을 정리하였습니다. 이 글을 통해 JavaScript가 어떻게 작동하는지를 이해하고, 개발자의 입장에서 효율적인 코드를 작성하는 데 도움이 되고자 합니다.

 

 

 

---

1. JavaScript의 기본 원리

JavaScript는 단일 스레드 기반의 프로그래밍 언어로, 한 번에 하나의 작업만 수행할 수 있습니다. 이러한 특성은 비동기 작업을 처리하는 데 있어 독특한 메커니즘을 필요로 합니다. JavaScript의 내부 구조는 크게 호출 스택(Call Stack), 힙(Heap), 큐(Queue)로 나뉘며, 이는 JavaScript의 동시성 모델의 핵심 요소입니다.

 

 

---

2. 주요 구조 요소

1) 호출 스택 (Call Stack)

호출 스택은 현재 실행 중인 함수 호출을 추적하는 데이터 구조입니다. 각 함수 호출은 스택에 푸시(push)되고, 함수가 완료되면 스택에서 팝(pop)되어 제거됩니다.

 

Call Stack 완벽 정리

[JS] 함수 호출 스택(Call Stack) 완벽 정리

 

---

 

2) 힙 (Heap)

힙은 객체와 변수의 메모리를 할당하는 비구조적 메모리 영역입니다. 모든 메모리 할당(객체, 배열 등)은 이곳에서 이루어집니다.

 

---

 

2) 큐 (Queue)

큐는 처리할 메시지와 호출할 콜백 함수가 대기하는 리스트입니다. 이벤트 기반 비동기 작업이 완료되면 메시지가 큐에 추가되고, 호출 스택이 비어있을 때 해당 메시지가 처리됩니다.

 

---

 

3) 이벤트 루프 (Event Loop)

이벤트 루프는 호출 스택과 큐를 관리하여 비동기적으로 처리해야 할 작업을 순서대로 실행하는 역할을 합니다.

 

이벤트 루프의 작동 방식

1. 호출 스택이 비어 있는지 확인한다.

2. 호출 스택이 비어 있다면, 큐에서 대기 중인 메시지를 꺼내 호출 스택에 추가한다.

3. 각 메시지가 호출 스택에서 실행을 마칠 때까지 다음 메시지는 대기한다.

 

이 과정 덕분에 UI가 유연하게 작동할 수 있습니다. 예를 들어, 사용자가 버튼을 클릭하면 해당 이벤트가 비동기적으로 처리된 후 큐를 통해 호출 스택에 추가되어 실행됩니다.

 

---

 

4) 비동기 처리와 콜백 (Asynchronous Handling)

 

JavaScript에서 비동기 처리의 대표적인 형태는 AJAX 요청, setTimeout, setInterval, Promises 등입니다. 비동기 함수는 즉시 실행되지 않고, 호출 스택에서 다른 작업을 수행한 후 나중에 실행됩니다. 이 방식은 브라우저가 사용자 인터페이스를 차단하지 않고, 사용자 경험을 개선합니다.

 

console.log("시작");

setTimeout(() => {
  console.log("비동기 작업 완료");
}, 1000);

console.log("종료");

 

위 코드에서 "비동기 작업 완료" 메시지는 setTimeout을 통해 1초 후에 출력된다. 이때 호출 스택이 비어 있을 경우, 대기 중이던 콜백 함수가 큐에서 꺼내져 실행됩니다.

 

 

---

 

5) 성능 고려사항

JavaScript 코드의 성능을 평가할 때, 함수 호출이 성능에 미치는 영향을 이해하는 것이 중요합니다. CPU와 메모리 사용을 최적화하는 전략을 통해 빠르고 효율적인 코드를 유지할 수 있습니다.

 

(1) 블로킹 스크립트

네트워크 요청과 같은 긴 작업이 호출 스택을 차지하면 UI가 멈추게 됩니다. 이를 방지하기 위해 비동기 콜백을 사용하여 이러한 작업을 처리하게 할 수 있습니다.

 

 

 

---

결론

JavaScript의 작동 원리를 이해하는 것은 효율적이고 사용자 친화적인 코드를 작성하는 데 필수적입니다. 호출 스택, 힙, 큐 및 이벤트 루프를 이해하고 사용하는 방법을 아는 것이 중요합니다. 이는 웹 애플리케이션의 성능 최적화와 사용자 경험 향상에 기여할 것입니다.