콜백 함수: 자바스크립트의 비밀 병기 🕵️‍♀️✨

콜백 함수 톺아보기! 🕵️‍♀️✨

프로그래밍을 하다 보면 “콜백 함수”라는 단어를 자주 듣게 되죠? 처음엔 왠지 고급 기술처럼 느껴지지만, 사실 콜백 함수는 아주 친숙한 개념이에요. 콜백 함수를 알면 자바스크립트를 훨씬 유연하게 다룰 수 있습니다.

그럼, 콜백 함수란 무엇인지, 왜 필요한지, 그리고 어떻게 사용하는지 찬찬히 알아볼까요? 🎉

---

콜백 함수란? 🤔

콜백 함수는 “다른 함수의 인자로 전달되어 실행되는 함수”를 말해요. 이름 그대로 “나중에 호출(callback)될 함수”라는 뜻이죠.

간단히 말해, A라는 함수가 B라는 함수를 호출 시점까지 책임지고, 나중에 B를 실행하게 되는 구조예요.

 

기본 예제: 콜백 함수의 모습

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

function sayGoodbye() {
  console.log("Goodbye!");
}

greet("Alice", sayGoodbye);
// 출력:
// Hello, Alice!
// Goodbye!

 

여기서 greet 함수가 sayGoodbye라는 함수를 인자로 받아, 안에서 호출하고 있죠. 이런 방식이 바로 콜백 함수의 기본적인 형태입니다.

---

콜백 함수, 왜 쓰는 걸까? 🤷‍♀️

자바스크립트는 비동기 처리에 강한 언어입니다.

예를 들어, 서버에서 데이터를 가져오거나, 파일을 읽거나, 타이머를 실행하는 작업은 시간이 걸리기 때문에, “나중에 실행될 코드”를 미리 준비해둬야 해요. 콜백 함수는 이런 비동기 작업에서 빛을 발합니다.

---

콜백 함수 없이 비동기 작업을 처리한다면? 🥴

function fetchData() {
  let data;
  // 데이터를 가져오는 데 2초 걸림
  setTimeout(() => {
    data = "Important data";
  }, 2000);
  console.log(data); // undefined 😱
}

fetchData();

 

위 코드는 데이터를 가져오기도 전에 console.log가 실행돼서 undefined가 나와요.

이 문제를 해결하려면 콜백 함수가 필요합니다!

---

콜백 함수로 문제 해결 🎯

function fetchData(callback) {
  setTimeout(() => {
    const data = "Important data";
    callback(data);
  }, 2000);
}

fetchData((data) => {
  console.log(data); // "Important data" 😊
});

 

이제 데이터를 다 가져온 뒤에 콜백 함수가 실행되니, 원하는 결과를 얻을 수 있어요!

---

콜백 함수 사용 시 주의할 점 ⚠️

1. 콜백 지옥 (Callback Hell)

콜백 함수 안에서 또 다른 콜백을 호출하다 보면, 코드가 점점 오른쪽으로 밀려서 읽기 어려워져요.

setTimeout(() => {
  console.log("Step 1");
  setTimeout(() => {
    console.log("Step 2");
    setTimeout(() => {
      console.log("Step 3");
    }, 1000);
  }, 1000);
}, 1000);
// 읽기도 싫고, 수정하기도 어려운 코드 🤯

 

👉 해결 방법: Promise나 async/await를 활용하세요!

콜백 지옥을 방지하는 현대적인 방법이에요.

 

2. 잘못된 호출

콜백 함수를 인자로 넘길 때, 호출하지 않도록 주의하세요.

예를 들어, 아래 코드는 잘못된 예시입니다.

function greet(name, callback) {
  console.log(`Hello, ${name}!`);
  callback(); // 이렇게 호출해야지!
}

greet("Alice", sayGoodbye()); // ❌ sayGoodbye()를 호출해버림!

 

올바른 방법:

greet("Alice", sayGoodbye); // 함수 자체를 넘겨야 함

 

3. 에러 처리

콜백 함수 안에서 에러가 발생하면, 이를 처리하지 않으면 디버깅이 어려울 수 있어요.

가능하다면, 에러 처리용 콜백을 추가하거나 try-catch로 감싸는 것이 좋습니다.

---

콜백 함수 실전 예제 🌟

배열 메서드와 콜백

콜백 함수는 배열 메서드에서도 자주 쓰입니다.

forEach, map, filter 등은 콜백의 힘을 빌려 데이터를 손쉽게 처리하죠.

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

// 배열의 각 요소를 제곱
const squares = numbers.map((num) => num ** 2);

console.log(squares); // [1, 4, 9, 16, 25]

 

이벤트 핸들링

DOM 이벤트 처리에서도 콜백 함수는 필수입니다.

document.querySelector("#button").addEventListener("click", () => {
  console.log("Button clicked!");
});

---

콜백 함수로 전설의 개발자로 가는 길 🌈

콜백 함수는 자바스크립트의 중요한 기초이자, 비동기 처리의 핵심이에요.

콜백 지옥에서 빠져나오는 방법도 배우고, 다양한 활용법을 익히면서 점점 더 효율적인 코드 작성을 해보세요!

 

🌷전설의 개발자가 되어봅시당! 🌷