Callback 함수에 대해서 깔끔하게 정리하기

Callback 함수란? 

Callback 함수는 자바스크립트에서 중요한 개념 중 하나입니다.
이는 다른 함수에게 전달되어 실행이 완료된 후 호출되는 함수입니다.
예를 들어, setTimeout() 함수를 사용할 때 콜백 함수를 인자로 전달하여 일정 시간이 지난 후에 실행될 코드를 정의할 수 있습니다.

function callbackExample(callback) {
  console.log("함수 내부 동작");
  callback(); // 콜백 함수 호출
}

function myCallback() {
  console.log("콜백 함수 실행");
}

callbackExample(myCallback);

위의 예시에서 callbackExample 함수는 myCallback을 인자로 받아 실행된 후, callback()을 통해 myCallback이 호출됩니다.

Callback 함수의 활용

Callback 함수는 자바스크립트에서 다양한 상황에서 활용됩니다.
비동기적인 작업을 처리할 때 가장 많이 사용됩니다.
Ajax 요청을 보낸 후 서버로부터 응답을 받으면 콜백으로 처리할 수 있습니다.

function fetchData(url, callback) {
  // 비동기적인 데이터 요청
  fetch(url)
    .then(response => response.json())
    .then(data => callback(data)) // 콜백으로 데이터 전달
    .catch(error => console.error(error));
}

function handleData(data) {
  console.log("데이터 처리:", data);
}

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

위의 예시에서 fetchData는 비동기적으로 데이터를 가져오고, 응답이 완료되면 handleData라는 콜백함수를 호출하여 데이터를 처리합니다.

콜백 지옥과 해결 방법 

콜백 지옥은 여러 개의 비동기 작업을 연속적으로 처리할 때 발생하는 코드 가독성 문제입니다.
Promise나 Async/Await와 같은 기술을 사용하여 콜백 지옥 문제를 해결할 수 있습니다.

getDataA(function(resultA) {
  processDataA(resultA, function(resultB) {
    getDataB(resultB, function(resultC) {
      processDataC(resultC, function(finalResult) {
        console.log(finalResult);
      });
    });
  });
});

위와 같은 코드가 있다면 아래와 같이 Promise 체인 또는 Async/Await 구문으로 변경할 수 있습니다.
Promise 체인:

getDataA()
.then(processDataA)
.then(getDataB)
.then(processDataC)
.then(finalResult => console.log(finalResult))
.catch(error => console.error(error));

Async/Await:

async function processAll() {
   try{
      const resultA = await getDataA();
      const resultB = await processDataA(resultA);
      const resultC = await getDataB(resultB);
      const finalResult = await processDataC(resultC);
      console.log(finalResult);
   } catch(error){
     console.error(error);
   }
}
processAll();

728x90

예외 처리와 에러 핸들링

Callback 함수 내부에서 발생하는 예외도 잘 처리해야 합니다.
try-catch 문을 사용하여 예외를 잡고 에러 핸들링 로직을 추가합니다.
비동기 작업 내부에서 발생한 예외도 catch 블록 내부에서 처리할 수 있습니다.

function fetchData(url, successCallback, errorCallback) {
   fetch(url)
     .then(response => response.json())
     .then(data => successCallback(data))
     .catch(error => errorCallback(error));
}

function handleSuccess(data) {
   // 데이터 성공적으로 처리 
}

function handleError(error){
   // 에러 핸들링 로직 
}

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

위의 예시에서 성공 시에는 handleSuccess, 실패 시에는 handleError가 각각 호출되며 해당 로직 안에서 성공 또는 실패에 대한 동작을 정의합니다.

결론 

Callback 함수는 자바스크립트에서 많은 상황에서 유용하게 활용되며, 비동기 작업 완료 후 원하는 동작 실행하기 위해 필수적으로 사용됩니다.
그러나 콜백 지옥과 같은 코드 가독성 문제도 주의해야 하며, Promise나 Async/Await와 같은 기술로 이를 해결하고, 에러 핸들링에 대해서도 신중히 고려하여 안정성 있는 코드 구현해야 합니다.