[Javascript] 콜백 함수(Callback Function) 사용법의 정석

콜백 함수는 다른 함수의 인자로 전달되어 실행되는 함수를 의미함. JavaScript에서 비동기 처리나 재사용 가능한 로직을 만들 때 필수적으로 사용됨.

 

1️⃣ 콜백 함수의 기본 구조

콜백 함수는 아래와 같은 구조로 사용됨

function mainFunction(callback) {
  console.log("메인 함수 실행!");
  callback(); // 콜백 함수 실행
}

function callbackFunction() {
  console.log("콜백 함수 실행!");
}

mainFunction(callbackFunction);

📌 설명:

1. mainFunction은 매개변수로 callback을 받음
2. callback()을 호출하여 callbackFunction이 실행됨

출력 결과:

메인 함수 실행!
콜백 함수 실행!

 

 

2️⃣ 콜백 함수의 다양한 활용 예제

1. 비동기 처리 (setTimeout)

콜백 함수는 주로 비동기 작업을 처리할 때 사용됨

console.log("작업 시작");

setTimeout(function () {
  console.log("2초 후 실행");
}, 2000);

console.log("작업 끝");

📌 설명:

• setTimeout은 2초 후 콜백 함수를 실행
• 하지만 setTimeout이 실행되기 전에 "작업 끝"이 먼저 출력됨 (비동기 실행)

출력 결과:

작업 시작
작업 끝
2초 후 실행

 

2. 배열 메서드에서의 콜백 (forEach, map, filter, reduce)

콜백 함수는 배열 메서드에서 필수적으로 사용됨

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

// forEach 사용
numbers.forEach(function (num) {
  console.log(num * 2);
});

// map 사용 (새로운 배열 반환)
const doubled = numbers.map(function (num) {
  return num * 2;
});
console.log(doubled);

출력 결과:

2
4
6
8
10
[2, 4, 6, 8, 10]

 

3. 이벤트 핸들러에서의 콜백

콜백 함수는 이벤트 핸들러에서도 많이 사용됨

document.getElementById("btn").addEventListener("click", function () {
  alert("버튼이 클릭되었습니다!");
});

📌 설명:

• addEventListener는 "click" 이벤트가 발생할 때 콜백 함수를 실행

 

3️⃣ 콜백 지옥 (Callback Hell) 문제와 해결 방법

❌ 콜백 지옥 (Callback Hell) 예제

콜백을 중첩해서 사용하면 코드가 복잡해지고 가독성이 떨어지는 문제가 발생

function step1(callback) {
  setTimeout(() => {
    console.log("Step 1 완료");
    callback();
  }, 1000);
}

function step2(callback) {
  setTimeout(() => {
    console.log("Step 2 완료");
    callback();
  }, 1000);
}

function step3(callback) {
  setTimeout(() => {
    console.log("Step 3 완료");
    callback();
  }, 1000);
}

// 콜백 지옥 발생
step1(() => {
  step2(() => {
    step3(() => {
      console.log("모든 작업 완료!");
    });
  });
});

📌 문제점:

• 콜백이 중첩될수록 코드가 읽기 어려워짐

 

4️⃣ 콜백 지옥 해결 방법 (Promise & async/await)

콜백 함수 대신 Promise와 async/await를 사용하면 코드가 더 직관적으로 바뀜

 

🚀 Promise를 사용한 개선 예제

function step1() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("Step 1 완료");
      resolve();
    }, 1000);
  });
}

function step2() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("Step 2 완료");
      resolve();
    }, 1000);
  });
}

function step3() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("Step 3 완료");
      resolve();
    }, 1000);
  });
}

// Promise 체이닝 사용
step1()
  .then(step2)
  .then(step3)
  .then(() => {
    console.log("모든 작업 완료!");
  });

📌 장점:

• 콜백 지옥이 해결되고 가독성이 향상됨

 

🚀 async/await을 사용한 개선 예제

async function processSteps() {
  await step1();
  await step2();
  await step3();
  console.log("모든 작업 완료!");
}

processSteps();

📌 장점:

• 동기 코드처럼 읽기 쉬워짐
• try...catch를 활용하면 에러 핸들링도 쉬워짐

 

🎯 콜백 함수 사용 시 주의할 점

1. 콜백 지옥을 피하기 위해 Promise나 async/await을 고려하라.
2. 오류 핸들링을 항상 포함하라. (try...catch 또는 callback(err, result))
3. 익명 함수보다 명시적인 함수 선언을 사용하면 가독성이 좋아진다.
4. 배열 메서드(forEach, map, filter 등)를 적극 활용하라.

 

✅ 정리 - 콜백 함수 사용법의 정석

콜백 함수 활용법	사용 예제
기본 사용법	mainFunction(callbackFunction);
비동기 작업	setTimeout(callback, 2000);
배열 메서드	arr.map(callback);
이벤트 핸들러	element.addEventListener("click", callback);
콜백 지옥 해결	Promise, async/await 사용

콜백 함수는 JavaScript에서 비동기 프로그래밍과 함수형 프로그래밍의 핵심 요소임.

하지만 콜백 지옥을 피하기 위해 Promise와 async/await을 적극적으로 활용하는 것이 좋음