[자바스크립트] 콜백 함수(Callback function)란?

콜백 함수... 회사에서 기능 수정을 할 때 활용하라는 조언을 듣기도 했고, 요새 js 기초 공부를 다시 하기 시작하는 김에 블로그에도 정리차 남겨보고자 한다!! 😊

콜백 함수란?

Callback의 뜻부터 알아보자. 'callback'은 답신 전화, 회신이라는 의미를 갖고 있다. 답신 전화를 하기 위해선 먼저 전화를 받아야 하지 않는가? 콜백은 프로그래밍에서도 마찬가지로 "나중에 실행할 함수"를 다른 함수에 전달하는 것이다. 다른 말로하면 다른 함수의 인자로 전달되어 나중에 실행되는 함수 라고도 할 수 있다. 함수도 값처럼 전달할 수 있기 때문에, 특정 시점에 원하는 기능을 실행할 수 있도록 콜백을 활용한다!

콜백 함수는 비동기 처리, 유연한 함수 구현, 배열 처리 등 다양한 상황에서 사용된다. 이번 글은 이해가 쉽도록, 콜백이 필요한 대표적인 경우와 예제를 올려보고자 한다!

콜백을 이해하기 위한 가벼운 예제

function sayHello() {
  console.log("안녕!");
}

function greet(callback) {
  console.log("이름이 뭐야?");
  callback();  // 콜백 함수 실행
}

greet(sayHello);

동작 원리

1. sayHello 함수는 단순히 "안녕!"을 출력하는 함수

2. greet 함수는 callback을 매개변수로 받고, "이름이 뭐야?" 를 먼저 출력한 다음, 전달받은 callback 함수를 실행.

3. greet(sayHello); 를 호출하면, sayHello가 callback 자리에 들어가서 실행된다.

따라서, 출력 결과는 이름이 뭐야? 안녕! 이 된다.

👀 콜백 함수를 쓰면 좋은 3가지 상황

1. 비동기 작업 처리 (예: setTimeout, API 호출)

JavaScript는 비동기적으로 실행되는 경우가 많습니다. 데이터를 불러오거나, 일정시간이 지난 후 특정 작업을 수행해야 할 때 콜백을 사용하면 유용합니다.

function fetchData(callback) {
  console.log("데이터를 가져오는 중...");
  
  setTimeout(() => {
    const data = { name: "오리너리", age: 28 };
    console.log("데이터 가져오기 완료!");
    callback(data);
  }, 2000);
}

fetchData(function (result) {
  console.log("가져온 데이터:", result);
});

설명

fetchData 함수는 데이터를 가져오는 동안 2초를 기다립니다.
데이터가 준비되면 callback(data)을 실행해 결과를 활용할 수 있습니다.

2. 함수의 동작을 커스터마이징 (예: 정렬 방식 변경)

콜백 함수를 활용하면 함수의 동작을 원하는대로 바꿀 수 있습니다.

function processNumbers(numbers, callback) {
  return callback(numbers);
}

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

// 오름차순 정렬
const ascending = processNumbers(numbers, function (arr) {
  return arr.slice().sort((a, b) => a - b);
});

// 내림차순 정렬
const descending = processNumbers(numbers, function (arr) {
  return arr.slice().sort((a, b) => b - a);
});

console.log(ascending);  // [1, 1, 3, 4, 5, 9]
console.log(descending); // [9, 5, 4, 3, 1, 1]

설명

processNumbers 함수는 배열을 받아 콜백 함수를 활용해 동작을 변경할 수 있습니다.
ascending은 오름차순 정렬, descending은 내림차순 정렬을 수행합니다.
같은 함수를 활용해 다양한 기능을 구현할 수 있어 코드를 재사용 가능합니다.

3. 배열 요소 처리 (예: forEach, map, filter)

배열을 처리할 때는 forEach, map, filter같은 고차 함수를 콜백과 함께 활용하면 코드가 간결해집니다.

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

// 각 숫자를 2배로 변환 (map 사용)
const doubled = numbers.map(function (num) {
  return num * 2;
});
console.log(doubled); // [2, 4, 6, 8, 10]

// 짝수만 필터링 (filter 사용)
const evens = numbers.filter(function (num) {
  return num % 2 === 0;
});
console.log(evens); // [2, 4]

설명

map을 사용하면 배열 요소를 변환할 수 있습니다.
filter를 활용하면 원하는 조건에 맞는 요소만 선택할 수 있습니다.
코드가 직관적이고 가독성이 좋아짐!

📝 정리

콜백 함수는 비동기 처리, 함수 커스터마이징, 배열 요소 처리 같은 다양한 상황에서 활용됩니다. 이를 사용하면 유연한 코드 작성과 재사용성 증가라는 장점을 얻을 수 있어요.

콜백 함수의 핵심 요점

✔ 특정 작업이 끝난 후 실행할 코드를 지정할 수 있음. (비동기 처리)

✔ 함수의 동작을 유연히 변경할 수 있음. (정렬 방식 변경 등)

✔ 배열을 효율적으로 다룰 수 있음. (map, filter 활용)