비동기(Async) 수행의 필요성

자바스크립트는 싱글스레드이지만 이벤트루프가 있어 비동기 실행이 가능하다.
실생활에서 자주 접하는 어플리케이션들은 대부분 비동기 수행을 지원하고 있다. 왜냐하면 가장 대표적인 비동기 작업인 서버에 요청하고 서비스 받는 작업은 대부분 앱에서 필수적이기 때문이다.
서버에 요청해놓고 다른 작업을 할 수 있어야 한다. 그렇지 않으면 고객들은 비동기, 즉 멀티태스킹이 가능한 다른 서비스를 찾아 떠날 것이 분명하다.

callback 의 필요성

비동기 수행이 중요한 것까지는 알았는데, callback 함수는 비동기 함수와 무슨 관련이 있을까?
callback은 비동기 수행들간에 순서를 정할 필요가 있을 때 중요하다.
3가지 비동기 콜백을 모두 사용하는 데 1~3번째 순서대로 실행되는 게 필요하다면 1번 콜백함수 내에 2번 콜백함수를 호출하고 2번 콜백 함수내에 3번 콜백 함수를 호출하는 식으로 체이닝을 해야 하는데,
체이닝이 길어질 수록 가독성이 낮아져 이를 콜백 지옥이라 부른다.

Promise 의 필요성

콜백 지옥을 탈출하고 가독성을 높이기 위해 Promise란 클래스가 생겨났다.
new Promise(constructor) . constructor 함수 내에 resolve나 reject 메소드를 쓰면
.then 메소드의 인자로 매개변수를 넘겨서 사용할 수 있다.
Promise도 사용하다 보면 콜백 지옥처럼 .then메소드 내에 .then으로 내부의 내부로 이어지는 chaining이 길어질 경우 Promise 지옥에 빠질 위험도 있다.

Async/await 의 필요성

Promise 지옥에 빠질 경우도 없애줄 뿐만 아니라 동기적인 것처럼 코딩할 수 있어 가독성이 훨씬 뛰어나다.
async Keyword는 함수 선언 function keyword 앞에 사용하며, 사용 시 block 내부가 Promise로 인식 된다.
await keyword는 async로 지정된 함수 내부에서만 사용할 수 있고, await을 쓰면 await 뒤에 있는 비동기 함수가 실행되고 return 값 혹은 resolve값이 return되어 변수에 할당할 수 있게 된다.