JavaScript :: async, await

  async  

async는 일종의 synctactic Sugar이다.

 (synctactic sugar란 문법적 기능은 그대로이나 읽기 편리한 코드.)

 

Promise를 적지않아도,

함수 앞에 async를 붙이면 Promise를 사용한 것과 같은 결과를 준다.

 

왼쪽의 Promise를 사용한 코드와

오른쪽의 async를 사용한 코드의 결과가 동일하다.

 

async를 사용할 경우, 좀더 적은양의 코드를 사용할 수 있다.

 

 

  await  

await은 async가 있을때에만 사용 가능하다.

await 은 뒤쪽의 코드가 실행된 후,

그 다음코드가 실행되게 한다.

즉 비동기적인 코드들이 순서대로 실행될 수 있도록 도와준다.

 

await은 비동기적 코드를 순서대로 읽기 편하게 만들어줌으로써

가독성을 높여준다.

 

await을 사용하지 않았다면, return '🍎';을 콜백함수로 사용해야하지만,

await을 사용할경우 순서대로 코드를 읽을 수 있으므로 편하다.

 

그러나 위와같이 작성할 경우 pickFruits에서 콜백지옥과 같은 모습이 보인다.

pickFruits에서도 promise(then)을 사용하는 대신 await을 사용하여 가독성을 높일 수 있다.

 

 

이렇게 작성할경우 apple에서 getApple을 실행하는 시간 3초,

bannana에서 실행하는 시간 3초를 기다린 후,

return을 해줌으로 6초가 지난후 console창에 🍎 + 🍌가 나온다.

 

apple과 banana가 동기적으로 실행될 필요가 없으므로,

Promise함수는 호출 즉시 실행되는 특성을 사용하여 아래와 같이 코드를 작성할 수 있다.

applePromise에서 getApple을 호출하고(호출즉시 실행되므로 호출된 후 3초)

await이없으므로 바로 bananaPromise에서 getBanana를 호출(이 역시 호출 후 3초),

apple과 banana에서는 이미 실행돤 getApple과 getBanana를 호출하므로,

return의 총 소요시간은 3초이다.