[JavaScript] 동기 & 비동기

동기와 비동기를 이해하기 위해선 쓰레드를 알아야함.
자바스크립트라는 카페에는 직원이 하나라서 여러 한 테이블의 주문씩 밖에 처리를 못함..ㅠ
A테이블에 아아 2 개 B테이블에 아아 3 개 일 경우 2 개 만들고 서빙하고 3 개 만들고 서빙하는 형태인데 그럼 B테이블에 늦게 서빙되므로 컴플레인이 많이 접수됨..
그래서 직원에게 5개를 동시에 만들고 갯수가 채워지는데로 서빙하라고 시켜야함. 왜냐하면 자바스크립트 카페는 직원이 하나(싱글쓰레드)이기 때문임...

function sleep(sec) {
  return new Promise((resolve) => setTimeout(resolve, sec * 1000));
}

const makeCoffee = async (table, ea) => {
  await sleep(ea).then(() => {
    console.log(`${table} 테이블 서빙완료!`);
  });
};

async function serving() {
  let start = new Date();
  await makeCoffee("A", 2);
  await makeCoffee("B", 3);
  let end = new Date();
  console.log((end - start) / 1000);
}
serving();

// A 테이블 서빙완료!
// B 테이블 서빙완료!
// 5.002

위 코드는 A테이블과 B테이블에서 각각 2개, 3개의 커피를 주문하고 총 걸리는 시간을 출력하는 코드임
보다시피 총 걸리는 시간은 5초정도가 걸림. 당연한거아닌가? 싶지만 비동기 코드인 setTimeout코드로 작성한다면 두 개를 동시에 하기 때문에 3초정도가 걸림

동기와 비동기는 자바스크립트를 입문하면서 좌절하는 첫 번째 관문이 아닌가 싶기도...