async 함수 선언은 이름 그대로 비동기(asynchronous) 함수를 정의하는 방법입니다. async 함수는 항상 AsyncFunction 객체를 반환하며, 함수 내부에서 await 키워드를 사용해 프로미스(Promise)의 처리가 완료될 때까지 기다릴 수 있습니다. 이를 통해 콜백 지옥 없이도 동기 코드처럼 읽기 쉬운 비동기 로직을 작성할 수 있습니다.
async 함수의 기본 문법
async 함수를 선언하는 기본 문법은 다음과 같습니다.
async function functionName([param[, param[, ... param]]]) {
실행할 코드
}
일반 함수 선언 앞에 async 키워드만 붙이면 되며, 이렇게 선언된 함수는 반환값이 무엇이든 자동으로 프로미스 형태로 감싸서 반환합니다.
예제: 5초 후 곱셈 결과 출력하기
다음 예제는 두 개의 비동기 작업을 실행하고, 각각 5초가 지난 뒤 결과를 받아 곱셈을 수행한 값을 화면에 출력합니다.
<html>
<body>
<script>
function displayFunction(num) {
return new Promise(resolve => {
setTimeout(() => {
resolve(num);
}, 5000);
});
}
async function add2(num) {
const x = displayFunction(7);
const y = displayFunction(5);
return num * await x * await y;
}
add2(15).then(result => {
document.write("곱셈 결과 (5초 후): " + result);
});
</script>
</body>
</html>
코드 동작 원리
displayFunction은 setTimeout을 이용해 5초(5000밀리초) 후에 전달받은 숫자를 resolve하는 프로미스를 반환합니다. add2 함수는 async로 선언되어 있어 await 키워드를 사용할 수 있으며, 두 프로미스가 모두 완료될 때까지 기다린 뒤 곱셈을 수행합니다.
여기서 주목할 점은 x와 y를 먼저 호출한 후 await를 적용했다는 것입니다. 덕분에 두 비동기 작업이 병렬로 동시에 진행되어 총 대기 시간이 10초가 아닌 5초로 줄어듭니다. 최종적으로 add2(15)는 15 × 7 × 5 = 525라는 결과를 반환하며, .then()을 통해 화면에 출력됩니다.