[JavaScript] async, await

async와 await은 자바스크립트에 가장 최근 도입된 비동기 처리 방식인 콜백 함수와 프로스미스의 단점을 보완했으며 가독성 높은 코드를 작성할 수 있다.

async는 함수 앞에 붙이는 키워드로 이 함수는 asynchronous라는 의미이다.

어떤 함수인지 쉽게 유추가 가능하다.

async, await 함수는 기본적으로 Promise 객체를 다룬다.

asnyc는 Promise 객체를 반환하고 await은 Promise 객체를 사용할 수 있도록 해준다.

// async 사용 예시
const test = async ()=>{
	return "hi"; 
}
console.log(test());

hi를 출력하는게 아닌 Promise 객체로 감싸진 형태로 넘어온 hi를 볼 수 있다.

이렇게 async 함수는 Promise 객체를 반환하는 것을 확인 할 수 있다.

// await 사용 예시
const test = async ()=> {
	return "hi";
}

const test2 = async()=>{
	const sayHi = await test(); 
	console.log(sayHi);
}

console.log(test2())

await은 Promise 객체인 test 함수의 실행이 끝나기를 기다린다. 출력 결과에 Promise 객체가 있는 것은 console.log(test2())의 결과 값이고 역시 async 함수는 Promise 객체를 반환하는 것을 다시 볼 수 었다.

실행 결과가 뭔가 이상하다??
원래라면 hi가 먼저 나오고 promise 객체가 나와야한다. 하지만 반대로 나왔다... 왜 일까?
이게 바로 앞에서 봤던 비동기 처리의 결과인 것이다!!

await을 좀 더 체감할 만한 다른 예시를 봐보자!!

const waitOneSecond = (msg) => {
  return new Promise((resolve,_)=>{
    setTimeout(()=>resolve(`${msg}`),1000);
  });
}

const countOneToTen = async () => {
  for (let x of [...Array(10).keys()]){
    let result = await waitOneSecond(`${x+1}초 대기중 ...`);
    console.log(result);
  }
  console.log("완료");
}

countOneToTen();