[JavaScript 심화] 비동기 - 콜백 함수

자바스크립트는 기본적으로 한 줄씩 순서대로 실행되는 "동기" 언어임!
하지만 현실적으로 "서버에서 데이터 받아오기", "파일 읽기", "타이머 기다리기" 등 시간이 걸리는 작업이 많음.

이런 작업을 다 기다리다보면 브라우저가 멈추기 때문에, 비동기 방식으로 처리해야 함

---

1. 기본적인 비동기 예시

function task() {
  setTimeout(() => {
    console.log("안녕!");
  }, 3000);
}

task();

// (3초 후) 안녕!

`setTimeout()`은 대표적인 비동기 함수임.

3초(3000ms) 뒤에 `console.log("안녕")`을 실행하는데,

그동안 JS는 멈추지 않고 다음 코드를 계속 실행함.

즉, `setTimeout()`은 나중에 실행할 일을 예약하는 함수임

---

2. 비동기 함수의 결과를 외부에서 쓰기 어려운 이유

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

add(1, 2);

// (4초 후) 3

이 코드에서 `sum`은 함수 내부에서만 접근이 가능함

그렇기 때문에 함수 외부에서 결과값을 받아 사용할 수가 없음

왜냐면 `setTimeout()` 안의 코드는 나중에 실행되기 때문임.

---

그렇다면 방법이 아예 없나??

그렇지 않음.

3. 콜백을 이용한 해결

콜백 함수는 "다 끝나면 이걸 실행해줘"라는 의미임

function add1(a, b, callback) {
  setTimeout(() => {
    const sum1 = a + b;
    callback(sum1);
  }, 5000);
}

add1(3, 4, (value) => {
  console.log(value);
});

// (5초 후) 7

• `callback`은 나중에 실행할 함수를 뜻함
• `add1`이 5초 동안 기다리다가 계산이 끝나면
  -> 그 결과인 `sum1`을 `callback()`으로 전달함
• 즉, `callback(sum1)`은 "결과 다 나왔으니 이제 네 차례임"이라고 하는 신호임

이 구조 덕분에 비동기 결과를 외부에서 활용할 수 있게 됨

---

4. 콜백이 여러 번 중첩될 때 (콜백 지옥)

음식 주문 -> 음식 식히기 -> 음식 얼리기 를 예시로 들어보겠음

// 음식 주문
function orderFood(callback) {
  setTimeout(() => {
    const food = "타코야끼";
    callback(food);
  }, 5000);
}

// 음식이 식음
function cooldownFood(food, callback) {
  setTimeout(() => {
    const cooldownedFood = `식은 ${food}`;
    callback(cooldownedFood);
  }, 2000);
}

// 음식을 얼림
function freezeFood(food, callback) {
  setTimeout(() => {
    const freezedFood = `냉동된 ${food}`;
    callback(freezedFood);
  }, 2000);
}

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

  cooldownFood(food, (cooldownedFood) => {
    console.log(cooldownedFood);

    freezeFood(food, (freezedFood) => {
      console.log(freezedFood);
    });
  });
});

// (5초 후) 타코야끼
// (7초 후) 식은 타코야끼
// (9초 후) 냉동된 타코야끼

• `orderFood`가 끝나면 -> `cooldownFood` 실행
• `cooldownFood`가 끝나면 -> `freezeFood` 실행
• 각각의 함수가 다 끝난 뒤 다음 단계로 넘어가는 구조임

이렇게 단계마다 콜백을 넣는 방식이 바로 콜백 기반 비동기 처리임

하지만 이런 구조가 계속 깊어지면

task1(() => {
  task2(() => {
    task3(() => {
      task4(() => {
        ...
      });
    });
  });
});

이런식으로 중첩이 심해지는 현상이 생김. 이를 콜백 지옥이라고 부름.

그럼 이건 어떻게 해결하냐??

 

다음에 공부할 `Promise`와 `async/await`를 사용하면 됨. 실제로 이걸 더 자주씀

이건 다음에 다뤄보겠음!