자바스크립트는 싱글 스레드 기반의 비동기 프로그래밍 언어입니다. 이러한 특징 때문에 비동기 처리가 필요한 상황에서는 콜백 함수를 이용해 작업을 수행합니다. 콜백 함수는 비동기 작업이 완료되면 호출되는 함수로, 다른 작업을 수행하다가 필요한 시점에 콜백 함수를 실행할 수 있습니다.

콜백 함수의 사용 예시

function fetchData(url, callback) {
  // 비동기 작업 수행
  // ...

  // 작업이 완료되면 콜백 함수 호출
  callback(data);
}

function processResult(data) {
  // 결과 데이터 처리
  // ...
}

fetchData("https://api.example.com/data", processResult);

위 예시에서 fetchData 함수는 주어진 URL에서 데이터를 비동기적으로 가져옵니다. 작업이 완료되면 processResult 함수가 실행되어 데이터를 처리합니다. 이때 processResult 함수가 콜백 함수로 동작하고, fetchData 함수가 비동기 작업의 결과를 받아 호출해줍니다.

콜백 지옥 (Callback Hell)

콜백 함수를 중첩해서 사용할 경우에는 코드의 가독성과 관리가 어려워질 수 있습니다. 이를 콜백 지옥(callback hell)이라고 합니다.

getUser(userId, (user) => {
  getPosts(user.id, (posts) => {
    getComments(posts[0].id, (comments) => {
      // 이하 생략
    });
  });
});

이러한 문제를 해결하기 위해 자바스크립트에서는 Promise나 async/await 같은 비동기 처리 패턴을 제공합니다. 이를 통해 콜백 지옥을 피하고, 작성하고 관리하기 쉬운 코드를 작성할 수 있습니다.

Promise와 async/await

Promise는 비동기 작업의 결과를 대기하고 처리할 수 있는 객체입니다. Promise 객체는 resolve 와 reject 라는 두 가지 콜백 함수를 인자로 받습니다. 작업이 성공적으로 완료되면 resolve 함수를 호출하여 결과를 반환하고, 작업이 실패하면 reject 함수를 호출하여 오류를 반환합니다.

function fetchData(url) {
  return new Promise((resolve, reject) => {
    // 비동기 작업 수행
    // ...

    if (result) {
      resolve(data);
    } else {
      reject(error);
    }
  });
}

fetchData("https://api.example.com/data")
  .then((data) => {
    // 결과 데이터 처리
  })
  .catch((error) => {
    // 에러 처리
  });

async/await는 Promise를 기반으로 동작하는 비동기 처리 패턴입니다. async 키워드로 함수를 선언하고, 함수 내에서 await로 Promise를 대기합니다. 이렇게 하면 동기적인 방식으로 비동기 작업을 처리할 수 있습니다.

async function processAsyncData() {
  try {
    const data = await fetchData("https://api.example.com/data");
    // 결과 데이터 처리
  } catch (error) {
    // 에러 처리
  }
}

processAsyncData();

위 예시에서 fetchData 함수를 Promise로 래핑하여 사용하고, await 키워드를 이용해 비동기 작업의 결과를 받아 처리합니다. 오류 처리는 try-catch 문을 이용하여 처리할 수 있습니다.

결론

자바스크립트에서는 콜백 함수와 Promise, async/await를 통해 비동기 처리를 수행할 수 있습니다. 콜백 함수를 사용할 때는 콜백 지옥이 발생할 수 있으므로, Promise나 async/await 같은 패턴을 사용하여 코드를 더욱 간결하고 가독성이 높게 작성하는 것이 좋습니다.