자바스크립트는 싱글 스레드(Single-threaded) 기반의 언어로, 여러 작업을 동시에 처리하는 것이 어렵습니다. 그러나 비동기 처리를 통해 웹 애플리케이션에서도 효율적으로 작업을 다룰 수 있습니다. 이번 블로그 포스트에서는 자바스크립트에서 비동기 처리를 어떻게 다루는지 살펴보겠습니다.

1. 콜백 함수 (Callbacks)

function asyncProcess(callback) {
  setTimeout(function() {
    callback("비동기 처리 완료!");
  }, 2000);
}

console.log("작업 시작");
asyncProcess(function(result) {
  console.log(result);
});
console.log("작업 종료");

위의 예제에서는 setTimeout을 사용하여 2초 후에 콜백 함수를 실행하는 asyncProcess 함수를 정의했습니다. 첫 번째 console.log는 “작업 시작”을 출력하고, 마지막 console.log는 “작업 종료”를 출력합니다. 그 사이에 asyncProcess 함수의 비동기 처리가 실행되고, 그 결과를 콜백 함수를 통해 전달받아 출력합니다.

2. 프로미스 (Promises)

function asyncProcess() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve("비동기 처리 완료!");
    }, 2000);
  });
}

console.log("작업 시작");
asyncProcess()
  .then(function(result) {
    console.log(result);
  })
  .catch(function(error) {
    console.error(error);
  });
console.log("작업 종료");

프로미스는 콜백 지옥(Callback hell)을 해결하기 위한 패턴으로, ES6부터 자바스크립트에 도입되었습니다. 위의 예제에서는 asyncProcess 함수가 프로미스를 반환하도록 변경되었습니다. resolve를 호출하여 비동기 처리의 성공 결과를 전달하고, reject를 호출하여 실패 결과를 전달할 수 있습니다. .then과 .catch를 사용하여 성공과 실패에 대한 콜백 함수를 등록할 수 있습니다.

3. async/await

function asyncProcess() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve("비동기 처리 완료!");
    }, 2000);
  });
}

async function main() {
  console.log("작업 시작");
  try {
    const result = await asyncProcess();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
  console.log("작업 종료");
}

main();

async/await는 ES2017부터 자바스크립트에 추가된 비동기 처리를 위한 문법입니다. 위의 예제에서는 async 키워드를 사용하여 main 함수를 비동기 함수로 작성하였습니다. await를 사용하여 비동기 함수의 반환 값을 기다린 다음, 해당 값을 변수에 할당하여 사용할 수 있습니다. try-catch 구문을 사용하여 오류 처리를 할 수도 있습니다.

위의 3가지 방법은 모두 자바스크립트에서 비동기 처리를 다루는 방법 중 일부입니다. 각각의 방법에는 장단점이 있으므로, 상황에 맞게 적절한 방법을 선택하여 사용하시면 됩니다.

*참고 문서: MDN Web Docs - Promise (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)