자바스크립트 await 키워드는 비동기 코드를 작성할 때 사용되는 중요한 키워드입니다. await 키워드는 async 함수 내에서만 사용할 수 있으며, Promise 객체가 완료될 때까지 해당 코드의 실행을 일시 중지시킵니다. 이후 Promise가 완료되면 해당 값을 반환하고 코드 실행을 계속합니다.
await 키워드의 기능
await 키워드의 주요 기능은 다음과 같습니다:
await키워드를 사용하면 비동기 작업의 결과를 동기적으로 처리할 수 있습니다.await키워드를 사용하면Promise객체의resolve값을 반환합니다.await키워드를 사용한 표현식은async함수 내에서만 사용할 수 있습니다.
await 키워드의 사용 방법
await 키워드를 사용하기 위해서는 다음과 같은 단계를 따릅니다:
- 비동기 작업을 수행하는 함수를
async키워드로 선언합니다. - 해당 함수 내에서
await키워드를 사용해 비동기 작업의 완료를 기다립니다. - 비동기 작업이 완료되면 결과 값을 반환받고 다음 코드를 실행합니다.
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
fetchData();
위 예시 코드에서는 fetchData 함수를 async로 선언하고, await 키워드를 사용해 fetch 메소드와 response.json() 메소드가 완료될 때까지 기다립니다. 이후 결과값을 변수에 할당하고 출력합니다. 만약 에러가 발생한다면 catch 블록에서 에러를 처리합니다.
주의할 점
await 키워드를 사용하는 함수는 async로 선언되어야 합니다. await 키워드는 async 함수 내에서만 동작하기 때문에, 일반적인 함수에서 사용할 수 없습니다.
또한, await 키워드는 Promise 객체의 완료를 기다리는 동안 코드를 중지시키므로, 네트워크 요청이나 다른 I/O 작업을 기다리는 동안 UI가 차단되는 현상을 방지하기 위해 비동기 작업을 사용해야 합니다.
결론
자바스크립트 await 키워드는 비동기 작업을 동기적으로 처리하고, Promise 객체의 완료를 기다리는 기능을 제공합니다. await 키워드를 사용하여 비동기 코드를 구성하면 코드의 가독성과 유지보수성을 향상시킬 수 있습니다. 하지만 await 키워드를 사용할 때는 async 함수 내에서만 사용하고, UI 차단 현상을 피하기 위해 비동기 작업을 활용해야 함에 주의해야 합니다.