1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | function function1() { // "나 먼저 수행해볼까?" console.log('function1'); function2(); // function 2로 가즈아 } function function2() { // "윗사람 끝나고 내차례 왔다!" setTimeout(function () { // 어라..? 요건 바로 비동기함수!? // 지정대기시간 후에 동작해야하는군..ㄱㄷ.. console.log('function2'); }, 0); function3(); } function function3() { // "위에 애는 뭐 하는 중이래 난 그냥 실행!" console.log('function3'); } // 호출 순서는 다음과 같다 function1 function3 function2 | cs |
🔥async/await 내부 동작 과정
JS에선 await 비동기 함수와 함께 사용 되어
Promise가 해결되거나 거부될 때까지 실행을 일시 중지함✋
함수 내부에서만 사용 가능⭕
async 사용하면 await 함수 실행은 비동기 작업이
완료되고 해결된 값을 반환할 때까지 기다림
이를 통해 비동기 코드를 보다 동기적인 스타일로
작성할 수 있어 읽고 유지 관리하기가 더 쉬워짐
1 2 3 4 5 6 7 8 9 10 11 | const one = () => Promise.resolve('One!'); // 동기 코드, 즉시 Promise 객체 반환 async function myFunc() { console.log('In function!'); // 동기 - 2번째 출력 const res = await one(); // 비동기 - Promise 해결을 기다림 console.log(res); // 비동기 - 5번째 출력 } console.log('Before Function!'); // 동기 - 1번째 출력 myFunc(); // 동기 - 함수 호출 자체는 3번째 출력 console.log('After Function!'); // 동기 - 4번째 출력 | cs |
👉 console에 'Before Function!'이 출력🖨
async 함수 myFunc( ) 호출됨📢
👉 async 함수 안에 있는 console 함수가 실행되어
console에 'In Function!'이 출력🖨
👉 Promise 객체를 반환하는 one( ) 비동기 함수를 호출📢
이때 one( ) 비동기 함수 왼쪽에 await 키워드로 인해
myFunc 함수의 내부 실행은 잠시 중단되고 Call stack에서
빠져나와 나머지 부분은 Microtask Queue에 적재됨
이는 JS 엔진이 await 키워드 인식하면
async 함수의 실행은 지연되는 것으로 처리하기 때문❗
👉 마지막으로 console에 'After Function!'이 출력🖨
👉 모든 메인 스레드의 JS 코드가 실행이되어
더이상 Call Stack엔 실행할 스택이 없어 비워지게 됨💨
그러면 이벤트 핸들러가 이를 감지하여
Microtask Queue에 남아있는 async 함수를 빼와 Call Stack에 적재❗
Promise 객체의 결과물인 'One!' 문자열을 변수 res에 받고 이를 console에 출력🖨
