콜백 함수 (Callback Function)

콜백함수란?

다른 함수에게 인자로 전달되어 나중에 호출되는 함수

콜백 함수는 비동기적 작업, 이벤트 처리, 데이터 요청 및 처리 등 다양한 상황에서 사용된다.

코드의 유연성과 효율성을 높일 수 있다.

 

콜백 함수의 패턴

비동기 작업의 콜백 함수

• 다른 함수에게 콜백 함수를 인자로 전달한다. 이때 함수는 비동기적인 작업을 수행으로 콜백 함수를 호출할 수 있다.
• 작업이 완료되거나 이벤트가 발생했을 때 적절한 동작을 수행할 수 있다.

function asyncOperation(callback) {
  setTimeout(function() {
    console.log('비동기 작업 완료');
    callback();
  }, 2000);
}

function handleCallback() {
  console.log('콜백 함수 호출됨');
}

asyncOperation(handleCallback);
// 2초 후에 '비동기 작업 완료' 출력 후 '콜백 함수 호출됨' 출력

 

이벤트 핸들러의 콜백 함수

• 이벤트가 발생했을 때 실행될 함수로 콜백 함수를 등록한다.
• 이벤트가 발생하면 등록된 콜백 함수가 호출되어 특정 동작을 수행한다.

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

id가 'myButton'인 버튼을 클릭했을 때 콜백 함수가 실행되며, '버튼이 클릭되었습니다.'를 출력

 

 

배열의 forEach 메소드에 콜백 함수 전달

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

numbers.forEach(function(number) {
  console.log(number * 2);
});
// 배열의 각 요소에 대해 콜백 함수 실행 후, 2, 4, 6, 8, 10 출력

배열의 각 요소에 대해 콜백 함수를 실행하고, 각 요소에 2를 곱한 결과를 출력