1. async await 사용 이유

1.1 정의

async/await 은 자바스크립트의 비동기 처리 패턴 중 기존의 비동기식 처리인 콜백 함수, Promise의 단점을 보완하여 만들어진 가장 최신 문법이다. 아래의 표는 Promise와 async/await을 간단하게 비교한 것이다.

Promise를 사용하여 비동기 처리를 하다 보면 프로미스 체이닝으로 인해 then 지옥이 발생하는데 이는 코드 가독성을 많이 떨어트린다. 반면에 async/await은 프로미스와 달리 후속 처리 메서드 없이 비동기를 동기처럼 사용할 수 있다. 이처럼 async/await은 then을 사용하지 않아도 되고, 비동기 함수를 만들 필요도 없으며, 코드를 nesting* 하지 않기 때문에 코드 가독성이 좋다는 장점이 있다.

에러를 잡아내는 try catch 문법을 사용하는 데에도 차이점이 있다. 프로미스는 프로미스 객체내부에서 발생한 에러를 프로미스 처리 메서드 catch로 처리하기 때문에, 프로미스 객체 내부에 발생한 에러를 프로미스 외부에서 잡아내지 못한다. 하지만 async/await은 모든 동기와 비동기 에러를 try catch를 통해 처리할 수 있어 에러 파악이 보다 용이하다는 장점이 있다.

*nesting : 코드내에 코드를 작성하는것

2. async

2.1 async function 사용 방법

2.1.1 함수 선언식

async 키워드는 함수 앞에 작성한다. 사용법은 놀랍게도 이게 끝이다. 아래의 두 함수는 모두 같은 내용인데, 이는 async가 결괏값을 프로미스로 반환한다는 것을 묵시적으로 보여 준다. 함수 앞에 async를 붙이는 순간 해당 함수는 프로미스 외의 다른 값을 리턴하더라도 그 값을 그대로 반환하지 않고 프로미스로 감싸 반환한다. 즉 async 사용으로 함수의 반환 타입이 promise로 변환된다는 것이다.

async function planet() {
	return "🌎";
}

// .then()으로 바로 호출 가능
planet().then(console.log);

function planet() {
	return Promise.resolve("🌎");
};

planet().then(console.log);

2.1.2 함수 표현식

async 함수는 함수 선언식뿐만 아닌 함수 표현식으로도 사용할 수 있다.