async 콘솔에 찍어본 기록

그냥 소소한 정리이다. 눈으로 확인해본 기록.

async function f() {
	console.log("async function f 시작");
  	let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  	let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)
	console.log("await이후의 function f");
  	console.log(result); // "완료!"
}

async function a(){
    console.log("async function a 시작");
    }
    
f();
a();

async함수 내의 await을 만나면

프라미스가 처리되길 기다리는 동안엔 엔진이 다른 일(다른 스크립트를 실행, 이벤트 처리 등)을 할 수 있기 때문에, CPU 리소스가 낭비되지 않습니다.

 

라고 해서 어디로 가는 건가 내부 함수 await 다음부분은 아니겠지 하고 눈으로 직접 확인하고자 작성해보았다.

 

결과 :

async function f 시작
async function a 시작
Promise {<fulfilled>: undefined}
await이후의 function f
완료!

 

1. 이는 f먼저 실행했기에, f시작이 찍히고,

2. 그 도중 두번째 await을  만나 다음 실행함수로 넘어가 a를 실행해서 a 시작이 찍힌다.

3. a는 await이 없기에 async는 프로미스를 리턴하는 모습을 확인 할 수 있었다.

4. await이 끝나고 이후 문구가 찍히는 것을 확인ㅇ.

5. await을 통해 받아온 result역시 찍히는 것을 확인.