Await/Async가 무엇이냐고 묻는다면

Await/Async 에 대한 무성한 소문만 들어왔던 나.. 마음먹고 Await/Async에 대해 공부하기로 했다!

🏹 Await/Async 란 무엇인가

사실 내가 설명하는 것 보다 공식 문서를 읽는게 빠르다. 이 글은 단지 내가 읽은 것을 (이해할 수 있는 범위에서, 간단히) 정리하고 복습하기 위한 용도이다.
한마디로 Await/Async는 비동기 코드를 동기적으로 처리하기 위한 방법이다.
공식 문서 링크: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

동기는 하나의 일이 끝나야 다음 일을 수행하는 방식을, 비동기는 다른 일이 끝나는 것과는 상관 없이 다음 일을 수행하는 방식을 의미한다. JavaScript는 기본적으로 비동기방식을 사용한다.

본격적으로 Await/Async에 대해 이해하기 위해 Callbacks, Promise를 먼저 알아보자.

🏹 Callbacks 란 무엇인가

• JS Callbacks
  • "I will call back later!"
  • 다른 함수에 대한 인수(argument)로 전달되는 함수
  • 함수가 → 다른 함수 호출
  • 다른 기능이 완료된 후 실행
  • example code

    function myDisplayer(something) {
      document.getElementById("demo").innerHTML = something;
    }
    
    function myCalculator(num1, num2, myCallback) {
      let sum = num1 + num2;
      myCallback(sum);
    }
    
    myCalculator(5, 5, myDisplayer);

    myCalculator()에서 myDisplayer를 인자로 호출하고 있다 → sum 기능이 완료된 후 myDisplayer()가 실행된다.

🏹 Asynchronous 란 무엇인가

• JS Asynchronous
  • "I will finish later!"
  • 비동기 함수: 다른 함수와 병렬로 실행되는 함수
  • JavaScript setTimeout()
  • example code

    setTimeout(myFunction, 3000);
    
    function myFunction() {
      document.getElementById("demo").innerHTML = "I love You !!";
    }

    실행 결과: 3초 뒤에 “I love You”가 출력된다.

🏹 Promises 란 무엇인가

• JS Promises
  • "I Promise a Result!"
  • Producing code: 시간이 걸리는 코드
  • Consuming code: 결과를 기다려야 하는 코드
  • Promise: Producing code와 Consuming code를 연결하는 자바스크립트 객체
  • example code

    function myDisplayer(some) {
      document.getElementById("demo").innerHTML = some;
    }
    
    let myPromise = new Promise(function(myResolve, myReject) {
      let x = 0;
    
    // The producing code (this may take some time)
    
      if (x == 0) {
        myResolve("OK");
      } else {
        myReject("Error");
      }
    });
    
    myPromise.then(
      function(value) {myDisplayer(value);},
      function(error) {myDisplayer(error);}
    );

    myPromise.then() 부분에서 myPromise의 producing code가 실행되고 나면 resolve와 reject 결과를 출력한다.

🏹 Async/Await 란 무엇인가

• JS Async/Await
  • "async and await make promises easier to write”
  • async: 함수가 Promise를 return하도록 한다
  • await: 함수가 Promise를 wait하도록 한다
  • example code

    async function myDisplay() {
      let myPromise = new Promise(function(resolve, reject) {
        resolve("I love You !!");
      });
      document.getElementById("demo").innerHTML = await myPromise;
    }
    
    myDisplay();

    await을 통해 myPromise를 wait하고, async를 통해 myPromise를 return한다.