[CS/기술면접] 콜백 함수 (Callback Function)

콜백 함수 (Callback Function)가 무엇인지, 어떻게 사용되는지 설명해보세요.

 

1. 한마디 정리

콜백 함수(Callback Function)란

함수를 실행할 때 인자(argument)로 전달되는 함수로
주로
1) 비동기 처리(asynchronous processing) 시 사용되어
비동기적인 작업에서 작업이 완료되었을 때 호출되어 추가적인 작업을 수행합니다.

추가적으로 
2) 콜백 함수는 함수의 인자로 전달될 수 있으므로 함수를 동적으로 생성
3) 이벤트 처리에 사용됨
4) 함수의 인자로 전달되어 함수를 동적으로 조작
5) 중첩된 콜백 함수를 통해 비동기 작업을 관리할 때에도 사용할 수 있습니다.

 

2. [상세내용] 역할

1) 비동기적인 작업에서 작업이 완료되었을 때 호출되어 추가적인 작업을 수행

이를 통해,
- 작업의 순서와 동시성을 조절하고,
- 작업이 완료될 때까지 기다릴 필요 없이 다른 작업을 수행할 수 있습니다.

function doAsyncTask(callback) {
  setTimeout(function() {
    console.log('Async Task Complete');
    callback();
  }, 1000);
}

doAsyncTask(function() {
  console.log('Callback Called');
});

---------------------------------------------------------

위 코드에서 doAsyncTask 함수는 비동기 작업을 수행하고, 
작업이 완료되면 인자로 전달된 콜백 함수를 호출합니다. 
이 예시에서는 setTimeout 함수를 사용하여 1초 후에 콜백 함수를 호출하도록 하였습니다. 
실행 결과는 다음과 같습니다.

Async Task Complete
Callback Called

위 코드에서 콜백 함수는 다음과 같이 정의된 익명 함수입니다.

function() {
  console.log('Callback Called');
}

이 함수는 doAsyncTask 함수의 인자로 전달되어, 
setTimeout 함수에서 1초 후에 실행되며, 
"Callback Called" 문자열을 출력합니다. 

따라서, 이 함수는 비동기 작업이 완료되었을 때 호출되어야 하는 추가적인 작업을 수행하는 
콜백 함수로서의 역할을 합니다.

 

2) 콜백 함수는 함수의 인자로 전달될 수 있으므로 함수를 동적으로 생성하는 역할을 함

이를 이용하여,
- 코드의 재사용성을 높이고,
- 유연한 프로그래밍이 가능해집니다.

function createGreeter(name) {
  return function() {
    console.log('Hello, ' + name + '!');
  }
}

const greetJohn = createGreeter('John');
greetJohn(); // Hello, John!

const greetJane = createGreeter('Jane');
greetJane(); // Hello, Jane!

---------------------------------------------------------

위 코드에서 createGreeter 함수는 이름을 인자로 받아, 
해당 이름을 포함한 인사말을 출력하는 새로운 함수를 반환합니다. 
이를 이용하여, 다양한 이름의 인사말을 출력하는 함수를 동적으로 생성할 수 있습니다.

 

3) 이벤트 처리에 사용되는 역할

예를 들어,
버튼을 클릭했을 때, 버튼 클릭 이벤트가 발생하고,
그에 해당하는 콜백 함수가 호출되어 추가적인 작업을 수행합니다.

document.getElementById('myButton').addEventListener('click', function() {
  console.log('Button Clicked');
});

---------------------------------------------------------

위 코드에서 addEventListener 함수의 두 번째 인자로 콜백 함수가 전달됩니다. 
이를 이용하여, 버튼 클릭 이벤트가 발생했을 때, 
콜백 함수가 호출되어 추가적인 작업을 수행하도록 합니다.

4) 함수의 인자로 전달되어 함수를 동적으로 조작하는 역할

예를 들어,
- 다른 함수의 인자로 전달되는 콜백 함수는 호출되는 함수에 따라 동적으로 변경될 수 있습니다.

function doTask(task, callback) {
  console.log('Starting ' + task);
  callback();
}

function logTaskDone(task) {
  console.log(task + ' is done.');
}

doTask('Task 1', function() {
  logTaskDone('Task 1');
});

doTask('Task 2', function() {
  logTaskDone('Task 2');
});

---------------------------------------------------------

위 코드에서 doTask 함수는 인자로 전달된 task를 수행하고, 
작업이 완료되면 콜백 함수를 호출합니다. 

이때, 콜백 함수는 다른 함수(logTaskDone)을 인자로 전달받아, 
동적으로 함수를 조작할 수 있습니다.

5) 중첩된 콜백 함수를 통해 비동기 작업을 관리하는 역할

이를 통해
- 복잡한 비동기 작업도 간단하게 처리할 수 있습니다.

function doAsyncTask(callback) {
  setTimeout(function() {
    console.log('Async Task Complete');
    callback();
  }, 1000);
}

function doAnotherTask() {
  console.log('Another Task Complete');
}

doAsyncTask(function() {
  console.log('Callback Called');
  doAsyncTask(function