async와 await 는 자바스크립트의 비동기 처리 패턴중 가장 최근에 나온 문법입니다.
기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와주죠.

개발자에게 읽기 좋은 코드란?

처음 프로그래밍을 배웠을때 아래와 같은 변수와 조건문을 사용했던 기억들 있으실겁니다.

var user = {
id: 1,
name:'josh'
};
if(user.id ===1) {
console.log(user.name); // josh
}

이 코드는 user라는 변수에 객체를 할당한 뒤 조건문으로 사용자의 아이디를 확인하고 콘솔에 사용자의 name을 찍는 간단한 코드입니다.

우리는 이렇게 위에서 부터 아래로 한 줄 한 줄 차근히 읽으면서 사고하는 편이 편합니다.

그래서 읽기 좋은 코드와 async & await 가 무슨상관이죠?

조금전에 읽고 이해한 방식대로 코드를 구성하는 것이 async , await 문법의 목적입니다. 다음 코드를 한번 볼까요 ?

var user = fetchUser('domain.com/user/1');
if(user.id===1){
console.log(user.name);
}
fetchUser() 라는 메서드를 호출하면 앞에서 봤던 코드처럼 사용자 객체를 반환한다고 해보겠습니다. 그리고 여기서 fetchUser() 메서드가 서버에서 사용자 정보를 가져오는 HTTP 통신 코드라고 가정한다면 위 코드는 async & await 문법이 적용된 형태라고 보셔도 됩니다.

asnyc & await 기본 문법

이제 async await 의 기본 문법을 알아보겠습니다.
async function 함수명() {
await 비동기처리메서드_명();
}

먼저 함수의 앞에 async 라는 예약어를 붙입니다. 그러고 나서 함수의 내부 로직중 HTTP 통신을 하는 비동기 처리 코드 앞에 await 를 붙입니다. 여기서 주의하셔야 할 점은 비동기 처리 메서드가 꼭 프로미스 객체를 반환 해야 await가 의도한 대로 동작합니다.

일반적으로 await 의 대상이 되는 비동기 처리 코드는 Axios 등 프로미스를 반환하는 API 호출 함수입니다.

간단한 예제

function fetchItems(){
	return new Promise(funcion(resolve,reject){
	var items = [1,2,3] ;
	resolve(items)
		
});

async function logItems() {
	var resultItems =await fetchItems(); 
	console.log(resultItems); // [1,2,3]

}

}

먼저 fetchItem 함수는 프로미스 객체를 반환하는 함수입니다. 프로미스는 "자바스크립트 비동기 처리를 위한 객체"라고 배웠었죠 fetchItems()함수를 실행하면 프로미스가 이행(Resolved)되며 결과 값은 items 배열이 됩니다.

그리고 이제 logItems()함수 보겠습니다. logItems()함수를 실행하면 fetchItems()함수의 결과값인 items 배열이 resultItems 변수에 담깁니다. 따라서 ,콘솔에 [1,2,3] 이 출력되죠

await 를 사용하지 않았다면 데이터를 받아온 시점에 콘솔을 출력할 수 있게 콜백 함수나 .then () 등을 사용해야 했을 겁니다. 하지만 async await 문법 덕에 비동기에 대한 사고를 하지않아도 되는 것이죠 .

※참고 : 만약 위 코드가 왜 비동기 처리 코드인지 이해가 안가신다면 fetchItems() 를 아래의 함수들로 바꿔서 실행해보셔도 됩니다. :)