[콜백 함수] 자바스크립트 함수의 함수스러운 사용법

728x90

콜백 함수 (Callback Function) 

JavaScript를 배우다 보면 가장 많이 듣게 되는 단어 중 하나가 바로 콜백 함수(Callback Function)입니다. 처음에는 다소 헷갈릴 수 있지만, 콜백을 이해하면 비동기 처리, 고차 함수, 이벤트 핸들링 등 다양한 개념이 더 쉽게 이해됩니다.

 

---

1.  콜백 함수란?

콜백 함수란 다른 함수에 인자로 전달되어, 나중에 실행되는 함수를 의미합니다.

“A 함수 안에서 B 함수를 실행할 거야. 근데 언제 실행할지는 A가 결정해!”

즉, 실행을 위임한 함수라고 생각하시면 됩니다.

콜백 함수 예제

function greet(name, callback) {
  console.log(`Hello, ${name}`);
  callback();
}

function sayBye() {
  console.log('Goodbye!');
}

greet('Alice', sayBye);

Hello, Alice
Goodbye!

• sayBye 함수는 greet 함수의 콜백으로 전달되고, greet 함수 내에서 나중에 실행됩니다.

 

---

2.  왜 콜백 함수를 사용할까?

a.  재사용성과 유연성

function repeat(n, action) {
  for (let i = 0; i < n; i++) {
    action(i);
  }
}

repeat(3, console.log); // 0 1 2
repeat(3, i => console.log(i * 2)); // 0 2 4

• 어떤 작업을 반복할지는 외부에서 정의 가능합니다.
• 함수 로직을 외부에 위임할 수 있어 유연합니다.

 

---

3.  콜백과 비동기 처리

콜백 함수는 비동기 코드에서 특히 유용합니다.

setTimeout(() => {
  console.log('3초 뒤 실행!');
}, 3000);

• setTimeout은 비동기 함수입니다.
• 첫 번째 인자로 전달된 함수는 나중에 실행됩니다.

 

---

4. 콜백 지옥(Callback Hell)

비동기 작업을 중첩된 콜백으로 계속 처리하다 보면 다음과 같은 문제가 발생합니다.

login(user, () => {
  getUserProfile(user, () => {
    loadDashboard(user, () => {
      // ...
    });
  });
});

• 이런 구조는 읽기 어렵고 유지보수도 힘듭니다.
  → 이를 해결하기 위해 등장한 것이 Promise, 그리고 async/await입니다.

 

---

5. 고차 함수와 콜백

JavaScript에서는 함수를 값처럼 다룰 수 있기 때문에, 함수에 함수를 인자로 전달하거나, 함수를 반환하는 고차 함수를 만들 수 있습니다.

function multiplyBy(n) {
  return function (x) {
    return x * n;
  };
}

const double = multiplyBy(2);
console.log(double(5)); // 10

이런 함수를 반환하거나 전달하는 패턴이 콜백의 핵심입니다.

 

---

6.  배열 메서드에서의 콜백

자바스크립트 내장 함수 중에서도 콜백을 많이 사용합니다:

const nums = [1, 2, 3, 4];

const squared = nums.map(n => n * n); // 콜백 사용
console.log(squared); // [1, 4, 9, 16]

• map, forEach, filter, reduce 등은 모두 콜백을 인자로 받는 함수입니다.

 

---

7.  마무리

콜백 함수는 JavaScript의 핵심적인 기능입니다. 함수를 값처럼 다루는 언어적 특성 덕분에, 콜백을 이용해 동작을 유연하게 위임하고, 비동기 처리도 자연스럽게 구현할 수 있습니다.

 

---