[ JavaScript ] Async Programming (비동기 프로그래밍)

JavaScript 는 Single Threaded다!
JS 는 어느 한 순간에 동시에 단 하나의 작업만 실행 할 수 있다.

📌 동기 프로그래밍

1. thread 에서 consol.log("Hello"); 출력
2. 2초동안 longWork(); 실행
   2초 동안 longWork();가 thread를 막음
3. 끝난 후 longWork(); 가 콜스택에 완전히 사라진 후 -> console.log('World'); 실행

function longWork() {
    const now = new Date();
    
    /** milliseconds since epoch
     * : 1970/01/01 부터 지금 코드가 실행되는 순간까지의 시간을 밀리초로 면화
     */
    const milliseconds = now.getTime();
    const afterTwoSeconds = milliseconds + 2 * 1000;

    while (new Date().getTime() < afterTwoSeconds) {

    }

    console.log('완료');
}

console.log('Hello');
longWork();
console.log('World');

📌 비동기 프로그래밍

1. thread 에서 consol.log("Hello"); 출력
2. longWork(); 실행시 setTimeOut 함수 사용하자마자 바로 thread 사용가능해짐
   Why? SetTimeout 함수는 비동기 함수이기 때문
3. 바로 consol.log('world') 실행
4. consol.log('world') 완료 ~ console.log('완료'); 실행되기 전까지의 남은 초동안 thread 사용 가능
5. console.log('완료'); 실행

function longWork() {
    setTimeout(() => {
        console.log('완료');
    }, 2000)
}

console.log('Hello');
longWork();
console.log('World');

🧷 Event Loop

• 비동기 함수가 실행되면 Task Queue/Event Queue 에 들어감.
  Call stack을 막지 않고, 큐에서 함수 수행하면서 기다림
• Event Loop는 큐를 바라보면서 Task Queue/Event Queue 안의 함수가 종료 확인 및 Call Stack 비어있는지 확인
• 큐 안의 함수가 종료되고 콜 스택이 비어있으면 이벤트 루프가 해당 함수를 콜스택으로 옮김
• 해당 함수는 비동기 작업은 끝났으므로 동기 작업 수행후 작업 완료됨
  

---

📒 코드팩토리 - <9시간만에 끝내는 코드팩토리의 Javascript>