promise,aync,await 사용하는 법

면접 질문중에 아래와 같은 코드가 실행되는 순서와 동기적으로 실행되려면
어떻게 코드를 짜야 되는지 물어보셨다.
답변은 못했지만 해결방안을 찾아 기록으로 남기고 싶어서 velog에 기록을 남긴다.

const func = () => {
        return (
          setTimeout(() => [1, 2, 3, 4, 5].map((v) => console.log("number: " + v)), 1000)
        )
      }
      console.log("program start")
      func()
      console.log("program end")

위의 코드였는데 이렇게 될경우 비동기적으로 실행되기 때문에 program start가 나오고
그 후 program end 그 후 number:1, number;2.....식으로 진행 될 것이다.
이를 순차적으로 해결하기 위해 callback로 해결하려고 했지만 잘 되지 않아 promise로
만든 것을 기록으로 남긴다.

  const promise = ()=>{
    new Promise((res, rej) => {
        console.log("program start")
        setTimeout(() => {
          return (
            [1, 2, 3, 4, 5].map((v) => {
              console.log("number: " + v)
            }),
            console.log("program end")
          )
        }, 1000)
      })
  }
  promise()

위와 같이 프로미스로 만들경우
program start
number: 1
number: 2
number: 3
number: 4
number: 5
program end
로 잘 실행된다.

위의 코드를 async await으로 만든다고 한다면

const promise = ()=>{
    new Promise((res, rej) => {
        console.log("program start")
        setTimeout(() => {
          return (
            [1, 2, 3, 4, 5].map((v) => {
              console.log("number: " + v)
            }),
            console.log("program end")
          )
        }, 1000)
      })
  }
      
      async function order() {
        const result1 = await promise()
      }
      
      order()

위와 같은 코드로 바꿀 수 있을 것이다.
promise는 똑같이 사용하지만 order이라는 함수 안에서 순차적으로 실행 될것이다.
물론 결과는 윗윗 코드와 같다. async await은 그냥 promise를 좀 더 가독성 좋게
사용할 수 있는 디자인 패턴일 뿐이다.