JavaScript 동작 원리...

 

자바스크립트, 도대체 너 어떻게 굴러가고 있는거니?
내가 안보이는 곳에서 어떻게 움직이고 있길래 이렇게 뚱땅뚱땅 함수가 실행되는거야?
아니.. 사실은 어떻게 움직이는건데 에러가 나는거야..

내가 프로젝트를 진행하면서 무수히 했던 고민이였다. 깔깔...

그 궁금증이 작게나마 해소된 기쁨을 담아 즐거운 마음으로(..) 블로그 기록!

 

 

---

 

 

JavaScript 동작의

 

1. Call Stack

• 정의 : 코드 실행에 따라 호출된 함수가 함수들이 쌓이는 곳
• 특징 :
  • 오직! 단! 하나만 존재
  • 한번에 한개만 처리한다
  • 내장함수를 먼저 처리한다

 

2. Heap

• 정의 : 메모리 할당이 일어나는 곳 
• 특징 :
  • 변수, object 등을 쌓아두는 역할
  • 굳이 비유해보자면.. 쿠팡 물류창고 혹은 냉장고
  • 스택에서 필요한 데이터를 힙에서 끌어다 쓰는 것 같다

 

3. Web API 

• 정의 : 브라우저에 내장되어 있는 API
• 특징 :
  • DOM, Ajax(Fetch), Timing(setTimeout) 관련 브라우저 내장 API를 처리
  • JS 엔진 밖에 위치

 

4. Queue 

• 정의 : Web API에서 처리된 함수를 Call Stack이 빌때까지 담아두는 곳
• 특징 :
  • 일종의 일감 대기소 
  • Task Queue : 대부분의 비동기 작업이 위치 하는 공간
  • Microtask Queue : Promise의 then메서드와 같은 것 들이 위치

 

5. Event Loop 

• 정의 : Queue와  Call Stack 연결 
• 특징 :
  • Call Stack을 관찰하고 있다가 스택이 비면, Queue에 쌓인 일감을 Call Stack에 밀어넣는 역할

 

 

 

---

 

 

자바스크립트 런타임 환경의 구조와 특이점..!

웹 브라우저의 JavaScript 런타임은 JavaScript 엔진과 웹 API로 이루어져 있습니다.
JavaScript 엔진은 JavaScript 코드를 읽고 해석해서 실행하는 것을 담당하며,
한 번에 단 하나의 작업만 실행하는 단일 스레드로 동작하게 됩니다.

그런데, 싱글스레드인 JS는 어째서  멀티스레드처럼 동작하며 비동기적으로 코드를 실행시킬 수 있을까?
JavaScript 엔진 밖에서 존재하는 Web API와 Event Loop, Queue 덕분이 아닐까 싶습니다.

JS 엔진에서 제공하지 않지만 Web API를 통해 DOM, Ajax, setTimeout과 같은 API를 브라우저에서 제공 받고,
Queue에 대기 시킨 후 Event Loop를 통해 Call Stack에 올려주죠

이 과정이 일어나는 동안 Call Stack에서는 다른 작업을 동시에 처리하기 때문에 멀티스레드처럼 동작하게 됩니다.

 

 

 

---

 

 

간단요약 !

1. Call Stack : 코드 실행에 따라 호출된 함수가 함수들이 쌓이는 곳
2. Heap : 메모리 할당이 일어나는 곳 (변수, object 등을 쌓아두는 역할)
3. Web API : JavaScript 엔진의 바깥에 존재하며 DOM, Ajax(Fetch), Timing 관련 함수를 처리하는 곳
4. Queue : Web API에서 처리된 함수를 Call Stack이 빌때까지 담아두는 곳(대기소?)
5. Event Loop : Call Stack을 관찰하고 있다가 비면, Queue에 쌓인 함수를 Call Stack에 밀어넣는 역할

 

이해가 어렵다면.. 제가 이해하기 위해 썼던 비유를 참고해보세요!

1. 스택 :  쿠팡에 들어온 모든 주문들을 확인하고 배송 (쿠팡 일감)

2. 힙 : 쿠팡에서 관리하여 배송하는 물건들이 쌓여있는 물류창고  (쿠팡창고)
3. 웹 API : 쿠팡에 배송을 맡긴 외부 쇼핑몰의 주문들로, 쿠팡을 통해 이관된 주문을 확인하고 물건을 찾아 쿠팡으로 넘김 (쇼핑몰)
4. 큐 : 외부 쇼핑몰에서 넘긴 물건을 받아 대기 (쇼핑몰 일감)
5. 이벤트 루프 : 쿠팡 일감이 없을 때 쇼핑몰 일감을 넣어주는 역할 (관제탑)

약간의 억지는 있지만.. 이렇게 생각해보니 대략적인 흐름이 이해되고, 다른 문서나 글을 보며 살을 붙여 나가는데 수월해졌습니다.
소소한 비유는 뇌를 말랑말랑하는데 도움이 되는 것 같기도?