[06-01] JavaScript 기본 - 5 CallBack, Promise, Async/Await

1. CallBack

: 비동기 함수의 실행이 끝난 후, 그 결과를 처리하기 위해 전달되는 함수.

: 함수(콜백)를 파라미터로 실행권과 함께 전달 ->함수 파라미터 + 실행권 이양

: 의존성이 복잡하게 엮인 경우 Callback Hell 발생

• CallBack 자체로는 비동기 함수와 직접적인 관계 X
• 비동기에서 CallBack이 자주 활용(비동기 작업 후, 후처리를 하기 위해)

---

2. Promise

: CallBack + Asynchronous = Promise

: Producer-Consumer Pattern on Asynchronous 라고도 표현

: CallBack의 한계를 극복하기 위해 등장 -> "객체"

: 비동기 처리 연산 후 , 해당 객체를 반환

promise = caller + susseces callback + fail callback

→ producer === caller

 

---

2.1 Promise 상태

: Executee(콜백)과 Executor(비동기) 정의 및 상태

: .then or .catch를 통한 비동기 흐름제어

 

출처: ASAC 수업자료

• Promise의 상태
  1) pending : 대기
  2) fulfilled : 이행 => resole() 값
  3) rejected : 거부 => reject() 값

=> Promise의 상태의 따라 다른 Callback함수 호출

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("데이터를 가져왔습니다.");
            resolve("여기서 받은 데이터");
        }, 2000);
    });
}

fetchData()
    .then((data) => {
        console.log("프로미스로 받은 데이터:", data);
    })
    .catch((error) => {
        console.log("오류 발생:", error);
    });

1) fulfilled의 경우 : .then() 내 성공 시, resolve()에서 처리

2) rejected의 경우 :.catch() 내 실패 시, reject()에서 처리

=> Promise 내, 콜백 함수의 실행 시점은 new promise로 객체 생성 즉시

---

2.2 Promise Hell(= Nested Promise)

: 여기서도 결과값을 .then으로 전달 시, Promise Hell(= Nested Promise) 발생

=> 결과값을 반환하여 사용하는 Promise chain으로 사용하기

// Promise Hell
step1(value1).then((value2) => {
  step2(value2).then((value3) => {
    step3(value3).then((value4) => {
      console.log(value4);
    });
  });
});

// Promise chain
step1(value1)
  .then((value2) => {
    return step2(value2);
  })
  .then((value3) => {
    return step3(value3);
  })
  .then((value4) => {
    console.log(value4);
  });

---

3. Async/Await (비동기/대기)

: promise 기반의 비동기 처리를 더 간단하고 직관적으로 만들어주는 문법

: Callback 따로 정의하지 않고, Promise 호출한 (외부) 함수가 처리하는것 = Callback 의 역할을 대신

: try/catch를 통한 예외처리 가능

---

3.1 Async/Await - Promise의 관계

: async는 반환 값이 promise 객체임을 의미

: await은 비동기 활동이 끝날 때까지 기다리는 것을 의미

• Async/Await 은 이 둘을 분리한것 = Produce-Consumer 둘을 똑 뗀것
  1) async  function 콜백 함수() {}
      => async가 붙은 함수는 반드시 promise객체를 반환
      ==> return 값을 반환할 경우 : 성공- Promise.resolve 객체 반환
      ==> throw new Error()를 통해 Exception을 던진 경우 : 실패 - Promise.reject 객체 반환
  2) const result = await 콜백 함수()
      => await을 통해 Promise가 처리될 때까지 대기
      => 사용하지 않을 경우 promise의 상태가 pending일 때의 반환 값이 올 수 있음

---

4. 정리

특성	CallBack	Promise	Async/Await
코드 가독성	낮음 (콜백 지옥)	높음 (체이닝)	매우 높음 (동기 코드처럼)
오류 처리	어렵고 복잡	.catch()로 처리	try/catch로 동기식 처리
비동기 흐름	중첩된 콜백	.then()과 .catch()로 처리	await로 처리

 

---

참조

ASAC 수업자료