[JavaScript] Async & Await이란

Async

 

Async는 비동기 함수를 정의할 때 사용하는 키워드

함수를 만들 때 사용하는 function 키워드 앞에다가 붙여주기. -> 비동기 함수가 됨. 그렇다면 이 함수와 일반 함수는 어떤 차이가 있을까?

 

async function getUser() {
  return "kangNew";
}

const user = getUser();
console.log(user);

 

Async를 붙여주면 이 함수는 항상 프로미스를 리턴하는 '비동기 함수'가 됩니다.

 

함수 안에서 어떤 값을 리턴해주면 그 값은 프로미스로 감싸져서 반환됨. 그렇기에 getUser로부터 반환된 user는 프로미스가 됨. 출력해보면 프로미스 출력. 이제 'kangNew'라는 문자열에 접근하기 위해서는 프로미스에 'then'을 사용하면 됨.

  user.then((name) => {
    console.log(name); // kangNew
  });

 

---

getUser가 비동기 작업을 수행하도록 만들어보자.
이 함수는 네트워크 요청을 해서 서버로부터 사용자 이름을 받아오는 일을 한다고 가정해보자. 함수를 하나 만들자.

 

networkRequest 함수는 그냥 네트워크 요청에 2초가 걸린다는 것을 흉내내는 함수. 함수를 호출하고 2초 뒤 '데이터를 받아왔습니다.'가 출력.

  function networkRequest() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log("데이터를 받았습니다.");
        resolve();
      }, 2000);
    });
  }

  async function getUser() {
    networkRequest();
    return "kangNew";
  }

  const user = getUser();

  user.then((name) => {
    console.log(name);
  });

 

 

 

내가 원하는 동작은 데이터를 먼저 받은후에 'kangNew'를 리턴해줘야하는데 반대로 동작을 합니다. networkRequest를 먼저 처리를 하고 값을 받고 싶을때 이때 사용하는 것이 바로 Await

---

Await

newRequest() 앞에 await를 붙여주면 이 함수가 끝날 때까지 함수의 진행을 잠시 멈춰서 기다렸다가 다 끝나고 나면 'kangNew'를 리턴하여 출력합니다.

  function networkRequest() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log("데이터를 받았습니다.");
        resolve();
      }, 2000);
    });
  }

  async function getUser() {
    await networkRequest();
    return "kangNew";
  }

  const user = getUser();

  user.then((name) => {
    console.log(name);
  });

 

 

Await 은 프로미스가 완료될 때까지 기다려주는 역할을 합니다.

 

---

결론

 

이처럼 Async와 Await을 사용하면 비동기 작업을 마치 동기적으로 수행하듯이 코드를 짤 수 있다. 프로미스 개념에서는 여러 개의 비동기 작업을 순차적으로 처리해주기 위해서 promise chaining을 사용했음. 이를 사용하는 것보다 Async와 Await을 사용하면 훨씬 가독성이 높은 코드를 작성할 수 있음.