thumbnail image - dev.to/clovis1122/dont-make-that-function-async-9m6
어떤 코드의 진행이 다른 코드의 진행 순서와 관계 없이 동작하도록 처리하는 것
위에 있는 썸네일 이미지와 함께 아래 간단한 코드의 실행 결과를 예상해보면
자바스크립트의 비동기 처리 를 직관적으로 이해할 수 있습니다.
console.log('start');
setTimeout(() => {
console.log('timer end')
}, 3000);
console.log('end');
코드 실행 결과를 console
에서 확인해보겠습니다.
위 코드를 동기 처리 했다면 start
출력, 3초 후 timer end
출력, 마지막으로 end
를 출력했겠지만
setTimeout()
함수를 비동기 처리 했기 때문에 console
과 같이 출력되었습니다.
이런 비동기 처리가 왜 필요할까요?
식당에서 주문받은 메뉴를 준비하는 과정과 연관지어 생각해보겠습니다.
/*
* @param menu 메뉴명
* @param minutes 메뉴를 준비하는데 필요한 시간
*/
function orderMenu(menu, minutes) {
setTimeout(()=> {
console.log(menu + '이(가) 준비되었습니다.');
}, minutes);
}
orderMenu('메뉴1', 10000);
orderMenu('메뉴2', 4000);
orderMenu('메뉴3', 6000);
만약 메뉴 준비하는 과정을 동기 처리 한다면
메뉴1
이 완성된 후에 메뉴2
를 준비하고, 메뉴2
가 완성된 후에 메뉴3
을 준비하겠죠?
만드는데 6분 밖에 걸리지 않는 메뉴3
은 10+4+6 = 20분 후에 제공되겠네요...🥲
다행히 식당은 메뉴 준비하는 과정을 비동기 처리합니다.
각 메뉴를 다른 메뉴와 관계 없이 준비하기 때문에
메뉴를 준비하는데 필요한 시간에 따라 메뉴2
, 메뉴3
, 메뉴1
순서로 준비가 되었네요 🙂
모든 메뉴를 준비하는데는 총 10분이 소요되었습니다.