콜백함수는 전달인자로 다른 함수에 전달되는 함수이다.
콜백 함수는 다른 함수의 인수(파라미터)로 전달되어, 특정 작업이 끝난 후 실행되는 함수이다.
자바스크립트에서는 비동기 작업을 처리할 때 많이 사용된다.
비동기 작업이란, 코드가 순서대로 실행되지 않고, 시간이 걸리는 작업이 끝나면 그때서야 실행되는 작업을 말한다.
콜백 함수의 예제
콜백 함수를 이해하기 위해 간단한 예제를 보자.
function greeting(name) {
console.log(`Hello, ${name}!`);
}
function processUserInput(callback) {
const name = prompt("Please enter your name.");
callback(name);
}
processUserInput(greeting);
위 코드에서는 greeting이라는 함수가 콜백 함수로 사용되었다. processUserInput 함수는 callback이라는 파라미터를 받아서, name이라는 값을 callback 함수에 전달하여 실행한다. 결과적으로 사용자가 이름을 입력하면 greeting 함수가 호출되어 "Hello, [이름]!"을 출력한다.
forEach, map, filter에서의 콜백 함수
자바스크립트 배열 메서드인 forEach, map, filter도 콜백 함수를 사용한다.
- forEach forEach는 배열의 각 요소에 대해 주어진 함수를 한 번씩 실행한다.
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
console.log(number);
});
2. map map은 배열의 각 요소에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(number) {
return number * 2;
});
console.log(doubled); // [2, 4, 6, 8, 10]
3. filter filter는 배열의 각 요소에 대해 주어진 함수의 결과가 true인 요소만 모아 새로운 배열을 반환한다.
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function(number) {
return number % 2 === 0;
});
console.log(evenNumbers); // [2, 4]
마무리
콜백 함수는 자바스크립트에서 중요한 개념으로, 특히 비동기 작업을 처리하거나 배열 메서드를 사용할 때 자주 쓰인다.
이 글에서는 콜백 함수가 무엇인지, 어떻게 사용하는지, forEach, map, filter와 함께 사용하는 방법을 알아보았다.