JavaScript CallBack 콜백

자바스크립트에서 콜백(callback)은 함수의 매개변수로 전달되는 함수입니다. 콜백은 특정 동작이 완료된 후에 실행되어야 할 코드를 포함하고 있을 수 있으며, 비동기 프로그래밍에서 자주 사용됩니다.

콜백 함수의 예제

아래의 코드는 setTimeout 함수를 사용하여 콜백 함수를 예약하는 간단한 예제입니다.

function myCallback() {
  console.log('2초 후에 실행됩니다.');
}

setTimeout(myCallback, 2000);

setTimeout은 첫 번째 인자로 콜백 함수를 받고, 두 번째 인자로 지연시킬 밀리초 시간을 받습니다. 위의 예제에서는 myCallback 함수가 2초 후에 실행됩니다.

콜백의 문제점

콜백은 강력한 기능을 제공하지만, 복잡한 비동기 로직을 구현할 때 콜백 지옥(callback hell)이라는 문제가 발생할 수 있습니다. 콜백 지옥은 여러 콜백 함수가 중첩되어 코드의 가독성과 유지보수가 어려워지는 현상입니다.

예를 들어, 아래와 같은 중첩된 콜백이 있을 수 있습니다.

getData(function(a) {
  getMoreData(a, function(b) {
    getEvenMoreData(b, function(c) {
      // 코드...
    });
  });
});

이런 문제를 해결하기 위해 프로미스(Promise)나 async/await와 같은 현대 자바스크립트의 기능들을 사용하면, 비동기 코드를 더 깔끔하게 작성할 수 있습니다.

콜백 사용의 현대적인 접근

ES6부터 도입된 프로미스는 비동기 작업의 결과를 보다 명확하게 표현할 수 있게 해줍니다. async/await는 프로미스를 더 읽기 쉬운 형태로 사용할 수 있게 해주는 문법입니다.

예를 들어:

async function fetchData() {
  let data = await getData();
  let moreData = await getMoreData(data);
  let evenMoreData = await getEvenMoreData(moreData);
  // 코드...
}

이렇게 하면 콜백 지옥 문제를 피하면서도 비동기 로직을 간결하고 가독성 좋게 구현할 수 있습니다.