콜백함수란 무엇인가?

gyojinnK·2024년 3월 17일

CS callback callback Hell

TIL - 지나치지 말고 집중해보기

목록 보기

15/23

오늘은 다른 아티클을 읽다가 콜백함수라는 키워드를 봤다.
오늘의 TIL은 콜백함수 너야...

CallBack Function

콜백함수는 무엇이며 나아가 콜백지옥은 무엇인가?

콜백 함수란?

콜백함수란 다른 함수에 인자로 전달되는 함수다.

function a(callback){
  callback();
}

function callback(){
  console.log("콜백함수 호출!");
}

본 예시에서 a함수에 callback함수를 인자로 받는다.
a(callback);을 실행하면 콜백함수 호출!이 출력된다.
동작 과정을 보면 a함수의 인자인 callback함수가 a함수 내에서 호출되면서(Callback) console.log문이 실행되는 것이다.

콜백 함수 호출 방법

콜백함수를 호출하는 방법에는 동기식 콜백(synchronous callback)과 비동기식 콜백(asynchronous callback)이 있다.

let value = 1;

doSomething(() => {
  value = 2;
});

console.log(value);

위 예제에서 만약 doSomething함수가 동기식으로 동작한다면 value의 값이 1에서 함수를 거치며 2로 변경되어 출력 값은 2가 될 것이다.
만약 비동기식으로 동작한다면 value의 값이 1로 시작하고 비동기 doSomething함수를 거치는데 value가 2로 바로 대입되는 것이 아니기 때문에 value는 1이 출력된다.

동기식/비동기식 콜백 함수 종류

동기식 콜백함수
- Array.prototype.map()
- Array.prototype.forEach()
비동기식 콜백함수
- setTimeout()
- Promise.prototype.then()

CallBack Hell

콜백 함수에 대하여 알아봤으니 콜백 지옥에 대해서 알아보자

콜백 지옥이란?

콜백 지옥은 콜백 함수가 다량으로 중첩되어 코드가 복잡해지고 가독성을 떨어뜨리는 것을 말한다.

나도 개인 프로젝트를 진행하면서 콜백 지옥을 경험했던 기억이 있다.
그렇다면 비동기 처리에서 콜백 지옥을 완화하기 위해서는 어떻게 해야할까?

콜백 지옥에서 벗어나는 방법

콜백 함수를 외부로 분리하기

// 비동기 작업을 수행하는 함수
function asyncTask(callback) {
  setTimeout(() => {
    const result = '비동기 작업 완료';
    callback(result);
  }, 1000);
}

// 결과를 처리하는 콜백 함수
function handleResult(result) {
  console.log(result);
}

// 콜백 함수를 외부로 분리하여 사용
asyncTask(handleResult);

async/await 사용하기

// 비동기 작업을 수행하는 함수 (프로미스 반환)
function asyncTask() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const result = '비동기 작업 완료';
      resolve(result);
    }, 1000);
  });
}

// 비동기 작업 처리
async function handleAsyncTask() {
  try {
    const result = await asyncTask();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

handleAsyncTask();