Async Programming

Asynchronous

• synchronous code는 task가 순차적으로 처리되나, asynchronous code는 task의 실행 순서가 보장되지 않는다.

---

JavaScript Async Programming

• JavaScript는 single thread로 동작한다.
  • 만약 async가 아닌 sync였다면, 한 태스크를 처리할 때까지 다른 태스크는 실행하지 않을 것이다.
• 동시성을 지원하기 위해 event loop 기능이 있다.
• 예시
  • local file loading
  • network에서 file, data 가져오기
  • setTimeout 등

---

Async 구현 방법

1. Timeouts/Intervals

• timeout code가 2번째 console.log code보다 먼저 실행되지만, log의 순서는 다르게 나온다.
• callback이 1초 뒤 호출 된다.

setTimeout(() => { console.log('timeout callback'); }, 1000);
console.log('second console log');

// 예상 결과
// second console log
// timeout callback

2. Promise

• JavaScript callback 지옥 issue를 해결하기 위한 기능

let myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Promise Success!");
  }, 1000);
});

myPromise.then((message) => {
  console.log("message? " + message);
});

• Promise은 쉽게 말하면 약속을 잡는 것이다.
  • resolve를 호출하면서 약속을 이행함을 알리는 방식이다.
  • 예시 code에서 promise를 생성하면서 약속을 만들었고, 1초 timeout으로 해당 약속이 성공함을 알렸다.
  • 결과적으로 then을 호출하면서 성공하였을 때, callback을 실행하는 방식이다.

• lifecycle은 성공, 실패로 나뉠 수 있다.
  • 즉, error handling도 가능하다.

3. Async/Await

let myPromise = async () => {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Promise Success!");
    }, 1000);
  });
  let result = await promise; // promise 반환 될 때까지 기다림
  console.log(result);
  console.log('after new promise');
};

console.log('first console log');
myPromise();
console.log('second console log');

• async keyword를 이용하여 code가 async로 동작하게 할 수 있다.
  • 내부적으로 Promise를 반환하는 function이 된다. Promise를 생성하는 code가 없어도 자동으로 Promise로 반환한다.
  • Promise를 쉽게 사용하는 방법이라고 한다.
• await keyword는 async 함수 안에서만 동작한다.
  • Promise가 처리될 때까지 함수 실행을 기다리게 한다.

---

출처

모던 자바스크립트 DeepDive
JavaScript Async/Await Tutorial – Learn Callbacks, Promises, and Async/Await in JS by Making Ice Cream
Asynchronous JavaScript
Promise - MDN
async와 await를 사용하여 비동기 프로그래밍을 쉽게 만들기

---

NEXT. JavaScript EventLoop