콜백함수

 

콜백 함수는 전달인자로 다른 함수에 전달되는 함수입니다.

 

 

동기식 콜백(synchronous callbacks)

• 중간에 비동기 작업 없이 외부 함수 호출 직후에 호출
• 예는 Array.prototype.map(), Array.prototype.forEach()에 전달된 콜백 함수가 포함됩니다.

let value = 1;

function doSomething(callback) {

    callback();

}

doSomething(() => {

  value = 2;

});

console.log(value); // 2

 

 

비동기식 콜백(asynchronous callbacks)

• 비동기 작업이 완료된 후 나중에 호출됩니다.
• setTimeout() 및 Promise.prototype.then()에 전달된 콜백 함수

let value = 1;

function doSomething(callback) {

  setTimeout(() => {

    callback();

  }, 1000); // 1초(1000ms) 뒤에 실행

}

doSomething(() => {

  value = 2;

});

console.log(value); // 이 부분은 동기적으로 실행되어 1이 출력됩니다.

 

 

 

콜백 지옥(callback hell)

비동기 JavaScript 코드를 작성할 때 발생할 수 있는 문제를 지칭하는 용어입니다.

이 문제는 콜백 함수를 중첩하여 사용할 때 코드가 길고 복잡해지며 가독성이 떨어지는 상황을 설명합니다.

// 비동기 작업을 처리하는 함수 (콜백 함수 사용)

function fetchData(callback) {

    setTimeout(() => {

      const data = '데이터';

      callback(data);

    }, 1000);

  }

 

  // fetchData 함수 호출 (콜백 지옥 예시)

  fetchData(data1 => {

    console.log('첫 번째 데이터 처리 완료:', data1);

 

    fetchData(data2 => {

      console.log('두 번째 데이터 처리 완료:', data2);

 

      fetchData(data3 => {

        console.log('세 번째 데이터 처리 완료:', data3);

       

        // 이어서 또 다른 비동기 작업이 발생할 경우 중첩이 더 깊어질 수 있음

      });

    });

  });

 

 

fetchData(data1 => {...})와 같이 함수를 호출하면, data1을 인자로 받는 콜백 함수가 정의되어 해당 비동기 작업이 완료될 때까지 기다립니다. data1 작업이 완료된 후에 fetchData(data2 => {...})가 실행되어 data2 작업을 처리하며, 그 다음에는 fetchData(data3 => {...})가 실행되어 data3 작업을 처리합니다. 이런 식으로 순차적으로 데이터를 처리할 수 있지만, 이는 콜백 함수를 중첩해서 사용하게 되어 콜백 지옥(callback hell)을 초래할 수 있는 문제점이 있습니다.

=> Promise 또는 async/await 을 사용하여 해결 가능

 

 

 

https://developer.mozilla.org/ko/docs/Glossary/Callback_function