[Javascript] 비동기식 프로그래밍

• 자바스크립트 엔진은 단 하나의 실행 컨텍스트를 갖는 "싱글 스레드"로 동작한다. 하지만, 브라우저엔진의 이벤트루프 동작을 통해 비동기처리가 가능해진다. => 멀티태스킹
• 기다려야 하는 일( 타이머를 사용하는 작업이나 파일에서 데이터를 읽어오거나 ajax통신과 같은 작업 등 시간을 소요하는 작업)을 브라우저 WepApi에 위임
• 이 때 끝나면 실행시킬 콜백을 등록해놓고, 위임된 일이 끝나면 그 결과와 콜백을 "태스크 큐" 에 추가
• 브라우저는 "콜스택" 이 비워질때마다, 태스크 큐에서 오래된 작업을 꺼내와서 해당 작업에 대한 콜백을 실행
• 이를 "이벤트 루프" 라고 하고, 멀티스레드로 동작하며 비동기 작업이 가능해진다.

동기 vs 비동기

• 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식
• 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식
• 동기 작업은 요청한 작업에 대해 순서가 지켜짐, 비동기 작업은 순서가 지켜지지 않을 수 있음

setTimeout 함수

• 첫 번째 인자로 넣은 콜백 함수를 두 번째 인자로 넣은 수 만큼의 밀리초 후 실행
• Web API, Node.js 등 자바스크립트 환경의 기능 - 언어의 기능이 아님

console.log('하나');

setTimeout(() => {
  console.log('둘');
}, 1000); // 0으로 변경해도 결과는 동일

console.log('셋');

비동기 코드 - 동기코드와 달리 코드가 순서대로 실행되지 않음

• 일반적으로 타임아웃, 네트워크 요청 등 시간이 걸리는 작업에 사용
• 당장 할 수 있는 것들을 먼저 다 하고, 시간이 걸리는 작업은 뒤로 넘기기
• 💡 만약 비동기 방식이 없다면 - 데이터를 받아오는 동안 화면이 어는 등 불편함

// 1초 ~ 1.5초 사이 무작위 시간 안에 도착
function doRace (num, name) {
  console.log(`👟 ${num}번 ${name} 출발`);

  setTimeout (() => {
    console.log(`🚩 ${num}번 ${name} 도착`);
  }, 1000 + Math.random() * 500);
}

'철수,영희,돌준,정아,길돈'
.split(',')
.forEach((itm, idx) => doRace(++idx, itm));

• 자바스크립트의 코드는 싱글 스레드로 실행 - 외나무다리
• 실행시점에 도착하면 동기 코드는 실행
• 비동기 콜백 코드는 환경(Web API 등)으로 넘겨줌
• 자바스크립트의 실행환경은 멀티스레드 - 다차선 도로
• 여러 작업들이 동시다발적으로 진행될 수 있음
• 주어진 작업을 마친 작업들은 태스크 큐 task queue 선로로 진입
• 이벤트 루프 event loop - 태스크 큐의 작업이 도착하는대로 자바스크립트 실행도로에 올려놓음
• 동기 코드가 모두 실행된 다음 진행됨 - 지연시간을 0으로 해도 나중에 실행되는 이유