[자바스크립트] 콜백 함수 (callback function)

콜백(callback) 함수는 자바스크립트에서 가장 많이 사용되는 함수 중 하나입니다. 콜백 함수는 다른 함수의 인자로 전달되는 함수로, 이 함수는 해당 함수 내부에서 호출됩니다. 이를 통해 비동기적으로 처리되는 작업의 결과를 처리할 수 있습니다.

 

1. 간단한 설명

예를 들어, setTimeout() 함수를 사용해 일정 시간이 지난 후에 특정 코드를 실행할 수 있습니다. 이때 setTimeout() 함수의 첫 번째 인자로 콜백 함수를 전달하면, 지정된 시간이 지난 후에 콜백 함수가 실행됩니다.

 

setTimeout(function() {
  console.log('3초 후에 실행됩니다.');
}, 3000);

위의 코드에서는 3초 후에 콘솔에 '3초 후에 실행됩니다.' 라는 문자열이 출력됩니다. setTimeout() 함수는 비동기적으로 처리되므로, 해당 함수가 실행되는 동안에도 다른 작업을 수행할 수 있습니다.

또 다른 예로, jQuery 라이브러리를 사용해 서버로부터 데이터를 비동기적으로 불러올 수 있습니다. 이때 $.ajax() 함수의 success 옵션으로 콜백 함수를 전달하면, 서버로부터 데이터가 성공적으로 로드된 후에 콜백 함수가 실행됩니다.

 

$.ajax({
  url: 'data.json',
  success: function(data) {
    console.log('데이터를 로드했습니다.');
    console.log(data);
  }
});

위의 코드에서는 data.json 파일로부터 데이터를 로드한 후에, '데이터를 로드했습니다.' 라는 문자열과 해당 데이터가 콘솔에 출력됩니다. 이때 success 옵션에 전달된 함수가 콜백 함수입니다.

콜백 함수를 사용하면 비동기적으로 처리되는 작업의 결과를 쉽게 처리할 수 있습니다. 그러나 콜백 함수를 중첩해서 사용하거나, 여러 개의 비동기적 작업을 순차적으로 처리해야 하는 경우에는 콜백 지옥(callback hell)이라는 문제가 발생할 수 있습니다.

 

2. 콜백 지옥

 

콜백 지옥(callback hell)은 콜백 함수를 중첩해서 사용하거나, 여러 개의 비동기적 작업을 순차적으로 처리해야 하는 경우에 발생하는 문제입니다.

예를 들어, 파일을 읽은 후 해당 파일의 내용을 가공하고, 가공된 내용을 다시 파일에 쓰는 작업을 비동기적으로 처리해야 한다고 가정해 봅시다. 이때 파일을 읽는 함수, 가공하는 함수, 파일을 쓰는 함수 모두 콜백 함수를 사용하여 비동기적으로 처리해야 합니다.

 

fs.readFile('input.txt', function(err, data) {
  if (err) throw err;
  processData(data, function(processedData) {
    fs.writeFile('output.txt', processedData, function(err) {
      if (err) throw err;
      console.log('파일 쓰기 완료');
    });
  });
});

위의 코드에서는 fs 모듈의 readFile() 함수를 사용해 input.txt 파일을 읽은 후, processData() 함수를 사용해 가공된 내용을 얻습니다. 그리고 fs 모듈의 writeFile() 함수를 사용해 가공된 내용을 output.txt 파일에 씁니다.

이처럼 콜백 함수를 중첩해서 사용하면 코드의 가독성이 떨어지고, 디버깅이 어려워지며, 코드를 수정하기도 어렵습니다. 또한, 비동기적으로 처리되는 작업이 많아질수록 코드의 깊이가 깊어져 가독성이 더욱 나빠집니다.

콜백 지옥 문제를 해결하기 위해 자바스크립트에서는 Promise와 async/await 문법을 제공하고 있습니다. 이를 사용하면 콜백 지옥 문제를 해결하고, 비동기적으로 처리되는 작업의 결과를 쉽게 다룰 수 있습니다.