Callback hell, sync and async function

callback 함수는 비동기 작업(데이터 요청, 타이머)이나 이벤트 처리(버튼 클릭, 마우스 이벤트 등)에서 사용된다.

콜백 함수는 특정 작업이 완료된후 실행될 추가 작업을 지정하는 데 유용하다.

 

예: calculate 함수는 a와 b를 더하고 그 결과를 printResult 함수로 전달한다.
printResult는 콜백 함수로 사용되며, calculate 함수의 비동기적인 작업이 끝난 후 호출된다.

function calculate(a, b, callback) {
  const result = a + b;
  // 계산이 끝나면 콜백 함수 호출
  callback(result);
}

function printResult(result) {
  console.log(`The result is: ${result}`);
}

calculate(5, 3, printResult);  // printResult가 콜백으로 사용됨

 

 

 

콜백 지옥 (Callback Hell) 이란? 😈

콜백 지옥이란 여러개의 함수가 중첩이되어 코드가 읽기 어렵고 관리하기 힘들어지는 상황을 말한다.

 

 

예: 아래와 같은 코드는 중첩된 콜백들이 서로 연결되어 실행되며, 시간이 지나면서 코드가 점점 길어지고 읽기 어려운 형태가 된다. 이러한 형태를 콜백 지옥이라고 부른다.

문제점: 가독성 부족, 에러 처리 어려움, 유지보수 어려움

function task1(callback) {
  setTimeout(() => {
    console.log("Task 1 done");
    callback();
  }, 1000);
}

function task2(callback) {
  setTimeout(() => {
    console.log("Task 2 done");
    callback();
  }, 1000);
}

function task3(callback) {
  setTimeout(() => {
    console.log("Task 3 done");
    callback();
  }, 1000);
}

task1(() => {
  task2(() => {
    task3(() => {
      console.log("All tasks are done!");
    });
  });
});

 

 

콜백 지옥의 대표적인 해결 방법은 Promise, Async/Await가 있다.

 

Promise 사용

콜백 대신 Promise를 사용하면 중첩 구조를 제거하고 체인 형태로 코드를 작성할 수 있다.

task1()
  .then(() => task2())
  .then(() => task3())
  .then(() => console.log("All tasks are done!"));

 

async/ await 사용

Promise와 async/await를 함께 사용하면 더욱 직관적인 코드 작성이 가능하다.

async function runTasks() {
  await task1();
  await task2();
  await task3();
  console.log("All tasks are done!");
}

runTasks();

 

 

 

 

나는 비동기 함수에 항상 이해가 안가는 것이 있었다. 

 

왜 API 호출에 async/await를 써야 하지?

 

 

API 호출에서 async/await의 역할과 이유

1. API 호출은 비동기 작업이다
   • 데이터를 가져오는 데 시간이 걸리기 때문에 호출이 완료될 때까지 기다리지 않고 다른 작업을 진행할 수 있도록 비동기로 처리한다.
2. async/await는 비동기 코드를 동기적으로 보이게 만든다
   • 기본적으로 비동기 함수는 작업 완료를 기다리지 않지만, async/await를 사용하면 마치 동기 코드처럼 순차적으로 작업이 실행된다.
   • 즉, await는 해당 작업이 완료될 때까지 기다려주기 때문에 동기적인 흐름을 만들지만, 실제로는 여전히 비동기적이다.
3. 오류 처리 간소화
   • 비동기 작업은 실패할 가능성(예: 네트워크 오류)이 있기 때문에, 이를 처리해야 한다.
   • 기존 Promise의 .then().catch() 방식은 중첩될 경우 가독성이 떨어질 수 있다.
   • async/await는 try-catch를 사용하여 간단하게 오류를 처리할 수 있어 코드가 더 간결하고 직관적이다.