자바스크립트는 비동기 처리를 위해 주로 콜백 패턴을 사용했습니다. 이 패턴은 콜백 함수를 이용해 비동기 작업을 처리하는 방식입니다. 그러나 콜백 패턴은 여러 개의 비동기 작업을 연결하거나 에러 처리를 어렵게 만들 수 있습니다.

ECMAScript 2017부터 도입된 async/await 문법은 콜백 패턴의 이러한 단점을 보완하고 가독성을 향상시킵니다. 이 문법은 Promise를 기반으로 비동기 작업을 동기적으로 작성할 수 있게 해줍니다.

콜백 패턴

콜백 패턴은 비동기 작업을 처리하는 가장 기본적인 방식입니다. 함수의 인자로 콜백 함수를 전달하고, 비동기 작업이 완료되면 콜백 함수를 호출하는 방식입니다. 예를 들어, 파일을 읽는 작업을 콜백 패턴으로 처리할 때는 다음과 같은 코드를 작성할 수 있습니다.

const fs = require('fs');

function readFile(filePath, callback) {
  fs.readFile(filePath, 'utf8', (err, data) => {
    if (err) {
      callback(err, null);
    } else {
      callback(null, data);
    }
  });
}

readFile('example.txt', (err, data) => {
  if (err) {
    console.error('Error:', err);
  } else {
    console.log('Data:', data);
  }
});

콜백 패턴은 비동기 작업을 이해하기 어렵게 만들고, 에러 처리와 여러 개의 비동기 작업을 연결하기 번거로워집니다. 이런 단점을 극복하기 위해 async/await가 도입되었습니다.

async/await

async/await는 비동기 작업을 동기적으로 작성할 수 있도록 도와주는 비동기 함수를 작성하는 문법입니다. async 함수는 반드시 Promise를 반환해야 하고, await 키워드는 Promise의 결과를 기다리도록 만듭니다. 즉, async/await 문법을 사용하면 비동기 작업을 동기적으로 작성할 수 있습니다. 위의 파일 읽기 예제를 async/await로 작성하면 다음과 같습니다.

const fs = require('fs').promises;

async function readFile(filePath) {
  try {
    const data = await fs.readFile(filePath, 'utf8');
    return data;
  } catch (err) {
    throw err;
  }
}

(async () => {
  try {
    const data = await readFile('example.txt');
    console.log('Data:', data);
  } catch (err) {
    console.error('Error:', err);
  }
})();

async 함수 내부에서는 동기적으로 코드를 작성할 수 있으며, await 키워드를 사용하여 Promise의 결과를 받을 수 있습니다. 이렇게 작성된 async/await 코드는 가독성이 우수하고, 에러 처리와 비동기 작업의 연결이 간단해집니다.

결론

자바스크립트의 async/await 문법은 콜백 패턴의 번거로움과 가독성 문제를 개선한 실용적인 방법입니다. 비동기 작업을 동기적으로 작성하고, Promise를 기반으로 보다 쉽게 에러 처리할 수 있습니다. 또한, async/await는 콜백 패턴과 달리 여러 개의 비동기 작업을 간편하게 연결할 수 있는 장점도 있습니다. 따라서, 자바스크립트에서 비동기 작업을 처리할 때는 async/await를 적극 활용하는 것이 좋습니다.