자바스크립트 비동기 실행순서 보장 그냥 간단히 따라하기

순서를 지켜라

처음에 자바스크립트의 비동기적 특성 때문에 내가 원하는 순서대로 실행되지 않는다는 것을 깨달았을 때,
실행 순서는 보장 받고 싶지만 동기, 비동기, Promise, then, async, await 다 무슨 말인지 모르겠고 무서웠다.
아니면 콜백함수로 다 처리해버리면 된다는데 또 콜백지옥 얘기를 꺼내며 다들 안좋단다.
그래서 그 때의 나에게 해결책을 제시해주듯이 간단히 따라할 수 있도록 정리해보겠다.

Play() 함수 안에서,
showFirst() -> showSecond() -> showThird() 의 순서로 실행되기를 원하는데
showFirst() -> showThird() -> showSecond() 의 순서로 실행되고 있는 상황으로 가정한다.

해결책 1. async await 그냥 따라하기

• async 붙이고 await 붙이기
  

  // 기존 함수
  function Play() {
  	showFirst();
      showSecond();
      showThird();
  }
  
  // async
  async function Play() {
  	showFirst();
      await showSecond();
      showThird();
  }

  
  - Play 함수 선언 전에 async 를 붙이고 문제의 showSecond 함수 사용 전에 await 을 붙인다.
  - 이 상태로는 showSecond 가 일반 함수라면 아무런 효과가 없다. showSecond 를 Promise 함수로 바꿔줘야 한다.
  
  
• Promise 함수로 바꾸기
  

  // 기존 함수
  function showSecond() {
    alert("Second!");
  }
  
  // Promise
  function showSecond() {
    return new Promise(function(resolve,reject){
      alert("Second!");
      resolve(); // resolve("second") 처럼 값을 return 시킬 수 있다.
    });
  }

  
  - 기존 함수의 실행 부분을 return new Promise(function(resolve,reject){ }); 이것으로 감싼다.
  - 함수를 종료시킬 resolve() 는 필수이며, 이것은 파라미터 값을 return 한다.
• 끝
  - 생각보다 쉽다.
  
  

해결책 2. async.waterfall 노드 모듈 사용하기

• npm install async
  - 프로젝트 경로에서 cmd 명령어로 async 모듈을 설치한다.
  
  
• waterfall 로 감싸기
  

  // 기존 함수
  function Play() {
  	showFirst();
      showSecond();
      showThird();
  }
  
  // waterfall
  function Play() {
    async.waterfall([
        showFirst,
        showSecond,
        showThird,
    ], function (err, result) {
        if(err)
            console.log(err);
        else
            console.log("작업 완료");
    });
  }

  - async.waterfall([ ], function (err, result) { }); 의 대괄호에 순서대로 함수 이름을 적는다.
  
  
• 끝
  - 쉽다.