JavaScript 콜백함수 콜백 유형

 

콜백 함수 (callback function)는 다른 함수의 매개변수로 전달되어 특정 시점이나 조건에 따라 실행되는 함수다.

콜백 함수는 비동기적인 작업, 이벤트 처리, 타이머 설정 등에 사용되고 자바스크립트에서 함수는 일급객체이기 때문에 다른 함수에 전달 될 수 있다.

 

function mainFunction(callback) {
  // 어떤 작업 수행

  // 콜백 함수 호출
  callback();
}

function callbackFunction() {
  console.log('콜백 함수가 호출되었습니다.');
}

// mainFunction 호출 시 callbackFunction이 콜백으로 전달됨
mainFunction(callbackFunction);

 

 

 

1) 동기적 콜백

함수가 즉시 실행되는 경우로 호출한 함수가 작업을 마칠 때까지 대기한다.

function syncCallback(callback) {
  console.log('작업 시작');
  callback();
  console.log('작업 종료');
}

syncCallback(() => console.log('동기적 콜백'));

 

 

2) 비동기적 콜백

함수가 즉시 실행되지 않고 나중에 특정 조건이나 시점에 실행되는 경우다. 대표적으로 타이머 함수나 이벤트 핸들러 등이 있다. 

function asyncCallback(callback) {
  console.log('작업 시작');
  setTimeout(() => {
    callback();
    console.log('비동기적 콜백');
  }, 1000);
}

asyncCallback(() => console.log('타이머 콜백'));

 

 

3) 콜백 헬(Callback Hell 또는 Pyramid of Doom)

여러 비동기 콜백이 중첩되어 코드의 가독성이 나빠지고 유지보수가 어려워지는 상황이다. 이를 방지하기 위해  Promise나 async/await와 같은 비동기 처리방식을 사용한다.

readFile('file1.txt', function(err, data1) {
  readFile('file2.txt', function(err, data2) {
    // 중첩된 콜백
    readFile('file3.txt', function(err, data3) {
      // ...
    });
  });
});

 

 

4) 한 번만 호출되는 콜백 (One-time Callbalck)

특정 이벤트가 한 번만 발생할 때 호출되는 콜백이다. 예로, 이벤트 리스너를 등록해 한번만 실행되는 콜백을 사용할 수 있다.

button.addEventListener('click', function() {
  console.log('Button clicked!');
}, { once: true });

 

 

5) 에러 콜백 (Error Callback)

비동기 작업에서 에러가 발생했을 때 호출되는 콜백이다. 에러 핸들링을 위해 사용된다.

readFile('file.txt', function(err, data) {
  if (err) {
    console.error('Error reading file:', err);
    return;
  }
  console.log('File content:', data);
});