반응형

비동기 프로그래밍에는 많은 난관이 있다. JavaScript에서는 이를 간단하게 만들어 주는 async/await 패턴이 있다. 하지만 이 패턴 내에서도 종종 개발자들이 혼란스러워하는 부분이 있다. 그 중 하나가 바로 async 함수 내부의 return에 관한 것이다.

 

기본적인 함수와 반환 값

일반적인 함수에서 값을 반환하지 않으면, 해당 함수는 undefined를 반환합니다. 그렇다면 async 함수에서는 어떻게 될까

function normalFunction() {
  console.log("This is a normal function");
}

const result = normalFunction();
console.log(result);  // undefined

 

async 함수의 기본 동작 방식

async 함수는 항상 Promise 객체를 반환한다. 만약 함수 내에서 명시적으로 값을 반환하지 않는다면, 그 함수는 undefined 값을 resolve하는 Promise를 반환한다.

const asyncFunction = async () => {
  await SomethingPromise();
  console.log("This is an async function");
}

const asyncResult = await asyncFunction();
console.log(asyncResult);  // undefined

 

왜 async 함수는 이렇게 동작하는가?

JavaScript의 async/await 패턴의 주 목적은 비동기 코드를 마치 동기 코드처럼 쓰게 만드는 것이다. async 함수가 Promise를 반환함으로써, await 은 해당 Promise가 resolve되거나 reject될 때까지 기다릴 수 있다.

따라서, async 함수 내에서 반환된 값이 없더라도, 함수 자체가 끝나면 해당 Promise는 resolve 상태가 되어 await 다음의 코드가 실행될 수 있게 됩니다.

 

실제 개발 과정에서, async 함수 내에서 항상 값을 반환할 필요는 없다. 종종 데이터를 가져오거나 다른 비동기 작업을 수행한 후에, 그 결과를 반환하지 않고 다른 작업을 진행하는 경우도 많다. 이러한 패턴을 이해하면, 비동기 코드의 흐름과 동작 방식을 더욱 잘 이해하고 활용할 수 있다.


JavaScript의 async/await는 비동기 로직을 쉽게 이해하고 구현할 수 있도록 도와준다. 함수의 종료와 Promise의 resolve 시점을 명확하게 파악하는 것은 이 패턴을 효과적으로 활용하기 위한 중요한 핵심입니다.

반응형

'Programming > Javascript' 카테고리의 다른 글

[Javascript] 데이터 타입  (0) 2022.06.04
[JavaScript] 배열에서 undefined 제거하는 방법  (0) 2022.05.28
얼은펭귄