async와 await 개념 정리
async와 await는 자바스크립트의 비동기 처리를 훨씬 간결하고 명확하게 만들어주는 문법입니다. 이 둘은 기존에 사용되던 콜백 함수나 .then() 메서드 체인의 복잡함을 해소하고, 코드를 마치 순차적으로 실행되는 것처럼 작성할 수 있게 돕습니다.
async 함수
async 키워드는 함수 선언 앞에 위치하여 해당 함수가 비동기 함수임을 명시합니다. async 함수는 항상 Promise 객체를 반환하는 특징을 가집니다. 만약 함수 내부에서 명시적으로 Promise를 반환하지 않더라도, 자바스크립트 엔진이 자동으로 반환 값을 Promise로 감싸줍니다.
예제 코드
async function sayHello() {
return "안녕하세요!";
}
sayHello().then(message => {
console.log(message); // 결과: "안녕하세요!"
});
위 예시에서 sayHello 함수는 문자열을 반환하지만, async 키워드 덕분에 이 값은 자동으로 Promise 객체로 변환되어 .then() 메서드를 통해 접근할 수 있습니다.
await 연산자
await는 오직 async 함수 내부에서만 사용할 수 있는 연산자입니다. 이 연산자는 Promise가 성공적으로 완료(resolve)될 때까지 해당 함수의 실행을 잠시 멈춥니다. Promise가 완료되면, await는 그 결과 값을 반환하여 다음 코드의 실행을 재개합니다.
await를 사용함으로써 얻을 수 있는 주요 이점들은 다음과 같습니다:
- 향상된 가독성: 비동기 작업의 흐름이 동기 코드처럼 위에서 아래로 순차적으로 보이기 때문에 코드를 이해하기 쉽습니다.
- 간편한 에러 처리:
try...catch구문을 활용해 동기 코드와 동일한 방식으로 비동기 에러를 처리할 수 있습니다. - 콜백 지옥 탈출: 복잡하게 중첩된 콜백 함수나 길어진
.then()체인을 피하고 깔끔한 코드를 작성할 수 있습니다.
async와 await를 활용한 실제 예제
아래 코드는 async와 await를 이용해 서버로부터 데이터를 받아오는 가상의 비동기 작업을 보여줍니다.
// 데이터를 비동기적으로 가져오는 함수를 가정합니다.
function fetchData() {
return new Promise(resolve => {
setTimeout(() => {
resolve({ name: "김코딩", job: "개발자" });
}, 2000); // 2초 뒤에 데이터 반환
});
}
// async 함수를 사용하여 데이터 처리
async function showUserInfo() {
console.log("데이터를 요청합니다...");
try {
// fetchData() 함수가 반환하는 Promise가 완료될 때까지 대기합니다.
const userData = await fetchData();
console.log("데이터를 성공적으로 가져왔습니다!");
console.log(userData);
} catch (error) {
console.error("데이터 가져오기 실패:", error);
}
}
showUserInfo();
// 출력:
// 데이터를 요청합니다...
// (2초 후)
// 데이터를 성공적으로 가져왔습니다!
// { name: "김코딩", job: "개발자" }
이 예제에서 await fetchData()는 fetchData 함수가 반환하는 Promise가 완료될 때까지 showUserInfo 함수의 실행을 중단시킵니다. Promise가 성공하면 결과 값이 userData 변수에 할당되고, 다음 줄의 console.log가 실행됩니다. 만약 Promise가 실패(reject)하면 try...catch 블록의 catch 부분이 작동하여 에러를 처리하게 됩니다.
자바스크립트의 Promise에 대해 더 자세히 알고 싶다면 다음 링크를 참고하세요.자바스크립트 Promise의 이해