비동기 프로그래밍에는 많은 난관이 있다. 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 |