async 함수에서 await가 있을 때와 없을 때 차이

async function func() {
  console.log('func')
  throw new Error()
}

async function someFunc() {
  try {
    func()
    console.log("gotcha!");
  } catch {
    console.log('error')
  } finally {
    console.log('end')
  }
}

someFunc();
console.log("hi");
someFunc();
console.log("hello");

// func
// gotcha!
// end
// hi
// func
// gotcha!
// end
// hello

1. async 함수 내에서 반환되는 부분 이외의 로직은 바로 실행됩니다.
2. async 함수 바깥의 동기적인 코드들이 모두 실행됩니다.
3. async 함수에서 프라미스 객체를 반환합니다. (만약, chaining으로 .then 또는 .catch한다면 프라미스 객체가 반환된 후 차례대로 실행됩니다)

• async 함수에서 값을 반환하면 fulfilled 상태와 result 값을 지닌 프라미스 객체를 반환합니다.
• async 함수 내에서 에러를 던져도 호출하는 함수의 catch 부분에서는 잡아내지 못합니다.
  에러 그 자체가 아닌 rejected 상태와 에러를 담고 있는 프라미스 객체를 반환하기 때문입니다.

여기서 async 함수 호출하는 부분에 await가 추가된다면 발생되는 효과는 다음과 같습니다.

async function func() {
  console.log('func')
  throw new Error()
}

async function someFunc() {
  try {
    await func()
    console.log("gotcha!");
  } catch {
    console.log('error')
  } finally {
    console.log('end')
  }
}

someFunc();
console.log("hi");
someFunc();
console.log("hello");

// func
// hi
// func
// hello
// error
// end
// error
// end

1. async 함수 내에서 await 명령문보다 위에 위치한 코드들은 바로 실행됩니다.
2. await를 만나는 순간 async 함수 바깥의 동기적인 코드들이 순서대로 실행됩니다.
3. async 함수 안의 await 문과 그 밑의 코드들이 차례로 실행됩니다.

await는 Promise 객체의 result 값 또는 에러를 반환합니다. 따라서, 호출하는 함수에서 catch를 하면 바로 잡아낼 수 있습니다.

async 함수 내에서 await를 해주면 비동기 작업의 결과물을 받아서 처리할 수 있게 되므로 async 함수 안에서 동기적으로 코드를 짤 수 있게 됩니다.

async 함수 바깥의 동기적인 부분들이 먼저 처리된다는 점에 유의하면서 비동기 로직을 작성하신다면 JS의 동시성 처리를 좀 더 유연하게 사용할 수 있으리라 생각합니다.