[JavaScript] 25. 비동기 작업 처리하기 / 콜백함수

서회정

Feb 03, 2026

Contents

예제 1.예제 2. 음식을 주문하는 상황

💡

비동기 작업을 콜백함수로 처리해보자

예제 1.


function add(a, b) {
  setTimeout(() => {
    const sum = a + b;
    console.log(sum);
  }, 3000);
}

add(1, 2);

비동기 작업을 하는 함수의 결과값을 함수 외부에서 사용해보기


function add(a, b, callback) {
  setTimeout(() => {
    const sum = a + b;
    callback(sum);
  }, 3000);
}

add(1, 2, (value) => {
  console.log(value);
});

예제 2. 음식을 주문하는 상황


1. 음식을 주문하는 함수 만들고 떡볶이를 주문하여 3초 뒤에 배달받자


// 음식을 주문하는 상황
function orderFood(callback) {
  setTimeout(() => {
    const food = "떡볶이";
    callback(food);
  }, 3000);
}

orderFood((food) => {
  console.log(food);
});

⇒ 콜백함수를 orderFood의 인수로 받아 지정된 시간이 지난 후 콜백 함수가 실행된다!

⇒ 3초 뒤 떡볶이 배달 완료!


2. 음식이 뜨겁다! 음식을 식히는 함수를 만들어 2초 뒤에 식은 음식으로 만들자


function orderFood(callback) {
  setTimeout(() => {
    const food = "떡볶이";
    callback(food);
  }, 3000);
}

function coolDownFood(food, callback) {
  setTimeout(() => {
    const coolDownedFood = `식은${food}`;
    callback(coolDownedFood);
  }, 2000);
}

orderFood((food) => {
  console.log(food);
  coolDownFood(food, (coolDownedFood) => {
    console.log(coolDownedFood);
  });
});

⇒ 음식을 식히는 함수 coolDownFood를 만들고 인수로 food와 콜백함수를 받아, 음식이 배달 된 뒤 2초 뒤에 식은 떡볶이를 출력한다.


3. 음식이 남았다! 음식을 냉동실에 넣어 1.5초동안 얼려서 얼린 음식을 만들자


function orderFood(callback) {
  setTimeout(() => {
    const food = "떡볶이";
    callback(food);
  }, 3000);
}

function coolDownFood(food, callback) {
  setTimeout(() => {
    const coolDownedFood = `식은${food}`;
    callback(coolDownedFood);
  }, 2000);
}

function freezenFood(food, callback) {
  setTimeout(() => {
    const freezenedFood = `냉동된${food}`;
    callback(freezenedFood);
  }, 1500);
}

orderFood((food) => {
  console.log(food);
  coolDownFood(food, (coolDownedFood) => {
    console.log(coolDownedFood);
    freezenFood(food, (freezenedFood) => {
      console.log(freezenedFood);
    });
  });
});

⇒ 마찬가지로 음식을 얼리는 함수 freezenFood를 만들고 인수로 food와 콜백함수를 받아 비동기로 작업을 처리한다!


떡볶이 주문! -> 3초뒤 배달완료! -> 떡볶이 식히기 -> 2초 뒤 식힌떡볶기 완료! -> 떡볶이 얼리기 -> 1.5초 뒤 얼린떡볶이 완료!

비유를 위해 짜여진 주문 시스템이라 현실과 다를 수 있지만 이 모든 과정은 떡볶이를 주문하는 하나의 작업 안에서 동시에 진행되고 있다.

orderFood → coolDownFood → freezeenFood 는 비동기 작업이지만, 콜백을 통해 순서가 보장되도록 연결된 구조다. 함수는 즉시 종료되지만, 각 작업의 결과가 나올 때마다 다음 작업이 실행된다.