• async function의 호출 결과를 return 해야할 때, await를 붙이는 것과 빼는 것은 무슨 차이가 있을까?

async function asyncFunction() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('async error'));
    }, 1000);
  });
}

async function normalReturnFunction() {
  try {
    return asyncFunction();
  } catch (error) {
    console.error('caught by normal function', error);
  }
}

async function awaitReturnFunction() {
  try {
    return await asyncFunction();
  } catch (error) {
    console.error('caught by await return function', error);
  }
}

// 1
(async () => {
  try {
    await normalReturnFunction();
  } catch (error) {
    console.error('caught by main function', error);
  }
})();
// caught by main function Error: async error

// 2
(async () => {
  try {
    await awaitReturnFunction();
  } catch (error) {
    console.error('caught by main function', error);
  }
})();
// caught by await return function Error: async error

• 1과 같이 단순히 async function을 return 하는 경우는 불필요한 키워드이므로 쓰지 않는다.
• 하지만 2와 같이 예외처리를 해야되는 경우에는 return문에 await를 쓰는 것이 허용된다.
• extra microtask를 처리하는 cost가 발생한다.

참조

https://eslint.org/docs/rules/no-return-await