[JS] Callback, Promise, async/await

Callback

• 콜백 함수 : 나중에 호출할 함수

• 콜백 함수 호출 시점의 권한이 개발자가 아닌, 제어권을 넘겨받은 코드에게 있음

• 콜백 지옥 생성 가능 -> 가독성 하락

  function first(callback) {
    let value;
  
    setTimeout(() => {
      value = { name: "MaxlChan", age: 18 };
      callback(null, value);
    }, 4000);
  }
  
  first(function callbackOne(error, value) {
    if (error) {
      // ErrorHandling
    } else {
      second(value, function callbackTwo(error, value) {
        if (error) {
          // ErrorHandling
        } else {
          third(value, function callbackThree(error, value) {
            if (error) {
              // ErrorHandling
            } else {
              console.log(
                `Final value is ${value}. Here is end of Callback hell...`
              );
            }
          });
        }
      });
    }
  });

  
  

Promise

• ES6에 도입

• 미래에 어떤 종류의 결과가 반환됨을 약속해주는 오브젝트

• Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냄

  • 실행이 잘 성공했는지
  • 실행이 실패했는지
  • 성공 or 실패의 결과 값이 무엇인지

• new 키워드로 객체 생성

• executor : 실행자 함수, 인자로 받아지는 함수

• then : 프로미스가 이행되었을 때 실행되는 함수

• catch : 프로미스가 거부되었을 때 실행되는 함수

• finally : 프로미스의 성공, 실패에 관계 없이 처리만 되면 실행되는 함수

  const successPromise = new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve("Success");
    }, 3000);
  }); // 비동기 작업 완료 후, 성공 값 "Success"를 가진 프로미스 객체(인스턴스)를 생성하고 변수에 할당
  
  const failurePromise = new Promise(function (resolve, reject) {
    setTimeout(function () {
      reject(new Error("Request is failed"));
    }, 3000);
  }); // 실패 값 new Error("Request is failed")를 가진 프로미스 객체(인스턴스)를 생성하고 변수에 할당

• Promise 객체의 3가지 상태

  • 대기(pending) : 초기 상태, 약속된 결과 값이 반환되지 않은 상태
  • 이행(fulfilled) : 성공
  • 거부(rejected) : 실패
    
    

async/await

• ES8에 도입
• Promise 결과 값을 변수에 담아 동기적 코드처럼 작성
• async 함수를 실행하게 되면 무조건 Promise 객체가 반환
• await 키워드는 반드시 async 함수 안에서만 사용해야 함
• await 키워드는 Promise 객체를 생성하는 함수 앞에 놓을 수 있음
• 자바스크립트가 await 키워드를 만나게 되면 해당 함수 Promise 상태가 이행될 때까지 기다렸다가 이행이 완료되면 그 결과 값을 반환하고 다음 코드를 실행
• await 키워드를 사용하면 기존 실행 순서 예측이 불가능했던 비동기 작동 방식이 동기적으로 실행되는 코드처럼 예측 가능해짐
  
  

참고

• • https://velog.io/@coin46/%EB%B9%84%EB%8F%99%EA%B8%B0%EB%A5%BC-%EC%B2%98%EB%A6%AC%ED%95%98%EB%8A%94-%EC%BD%9C%EB%B0%B1-Promise-asyncawait