JavaScript에서 콜백(callback)

JavaScript에서 콜백(callback) 함수는 다른 함수에 인자로 전달되는 함수입니다. 콜백은 비동기 작업이 완료된 후 실행되거나, 어떤 이벤트가 발생했을 때 호출되는 등 다양한 상황에서 사용됩니다. 콜백 함수를 사용하는 예는 다음과 같습니다.

예시 1: 배열 메소드에 콜백 사용하기

JavaScript의 배열 메소드 중 forEach, map, filter와 같은 메소드는 콜백 함수를 인자로 받아, 배열의 각 요소에 대해 콜백 함수를 실행합니다.

const numbers = [1, 2, 3, 4, 5];

// forEach를 사용하여 배열의 각 요소를 출력
numbers.forEach(function(number) {
  console.log(number);
});

예시 2: 비동기 작업 완료 후 콜백 사용하기

웹 API 요청이나 파일 읽기와 같은 비동기 작업 후, 작업의 결과를 처리하기 위해 콜백 함수를 사용할 수 있습니다.

function fetchData(callback) {
  setTimeout(() => {
    callback('데이터 로딩 완료');
  }, 1000);
}

fetchData(function(data) {
  console.log(data); // 1초 후 '데이터 로딩 완료' 출력
});

예시 3: 이벤트 리스너에 콜백 사용하기

웹 개발에서 이벤트 리스너를 등록할 때 콜백 함수를 사용하여, 특정 이벤트가 발생했을 때 원하는 동작을 실행할 수 있습니다.

Copy code
const button = document.querySelector('button');

button.addEventListener('click', function() {
  console.log('버튼이 클릭되었습니다.');
});

예시 4: 비동기 작업의 순차 실행

콜백 함수를 중첩해서 사용하면, 여러 비동기 작업을 순차적으로 실행할 수 있습니다. 하지만, 이러한 방식은 콜백 지옥(callback hell)을 초래할 수 있습니다.

function step1(callback) {
  setTimeout(() => {
    console.log('첫 번째 작업 완료');
    callback();
  }, 1000);
}

function step2(callback) {
  setTimeout(() => {
    console.log('두 번째 작업 완료');
    callback();
  }, 1000);
}

step1(function() {
  step2(function() {
    console.log('모든 작업 완료');
  });
});

콜백 함수의 특징과 주의사항

콜백은 함수를 동적으로 전달하고 실행할 수 있는 방법을 제공합니다.
비동기 작업을 처리하거나 이벤트 처리에 유용합니다.
콜백 지옥(callback hell)이 발생할 수 있으므로, 콜백 중첩을 너무 깊게 하지 않도록 주의해야 합니다.
ES6 이후에는 콜백 지옥 문제를 해결하기 위해 Promise와 async/await가 도입되었습니다.