콜백 함수(callback)

콜백 함수(callback)

콜백은 비동기적 작업을 수행할 때 자주 사용되며, 그 외에도 함수의 동작을 동적으로 변경하고자 할 때 유용합니다. 콜백은 자바스크립트의 중요한 특징인 일급 객체(first-class object) 개념에서 비롯되는데, 자바스크립트에서는 함수를 변수에 할당하거나 다른 함수의 인수로 전달할 수 있습니다.

 

주요 특징

함수의 인수로 전달됨: 콜백 함수는 다른 함수에 인수로 전달됩니다.

나중에 실행됨: 콜백 함수는 인수로 전달된 함수가 호출될 때 특정 조건이 만족되거나 특정 시점에서 실행됩니다.

비동기 작업에서 중요: 비동기 작업(예: 타이머, 이벤트 처리, AJAX 요청 등)에서 자주 사용됩니다. 작업이 완료되었을 때 콜백 함수가 호출되어 후속 작업을 처리합니다.

 

콜백 함수 사용 예시

 

기본예시

function greet(name) {
    console.log('Hello, ' + name);
}

function processUserInput(callback) {
    const name = prompt('Please enter your name.');
    callback(name);
}

processUserInput(greet);

 

1. greet 함수는 name을 받아서 콘솔에 출력합니다.

2. processUserInput 함수는 사용자 입력을 받고, 입력받은 이름을 callback으로 전달받은 함수에 전달합니다.

3. processUserInput(greet)를 호출하면, greet이 콜백 함수로 전달되고, 나중에 사용자 입력 후 실행됩니다.

 

비동기 작업에서의 콜백

자바스크립트의 비동기 작업에서는 콜백이 특히 유용합니다. 예를 들어, setTimeout과 같은 비동기 함수는 지정된 시간이 지난 후 콜백 함수를 실행합니다.

 

console.log('Start');

setTimeout(function() {
    console.log('This message is shown after 2 seconds');
}, 2000);

console.log('End');

 

이 코드는 ‘Start’와 ‘End’가 먼저 출력되고, 2초 후에 ‘This message is shown after 2 seconds’가 출력됩니다.

setTimeout은 비동기 작업으로, 지정된 시간이 지난 후 콜백 함수를 실행합니다.

 

콜백 함수의 문제점: 콜백 지옥 (callback hell)

복잡한 비동기 작업이 중첩될 때 콜백 함수를 여러 단계로 중첩하면 코드가 난해해질 수 있습니다. 이를 콜백 지옥(callback hell)이라고 하며, 다음과 같은 구조를 가집니다.

 

getData('https://api.example.com/data1', function(err, data1) {
  if (err) {
    console.error(err);
  } else {
    getData('https://api.example.com/data2', function(err, data2) {
      if (err) {
        console.error(err);
      } else {
        getData('https://api.example.com/data3', function(err, data3) {
          if (err) {
            console.error(err);
          } else {
            console.log('All data received:', data1, data2, data3);
          }
        });
      }
    });
  }
});

 

이 방식은 유지보수하기 어렵고, 코드의 흐름을 이해하기 힘들게 만듭니다.

이에 대한 대안으로 Promise가 등장했습니다. 

 

Promise 등장 이후

Promise가 도입되면서 비동기 작업을 훨씬 더 깔끔하게 처리할 수 있게 되었습니다.

 

function getData(url) {
  return new Promise(function(resolve, reject) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(new Error('Request failed'));
      }
    };
    xhr.onerror = function() {
      reject(new Error('Network error'));
    };
    xhr.send();
  });
}

getData('https://api.example.com/data1')
  .then(function(data1) {
    console.log('Data1 received:', data1);
    return getData('https://api.example.com/data2');
  })
  .then(function(data2) {
    console.log('Data2 received:', data2);
    return getData('https://api.example.com/data3');
  })
  .then(function(data3) {
    console.log('Data3 received:', data3);
  })
  .catch(function(err) {
    console.error(err);
  });

 

이렇게 Promise는 비동기 작업을 처리할 때 코드의 가독성을 크게 개선했습니다.

(Promise의 자세한 내용은 다음에 다루겠습니다)

 

결론

콜백 함수는 자바스크립트에서 매우 중요한 개념으로, 특히 비동기 작업을 처리할 때 필수적입니다. 하지만 코드 복잡도를 높일 수 있으므로, 적절한 설계와 Promise 및 async/await와 같은 대안을 사용하여 관리할 필요가 있습니다.