전체 QNA

await를 굳이 사용해야 하나요?

10/12/2023 작성

질문

비동기 함수를 왜 굳이 동기처럼 실행시키기 위해 await을 사용하는 건가요? 처음부터 함수를 만들때 동기로 만들면 되는거 아닌가요?

동기, 비동기가 잘이해가 안가네요..

 

답변

안녕하세요 이정환입니다.

자바스크립트에는 다음과 같은 내장 비동기 함수들이 존재합니다.

  • fetch : 서버로부터 데이터를 받아오는 API 호출을 해주는 함수
  • setTimeout : 특정 시간 이후 콜백함수를 실행시켜주는 함수
  • setInterval : 특정 시간 마다 틱을 발생시켜 콜백함수를 주기적으로 실행시키는 함수
 

이런 함수들은 모두 Promise를 반환하기 때문에

자동으로 비동기적으로 동작하게 됩니다.

그런데 가끔 우리가 코드를 작성하다보면, 이런 비동기 함수의 결과값들을 바로바로 이용하고 싶을 때가 있습니다.

예를 들면 다음과 같은 상황이 있을 수 있죠

  1. fetch를 이용해 A서버로부터 배열 형태의 게시글 데이터를 불러오기
  2. 데이터를 불러왔다면 특정 조건을 이용해 필터링 하기

이때 2번 동작을 실행시키기 위해서는 1번 동작이 끝난 다음에, 결과값을 받아와 실행시켜줘야 합니다.

그런데 1번 동작이 비동기적으로 동작하기 때문에 이를 동기적으로 처리하기가 어렵습니다.

따라서 위와같은 경우에 async, await 키워드를 이용해 다음과 같이 동기적으로 직관적으로 코드를 작성할 수 있습니다.

COPY
async function getDataAndFiltering(){
  // 비동기 작업 : 1번에 해당함
  const data = await fetch(...).then((res)=>res.json());

  // 동기 작업 : 2번에 해당함const filteredData = data.filter(...);
  return filteredData;
}