JavaScript 비동기? (feat. Promise, Async, Await)

1. 동기 vs. 비동기

• 동기 (Synchronous)
  • 동기적인 작업은 순서대로 실행된다. 즉, 한 작업이 시작되면 다음 작업은 이전 작업이 완료될 때까지 기다린다.
  • 코드가 순차적으로 실해되기 때문에 결과를 예측하기 쉬우며, 간단한 디버깅이 가능하다.
  • But, 작업이 끝날 때까지 기다려야 하므로, 대규모 작업이나 시간이 오래 걸리는 작업의 경우 성능에 영향을 줄 수 있다.
  • 대표적으로 JavaScript가 동기적으로 작동하는 언어다.
• 비동기 (Asynchronous)
  • 순서와 관계없이 독립적으로 실행된다. 즉, 한 작업의 완료를 기다리지 않고 다음 작업을 실행할 수 있다.
  • 비동기 작업은 주로 콜백(Callback), 프로미스(Promise), 혹은 비동기 함수(async / await)를 통해 처리된다.
  • 이러한 방식은 대규모 작업이나 여러 작업을 동시에 처리할 때 유용하다. 네트워크 호출, 파일 읽기/쓰기, 데이터베이스 쿼리 등이 해당된다.
  • BBut, 코드의 복잡성이 증가하고, 디버깅이 어려울 수 있다. 또한, 콜백 지옥(Callback hell)이라고 불리는 콜백 함수의 중첩이 발생할 수 있다.
• JavaScript의 비동기
  • JavaScript는 애초에 동기적으로 동작하는 언어이다.
  • Synchronous의 단점을 보완하기 위해 비동기적으로 처리될 수 있는 메커니즘이 있다.
  • 바로 Callback, Promise, async/await 함수이다.

2. Callback

• 콜백은 가장 기본적인 비동기 처리 방식 중 하나이다.
• 함수를 다른 함수의 인자로 전달하여, 비동기 작업이 완료되면 해당 함수(콜백 함수)를 호출

function fetchData(callback) {
  setTimeout(function () {
    callback('Data fetched!');
  }, 1000);
}

function processData(data) {
  console.log(data);
}

fetchData(processData);

 

3. Promise

• ES6에서 추가된 Promise는 비동기 작업을 더욱 명확하고 유연하게 다룰 수 있도록 해준다.
• 비동기 작업의 성공 또는 실패를 나타내는 객체
• .then(), .catch() 메서드를 사용하여 성공과 실패에 대한 처리를 지정할 수 있다.

function fetchData() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve('Data fetched!');
    }, 1000);
  });
}

fetchData()
  .then(function (data) {
    console.log(data);
  })
  .catch(function (error) {
    console.error(error);
  });

 

3. Async / Await

• ES8에서 추가된 async/await는 비동기 코드를 동기식으로 작성할 수 있도록 해준다.
• async 함수 내에서 await을 이용하여 비동기 작업의 완료를 기다릴 수 있다.
• 코드가 동기적으로 보여 가독성이 향상된다.

async function fetchData() {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve('Data fetched!');
        }, 1000);
    });
}

async function processData() {
    const data = await fetchData();
    console.log(data);
}

processData();