post/async-function-about-return-await/

[giscus[bot]]

post/async-function-about-return-await/

비동기 함수의 결과를 다루는 방법에 대해 알아봅니다. await, return, return await의 차이를 이해합니다.

https://jgjgill-blog.netlify.app/post/async-function-about-return-await/

[icymonk]

return await 에 대한 블로그글들 반 이상이 이상한 예시이던데..

비동기 함수의 에러를 캐치하려면 await이 당연히 있어야하고 없으면 캐치가 안되는게 당연한데 로직과 무관한 return 을 껴서 이상한 논리가 생기네요

에러캐치도 해야하고 await을 꼭 써야하고 return 해야하면 아래와 같이 사용하는게 맞지요

const result = await f()

return result

에러핸들링을 하는곳은 어차피 상위 호출하는 곳 일부이고 남발하게 되는 경우는 코드구조가 잘못된것이죠

불필요한 행사코드를 적는 일에 불과하고 성능까지 떨어지면 굳이 쓸 필요가 있을까요?

[icymonk]

원문 보시는게 좋을 것 같습니다. https://perade.github.io/blog/await-vs-return-vs-return-await/

[jgjgill]

아아 말씀해주신 원문의 경우 저도 참고해서 작성을 했는데요..! 😅 참고 문서 - await vs return vs return await

혹시 원문과 비교했을 때 잘못된 부분이 있었을까요?? 😵
알려주시면 감사하겠습니다..! 🙇‍♂️

[jgjgill]

안녕하세요..! 우선 부족한 글 읽어주시고 피드백 남겨주신 점 감사드립니다. 🙇‍♂️
말씀하신 부분들 하나씩 이야기해보면 좋을 것 같아요.

return await 에 대한 블로그글들 반 이상이 이상한 예시이던데..

아아 그렇군요. 제 글도 이상한 부분이 존재했을까요? 🤔
제가 작성했던 예시는 말씀해주신 원문을 기반으로 변수명과 같은 부분만을 변형해서 작성 했었는데요. 혹시 놓친 부분이 있었을까요?

아래와 같이 사용하는게 맞지요
await이 당연히 있어야하고 없으면 캐치가 안되는게 당연한데 로직과 무관한 return 을 껴서 이상한 논리가 생기네요
굳이 쓸 필요가 있을까요?

말씀하신 것처럼 await과 return을 사용하는(글에서는 return await 호출에 해당하는) 것이 저도 적절하다고 생각해요.
이 부분은 제가 글을 작성하게 된 계기를 이야기하면 좋을 것 같아요.

제 기억에 아마 당시 팀원분의 코드에서 다음 코드를 마주하게 되었던 것 같아요. 🧐

async function foo() {
  return temp() // 비동기 함수
}

글과 비교했을 때는 return 호출 부분과 유사해 보이네요.

코드를 처음 봤을 때 낯선 느낌을 받았고 await을 붙여야 하지 않나 라는 생각이 들었어요.
그런데 데이터는 정상적으로 반환이 되어서 '이게 왜 동작하지?' 라는 의문이 생기게 되었어요.
이렇게 동작을 정확하게 이해하지 못하다 보니 리뷰에서 팀원분을 효과적으로 설득시킬 수가 없더라구요. 😂
이러한 경위로 해당 문법을 사용하는 비동기 함수 부분을 정리할 필요성을 느끼게 되었어요.

정리하면 '어디가 잘못된 구문인지 정확하게 이해하고 싶어서', '해당 코드를 마주했을 때 잘 설명하고 싶어서' 해당 글을 쓰게 되었다고 생각해 주셨으면 해요.

남겨주신 댓글 덕분에 다시 한 번 제가 작성한 글을 검토하고 지식을 점검할 수 있었던 것 같아요.
남긴 댓글에서도 잘못되거나 모호한 부분 있으시면 편하게 이야기해주세요..!
감사합니다. 🙇‍♂️

[icymonk]

마지막 정리 문장 내용이 약간 모호하기도하고 jgjgill님 글 보기 직전에 다른 블로그를 봐서 조금 혼동해서 제 의견이 잘 전달 안된것 같네요

정리하면 return await은 try catch 구문에서 프로미스를 반환하는 다른 함수의 오류를 잡을 때 사용하면 좋다.

1. trycatch 에서 오류를 잡아야하며
2. 해당 함수 리턴값을 리턴해야하고
3. await을 꼭 쓰고싶다

3가지 모두 해당하는 경우에만 return await을 '쓸 수 있다' 이지 '사용하면 좋다' 는 아니라고봐서요

const result = await f()

return result

이처럼 변수화 하는것으로 통일하는게 전체 프로젝트 단위에서 좋을 수 있습니다.

---

그리고 올려주신 예시 코드

async function foo() {
  return temp() // 비동기 함수
}

가 잘못되지 않았고 오히려 위처럼 사용해야 한다는 의견입니다.

[jgjgill]

3가지 모두 해당하는 경우에만 return await을 '쓸 수 있다' 이지 '사용하면 좋다' 는 아니라고봐서요

으음 남겨주신 댓글들로 유추했을 때 return await 방식이 좋지 않다고 생각하신 이유가 불필요한 행사코드, 성능 문제 때문인 것 같네요.
개인적으로는 불필요하다고 생각하지 않고 성능은 제가 직접 확인하지 못한 부분이라 확신이 안서네요.
우선 지금 생각에 저는 여전히 '사용하면 좋다'라는 입장이어서 따로 글을 수정하지는 않겠습니다. 🙇‍♂️

오히려 위처럼 사용해야 한다는 의견입니다.

글과 연결지어 생각했을 때 icymonk님은 return 호출이 적절하다는 의견인 것 같았어요.

근데 return 호출은 글에서 작성했듯이 try catch로 에러를 잡지 못한 부분이 저한테는 큰 단점으로 느껴졌어요.
'코드가 복잡한 상황에서 추적하기 어려운 상황이 발생할 수 있지 않을까?'
'자신만 아는 코드를 작성하게 되지는 않을까?'
'실수하기 쉬운 환경이지 않을까?'

그리고 개인적으로 async 함수에서 return만을 호출하는 코드는 async 함수가 Promise 반환한다는 점을 모르면 동작을 이해하기 어렵게 만드는 것 같아요. (글을 작성한 계기)

물론 이 부분은 제가 공부가 부족해서 발생한 문제이지만 return await으로 하면 더 명료하다는 점이 저한테는 더 장점으로 다가왔네요.

[icymonk]

네 저도 수정해달라고 적은 의견은 아니었어요.

그리고 개인적으로 async 함수에서 return만을 호출하는 코드는 async 함수가 Promise 반환한다는 점을 모르면 동작을 이해하기 어렵게 만드는 것 같아요. (글을 작성한 계기)

async 함수는 return 1 과 같이 Promise가 아닌 값을 리턴해도 Promise로 감싸집니다.

await이 Promise를 만드는게 아닌 async 자체가 만들거든요

async를 안붙이고 내부에서 Promise를 반환하는 함수를 리턴해버린다면 말씀처럼 헷갈릴 수 있겠지만 해당 호출부 함수에 async를 붙이는 것 만으로도 충분할 것 같습니다.

(아마 Promise return인데 async 없으면 워닝띄워주는 린트도 있던걸로 기억하네요)

[icymonk]

추가적으로 이게 왜 동작하지? 는 Promise에 Promise를 감싸도 1 depth Promise 객체가 떨어집니다.

콘솔에 아래 코드 실행 해보시면 조금 도움되지 않을까 싶네요

function a() { return Promise.resolve(Promise.resolve(1)) }

await a()

Promise.resolve가 아닌 실제 비동기나 new Promise + setTimeout 등 해보아도 동일합니다.

[jgjgill]

아아 제가 '이게 왜 동작하지?' 라는 의문을 해소한 부분은 async 함수가 Promise를 반환한다는 점을 몰라서 발생했던 것 같아요.
이와 별개로 좋은 정보 알려주셔서 감사합니다..! 🙇‍♂️