[javascript] 자바스크립트의 비동기 제어와 비동기 함수

08 Dec 2023

javascript

자바스크립트는 비동기 프로그래밍이 일반적이며, 비동기 작업을 처리하기 위한 여러 가지 기술이 있다. 이 글에서는 비동기 제어와 비동기 함수에 대해 살펴보겠다.

비동기 제어

비동기 제어는 비동기 작업의 흐름을 관리하고 제어하는 기술을 말한다. 주요 비동기 제어 기법으로는 콜백(callbacks), 프로미스(promises), async/await 등이 있다.

콜백(callbacks)

콜백은 비동기 작업이 완료되었을 때 호출되는 함수로, 이전에 주어진 작업을 수행한 후 호출된다. 콜백 지옥(callback hell)이 발생할 수 있어 코드가 복잡해지고 유지보수가 어렵다는 단점이 있다.

예시:

functi​on doSomethingAsync(callback) {
  setTimeout(function() {
    console.log('Task done');
    callback();
  }, 1000);
}
​
doSomethingAsync(function() {
  console.log('All tasks done');
});

프로미스(promises)

프로미스는 비동기 작업을 나타내는 객체로, 성공 또는 실패 시 적절한 처리를 수행한다. 이는 콜백 지옥을 해결하고 가독성을 향상시킨다.

예시:

function doSomethingAsync() {
  return new Promise((resolve, reject) => {
    setTimeout(function() {
      console.log('Task done');
      resolve();
    }, 1000);
  });
}
​
doSomethingAsync().then(() => {
  console.log('All tasks done');
});

async/await

async/await는 ES8(ECMAScript 2017)에서 도입된 비동기 작업 처리를 위한 문법으로, 프로미스를 기반으로 동작하며 가독성을 높이고 에러 처리를 간소화한다.

예시:

async function doSomethingAsync() {
  return new Promise((resolve) => {
    setTimeout(function() {
      console.log('Task done');
      resolve();
    }, 1000);
  });
}
​
async function doTasks() {
  await doSomethingAsync();
  console.log('All tasks done');
}
​
doTasks();

비동기 함수

비동기 함수는 비동기 작업을 수행하고 그 결과를 반환하는 함수로, 위에서 언급된 비동기 제어 방법을 활용하여 구현된다.

예시:

async function fetchData(url) {
  try {
    let response = await fetch(url);
    let data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData('https://example.com/api/data')
  .then(data => console.log('Fetched data:', data));

비동기 제어와 비동기 함수를 잘 다루는 것은 모던 자바스크립트 애플리케이션 개발에서 매우 중요하다. 이러한 개념을 잘 숙지하고 활용하여, 더 효율적이고 안정적인 코드를 작성할 수 있을 것이다.

참고 문헌: MDN Web Docs