Promise로 라면 먹기

Async await은 ES6에 추가된 문법으로 promise를 기다리는 것을 간결한 코드로 구현할 수 있습니다.

promise란?

비동기 처리를 위해 사용하는 객체를 의미합니다.
주로 api 관련 코드를 작성하면 비동기일 때가 많아 promise 사용법은 꼭 알아 두어야 합니다.

예시로, 자바스크립트에서 라면을 끓여 먹어볼까요?

const makeRamen = () => {
  setTimeout(() => {
    console.log("라면 끓이기");
  }, 2000);
};
makeRamen();

라면을 끓였으니 다 먹어보도록 하겠습니다.

const eatRamen = () => {
  setTimeout(() => {
    console.log("라면 다 먹기");
  }, 2000);
};
eatRamen();

makeRamen과 eatRamen을 같이 실행한다면 어떻게 될까요?
콘솔에 2초가 지나면 "라면 끓이기" -> "라면 다먹기" 가 연달아 찍히게 됩니다. 이 과정을 이해하고 싶다면 event loop를 알아야 합니다.
event loop는 그림으로 봐야 이해하기 쉽기 때문에 아래 링크를 첨부합니다.

https://medium.com/sjk5766/javascript-%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%95%B5%EC%8B%AC-event-loop-%EC%A0%95%EB%A6%AC-422eb29231a8

풀어서 설명하자면, 프로미즈와 같은 비동기 함수들은 실행이 완료되면 이벤트 큐에 쌓이게 되고
이벤트 큐에 쌓인 함수는 콜스택이 비워질때마다 콜스택에 올라간 후 실행 완료 됩니다.

이렇게 이벤트큐와 콜스택을 확인하여 함수를 실행시키는 과정을 event loop라고 부릅니다.

즉, 라면 끓이기와 라면 다 먹기는 setTimeout이라는 비동기 함수로 둘 다 2초가 완료되면 이벤트 큐에 라면끓이기 -> 라면 다 먹기 순으로 들어오게 되고 콜스택에 차례대로 올라 완료가 됩니다.

이제 다시 라면 끓이기로 돌아오자면, 우리가 원하는건 아래와 같습니다.

실행 -> 2초 뒤 -> "라면 끓이기" -> 2초 뒤 -> "라면 다 먹기"

promise를 사용하게 되면 우리가 원하는대로 함수를 실행할 수 있게 됩니다.
다만 .then을 활용하게 되면 콜백 지옥에 빠질 수 있습니다.

const makeRamen = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(console.log("라면 끓이기"));
    }, 2000);
  });
};
const eatRamen = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(console.log("라면 다 먹기"));
    }, 2000);
  });
};

makeRamen().then(eatRamen);

만약에 라면 끓이기 뒤에 설거지랑 양치하기가 있다고 해봅시다. 아래처럼 코드가 길어진다고 생각하면 코드를 읽기 쉽지 않겠죠?

const makeRamen = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(console.log("라면 끓이기"));
    }, 2000);
  });
};
const eatRamen = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(console.log("라면 다 먹기"));
    }, 2000);
  });
};

makeRamen()
  .then(eatRamen)
  .then(() => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(console.log("설거지"));
      }, 2000);
    });
  })
  .then(() => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(console.log("양치"));
      }, 2000);
    });
  });

여기서 조금 더 업그레이드 시켜 async await을 사용해봅시다. 코드가 더 간결해짐을 알 수 있습니다.

const makeRamen = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(console.log("라면 끓이기"));
    }, 2000);
  });
};
const eatRamen = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(console.log("라면 다 먹기"));
    }, 2000);
  });
};

async function Mukbang() {
  await makeRamen();
  await eatRamen();
}

Mukbang();

여기서 동일하게 설거지와 양치를 추가해보도록 하겠습니다.

const makeRamen = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(console.log("라면 끓이기"));
    }, 2000);
  });
};
const eatRamen = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(console.log("라면 다 먹기"));
    }, 2000);
  });
};

async function Mukbang() {
  await makeRamen();
  await eatRamen();
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(console.log("설거지"));
    }, 2000);
  });
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(console.log("양치"));
    }, 2000);
  });
}

Mukbang();

.then일때 보다 알아보기는 쉬어졌죠??