키워드
es8, syntactic sugar
콜백에 의한 비동기 처리를 좀 더 가독성 있으면서, 메서드를 통해 간편하게 처리할 수 있도록 Promise
객체가 나타났다. async/await
는 Promise
와 기능이 동일하다. 기존 기능이 문제가 있어서 개선하기 위해 나타나기 보다는, Promise
를 좀 더 간편하게 사용하기 위해 나타났다. 이러한 기능들을 보고 syntactic sugar
라고 한다.
선언하는 함수 앞에 async
를 붙이면 된다. 함수에 async
를 붙이는 것을 통해 기존 함수와 두 가지 차이가 생기게 된다.
await
를 사용하여 비동기 프로세스를 진행할 수 있게 된다.Promise
객체가 된다.기존 Promise.then()
작업을 await
가 담당한다. 만약 해당 이벤트가 비동기 과정이 필요한 이벤트의 경우라면 호출 시 await
를 사용하는 것으로, 비동기 과정을 진행할 수 있게 된다. 단 await
를 사용하기 위해서는 이러한 과정을 진행하는 부모 함수를 생성하여 async
를 선언해줘야 한다. await
역시도 리턴 값은 Promise
객체이다. Promise.catch()
에 의한 예외 처리 작업은 try/catch
를 통해 해주면 된다.
Promise
를 사용하면서 Promise
를 반환하는 고차함수 작업을 하는 작업이 많아졌다. 이 때 Promise 생성자와 resolve()
, reject()
도 함께 작업을 해주어야 하는데 이게 길어서 귀찮다. 이럴 때 함수에 async
를 달아주는 것 만으로 Promise 를 리턴 할 수 있게 하였다.
비동기 시 Promise
를 통해 콜백지옥에서 벗어날 수 있었다. 다만 비동기 요청이 잦은 상황에서, 중간 중간 동기 이벤트가 섞여지는 경우에는 Promise
만으로는 가독성이 좋다고 할 수 없게 되었다. (물론 콜백으로 하는 것보단 좋다)
await
를 사용하면 동기 작업은 그대로 호출하고 비동기 작업에만 await
를 걸어주면 되기 때문에, Promise.then()
대비 한 블럭 안에서 동일하게 처리할 수 있는 경우가 많아진다.
😓 다만 코드의 작성량이나 줄은
Promise.then()
보다 길어질 수 있다. 이 방식도 개발자마다 선호하는 것이 다르다고 하는데… 사실 뭘 사용하든 상관은 없다. 어차피 취업하면 회사 컨벤션에 맞춰 사용해야 한다.