setTimeout + async/await로 sleep

자바나 파이썬에는 실행을 입력한 시간만큼 멈추는 sleep이나 wait가 있지만
자바스크립트에서는 사용자가 직접 구현해야합니다.
setTimeout이 비슷하지만 아래와 같이 사용하면 예상이랑 다른 결과가 나옵니다.

 

function test(){
  console.log('a');
  setTimeout(() => console.log('time'), 3000);
  console.log('b');
}

// a
// b
// time

 

setTimeout은 비동기로 동작하기 때문에 먼저 실행이 가능한 a, b가 
먼저 콘솔에 찍히고 3초후에 time이 찍힙니다.

 

async/await 사용하면 동기적으로 실행을 하게 할 수 있지만 setTimeout은 Promise를
반환하지 않기 때문에 async/await를 적용해도 제대로 동작하지 않습니다.
a가 찍히고 5초후에 b가 나오지않고 a,b가 순차적으로 바로 찍힙니다.

 

async function test(){
	console.log('a');
 	await setTimeout(() => {}, 5000);
 	console.log('b');
}

 

아래와 같이 Promise를 반환하게 해주면 원하는 결과대로 동작합니다.

 

const sleep = delay => new Promise(resolve => setTimeout(resolve, delay));

async function test() {
	console.log('aa');
	await sleep(3000);
	console.log('bb');
}