자바스크립트는 싱글 쓰레드 언어로, 하나의 작업이 끝나기 전에 다음 작업을 실행할 수 없습니다. 그러나, 자바스크립트에서 비동기적으로 동작하는 함수를 호출할 수 있습니다. 비동기 함수는 실행이 끝날 때까지 기다리지 않고 바로 다음 코드를 실행합니다. 이는 실제로 많은 동시성 문제를 해결하고 웹 애플리케이션의 성능을 향상시킵니다.

하지만, 때로는 비동기 함수의 실행을 동기적으로 연결하고 싶을 수 있습니다. 이를 위해 자바스크립트에서 제공하는 몇 가지 방법을 살펴보겠습니다.

콜백 함수

가장 일반적인 방법은 콜백 함수를 사용하는 것입니다. 비동기 함수는 결과를 얻었을 때, 콜백 함수를 호출하여 그 결과를 전달합니다. 이를 통해 비동기 함수를 동기적으로 실행할 수 있습니다. 예를 들어, setTimeout 함수는 일정 시간 후에 콜백 함수를 호출합니다.

console.log("시작");

setTimeout(() => {
  console.log("비동기적으로 실행됨");
}, 2000);

console.log("계속 실행");

위의 코드는 “시작”, “계속 실행”을 먼저 출력하고, 2초 후에 “비동기적으로 실행됨”을 출력합니다. setTimeout 함수는 비동기 함수로서, 지정된 시간 후에 콜백 함수를 실행합니다.

Promise

ES6부터는 Promise라는 개념이 도입되었습니다. Promise는 비동기 작업의 완료나 실패를 나타내는 객체입니다. Promise는 연속적인 비동기 작업의 흐름을 제어할 수 있게 해줍니다. Promise의 then 메서드를 사용하여 이전 작업의 결과에 대한 콜백 함수를 지정할 수 있습니다.

console.log("시작");

new Promise((resolve) => {
  setTimeout(() => {
    resolve("비동기적으로 실행됨");
  }, 2000);
}).then((result) => {
  console.log(result);
});

console.log("계속 실행");

위의 코드는 “시작”, “계속 실행”을 먼저 출력하고, 2초 후에 “비동기적으로 실행됨”을 출력합니다. Promise를 사용하여 비동기 함수의 결과를 전달하고, then 메서드를 사용하여 결과를 처리합니다.

Async/Await

ES8부터 도입된 Async/Await는 Promise를 기반으로 하는 비동기 처리 방식입니다. 이를 통해 자바스크립트 비동기 작업을 동기적으로 표현할 수 있습니다. async 함수 내에서 await 키워드를 사용하여 비동기 함수의 실행을 기다릴 수 있습니다.

console.log("시작");

function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function asyncFunc() {
  await delay(2000);
  console.log("비동기적으로 실행됨");
}

asyncFunc();

console.log("계속 실행");

위의 코드는 “시작”, “계속 실행”을 먼저 출력하고, 2초 후에 “비동기적으로 실행됨”을 출력합니다. async 함수 내에서 await 키워드를 사용하여 비동기 함수 delay의 실행을 기다리고, 그 결과를 출력합니다.

자바스크립트에서 비동기 함수의 동기적 실행을 위한 여러 가지 방법을 살펴보았습니다. 콜백 함수, Promise, Async/Await은 각각의 상황과 개발자의 선호에 따라 선택할 수 있습니다. 차이점을 이해하고 적절한 방법을 선택하여 자바스크립트의 비동기 처리를 더욱 효율적으로 수행해보세요.