JavaScript의 비동기 함수(Async Function)는 async 키워드로 정의되며, 콜백 방식보다 훨씬 간결하고 가독성 좋은 형태로 프로미스(Promise)를 작성할 수 있도록 도입된 문법입니다. 비동기 함수 내부에서 await 키워드를 사용하면 제어 흐름이 일시적으로 멈추고, 해당 프로미스가 이행(fulfilled)될 때까지 기다린 뒤 그 결과값을 받아옵니다.
비동기 함수의 주요 특징
- 간결한 코드: 콜백 지옥(callback hell)이나 복잡한 프로미스 체이닝 없이, 마치 동기 코드처럼 자연스러운 흐름으로 비동기 로직을 작성할 수 있습니다.
- 항상 프로미스 반환: async 함수는 반드시 Promise 객체를 반환하며, 일반 값이 반환되더라도 자동으로 프로미스로 감싸집니다.
- await로 대기: await는 async 함수 내부에서만 사용할 수 있으며, 프로미스가 처리될 때까지 함수 실행을 일시 중지했다가 결과를 반환합니다.
- 손쉬운 오류 처리: 익숙한 try/catch 문법으로 비동기 작업 중 발생하는 에러를 깔끔하게 처리할 수 있습니다.
예제
다음은 JavaScript에서 비동기 함수를 활용하는 전체 예제 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
color: blueviolet;
font-weight: 500;
}
</style>
</head>
<body>
<h1>Asynchronous functions in JavaScript</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to call the function asyncFunc</h3>
<script>
let BtnEle = document.querySelector(".Btn");
let resEle = document.querySelector(".result");
function displayText() {
return new Promise((resolve) => {
setTimeout(() => {
resolve("Hello World");
}, 1500);
});
}
async function asyncFunc() {
resEle.innerHTML = await displayText();
}
BtnEle.addEventListener("click", () => {
asyncFunc();
});
</script>
</body>
</html>
코드 설명
displayText()함수는 1.5초(1500ms) 후에"Hello World"문자열로 이행되는 프로미스를 반환합니다.asyncFunc()는 async 키워드로 선언된 비동기 함수이며, 내부에서await displayText()를 호출해 프로미스가 완료될 때까지 기다립니다.- 버튼 클릭 시
asyncFunc()가 실행되고, 프로미스가 이행되면 결과 문자열이.result요소에 출력됩니다.
실행 결과
'CLICK HERE' 버튼을 클릭한 뒤 약 1.5초가 지나면 아래와 같이 "Hello World" 텍스트가 화면에 표시됩니다.
