Async / Await
async/await는 JavaScript에서 비동기 작업으로 처리하는 최신 문법을 말합니다.
- async : 함수를 비동기로 선언한다.
- await : Promise의 이행(성공) 혹은 거절(실패)을 기다린다.
async/await는 Promise 기반으로 동작하며, CallBack이나 then Chain 대신 동기 코드처럼 작성할 수 있도록 도와준다.
(즉, CallBack 지옥에서 벗어나게 해준다.)
Async 함수
Async 로 선언된 함수는 항상 promise를 반환한다.
- 만약 반환 값이 Promise가 아니라면, 반환 값을 자동으로 Promise로 변환한다.
sync function example() {
return 'Hello, async!'; // Promise.resolve('Hello, async!')
}
example().then((result) => console.log(result)); // 출력: Hello, async!Await 키워드
Await는 Promise가 해결될때까지 기다린다.
- await는 반드시 async 함수 내부에서만 사용할 수 있다.
async function example() {
const result = await new Promise((resolve) => setTimeout(() => resolve('Done!'), 1000));
console.log(result); // 1초 후 출력: Done!
}
example();Async / Await 와 기존 비동기 처리 방식의 비교
CallBack 방식
장점
- 특정 로직을 캡슐화하여 코드의 재사용성을 높일 수 있다.
- 함수의 유연성이 크다.
문제점
- 콜백이 중첩되면서 가독성이 떨어지는 CallBack Hell이 발생한다.
setTimeout(() => {
console.log('콜백 실행');
setTimeout(() => {
console.log('중첩된 콜백 실행');
}, 1000);
}, 1000);Promise 방식
장점
- then Chain을 사용해 CallBack Hell을 완화한다.
문제점
- then Chain이 길어지면 여전히 가독성이 떨어진다.
new Promise((resolve) => {
setTimeout(() => resolve('첫 번째 Promise 완료'), 1000);
})
.then((result) => {
console.log(result);
return new Promise((resolve) => setTimeout(() => resolve('두 번째 Promise 완료'), 1000));
})
.then((result) => console.log(result));Async / Await 방식
장점
- 코드가 동기식으로 읽혀서 가독성이 좋아진다.
단점
- 외부 라이브러리를 사용한다.
- 위의 방식들보다 좀 더 무겁다.
async function process() {
const step1 = await new Promise((resolve) =>
setTimeout(() => resolve('첫 번째 단계 완료'), 1000)
);
console.log(step1);
const step2 = await new Promise((resolve) =>
setTimeout(() => resolve('두 번째 단계 완료'), 1000)
);
console.log(step2);
}
process();혹시라도 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다!!
'JavaScript' 카테고리의 다른 글
| [JavaScript] AJAX, Fetch API, Promise, Axios (0) | 2025.06.29 |
|---|---|
| [JavaScript] BOM (1) | 2025.06.29 |
| [JavaScript] DOM (1) | 2025.06.28 |
| [JavaScript] 객체와 배열 (2) | 2025.06.25 |
| [JavaScript] 함수 (0) | 2025.06.25 |
