[자바스크립트] - away, async문법

문법에 들어가기 앞서

JavaScript는 비동기적인 작업을 처리하기 위해 await와 async라는 키워드를 제공합니다. 이들은 JavaScript 개발자들이 비동기 코드를 더 읽기 쉽고 관리하기 쉽게 작성할 수 있게 해주는 강력한 기능입니다. 이 글에서는 await와 async의 개념과 예시 코드를 통해 이해해보겠습니다.

비동기 작업과 콜백 지옥

JavaScript는 싱글 스레드로 동작하며, 따라서 오랜 시간이 걸리는 작업을 동기적으로 처리하면 페이지가 블로킹되어 반응하지 않는 상황이 발생할 수 있습니다. 이런 문제를 해결하기 위해 비동기 작업이 등장했습니다. 그러나 콜백 패턴을 통한 비동기 코드 작성은 복잡하고 가독성이 떨어지는 문제를 야기했습니다. 이를 "콜백 지옥"이라고 부르며, 코드의 복잡성을 증가시켰습니다.

async 함수와 await 키워드

async 함수와 await 키워드는 비동기 코드를 더 쉽게 작성하고 관리할 수 있도록 도와줍니다. async 함수는 항상 프로미스를 반환하며, await 키워드는 프로미스가 처리될 때까지 함수의 실행을 일시 중단합니다.

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

위 예시에서 fetchData 함수는 비동기적으로 데이터를 가져오는데 사용됩니다. await 키워드는 fetch 함수와 response.json() 메서드가 프로미스를 반환하는 것을 기다려줍니다. 오류 처리는 try...catch 블록을 사용하여 간단하게 처리할 수 있습니다.

await과 병렬 처리

await는 코드의 실행을 블로킹하지만, 여러 개의 비동기 작업을 동시에 수행하고 싶을 때도 있습니다. 이럴 때 Promise.all() 메서드를 사용하여 병렬 처리할 수 있습니다.

async function fetchMultipleData() {
    try {
        const promises = [
            fetch('https://api.example.com/data1'),
            fetch('https://api.example.com/data2'),
            fetch('https://api.example.com/data3')
        ];
        const responses = await Promise.all(promises);
        const data = await Promise.all(responses.map(response => response.json()));
        return data;
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

위 코드에서는 세 개의 데이터를 병렬로 가져오는 방법을 보여줍니다. 모든 프로미스가 처리될 때까지 기다린 후에 결과를 반환합니다.

결론

await와 async는 JavaScript의 비동기 코드를 더 효과적으로 작성하고 관리하는 데 도움을 주는 강력한 기능입니다. 콜백 지옥을 피하고 가독성 높은 코드를 작성하며, 병렬 처리 등 다양한 비동기 작업을 쉽게 다룰 수 있습니다. 이러한 기능을 활용하여 더 나은 사용자 경험을 제공하는 웹 애플리케이션을 개발할 수 있습니다.