JavaScript

---

[특징]

• 싱글 스레드
• 가볍고 빠르다
• 배우기 쉽다

---

[설명]

JavaScript(이하 JS)는 싱글 스레드 기반으로 동작하는 스크립트 언어이다.
'싱글 스레드'라는 것은 일을 처리하는 스레드가 하나인데 어떻게 빠르게 동작할 수 있나? 하는 의문이 들 수 있다. 해답은 JS는 비동기적인 처리를 지원하기 때문이다. 그렇다면 '싱글 스레드'인 JS가 어떻게 비동기적인 처리를 지원하는지 동작 방식을 알아보고, 이것을 이해하기 위해 JS 런타임의 구성을 알아보자

---

[JavaScript 런타임(Runtime)]

• JavaScript 엔진 / Web APIs / 이벤트 루프 / 콜백 큐 (태스크 큐) 4가지 구성
  
• [JS Runtime 동작 순서]
  1) 함수는 Call Stack에 LIFO순서로 쌓여서 실행
  2-1) 함수에 콜백함수가 있을 때 JS내부에서 처리 가능하면 Call Stack에 쌓음
  2-2) JS내부에서 처리 안되면(비동기 API) Web API에게 위임
  3-2) Web API는 비동기 API 실행 후 콜백함수를 Callback Queue에 삽입
  4-2) Event Loop는 Call Stack이 비었을 때 Callback Queue에서
           콜백함수 빼서 Call Stack에 넣어준다.
  5) Call Stack에 올라간 콜백 함수는 pop되어 실행

---

[비동기 동작 방식]

1. JS에서 콜백 함수가 실행
: JS에서 실행되는 콜백함수의 종류는 2가지 이다.
    1) JS 내부적으로 처리하는 콜백 함수 -> 동기적으로 실행
    2) 외부에서 처리해야 하는 비동기 API에 있는 콜백 함수 -> 비동기적 실행
        // 우리는 2)를 해야하는 상황

---

2. Web API의 '비동기 API' 처리
: JS는 자체적으로 비동기 API를 처리하지는 못한다!(중요)
   대신 JS 런타임 구성요소인 Web API를 통해 비동기 API를 처리한다.
   바로 이 때 JS는 Web API에게 비동기 API 처리를 위임하고 다른 일을 할 수    있는 것이다. (비동기적인 처리가 가능한 이유)

---

3. 비동기 API의 수행 완료
: 수행된 비동기 API는 해당하는 콜백 함수를 Callback Queue에 삽입

---

4. 이벤트 루프의 처리
: 이벤트 루프는 호출 스택이 비어있을 때 콜백 큐에 콜백 함수를 실행
   (JS가 싱글 스레드인 이유는 이벤트 루프가 싱글 스레드이기 때문!)
   (Web API는 멀티 스레드로 구성되어 여러 비동기 요청을 처리 가능)

---

정리

• JavaScript가 특정 비동기 API에 대해 어떤 원리로 비동기적인 처리를 하는지 알아보았다.
• 우리가 코딩을 할 때 비동기 코드는 가독성을 떨어뜨리고 불편하다. 따라서 우리는 이러한 비동기적인 처리를 동기적으로 처리할 수 있도록 '흐름 제어' 라는 것을 해야한다.
• 다음 (JavaScript) 비동기(2) 편에서는 흐름 제어에 대해 알아본다.

(참고 자료)
https://ooeunz.tistory.com/89
https://it-eldorado.tistory.com/86?category=749286