JavaScript - Promise 잘못 사용 시 주의점 및 코드 리뷰

 

익스랩 자바스크립트 코드 리뷰

 

안녕하세요. 오늘은 JavaScript의 비동기 처리에 관해 다루려고합니다. Promise를 잘못 하용하여 발생할 수 있는 문제와 그 해결 방은을 코드 리뷰를 통해서 알아보겠습니다.

 

문제의 발견

async function getData(id) {
    // This is a function that gets data from server
}

let ids = [1, 2, 3, 4, 5];

ids.forEach(async id => {
    const data = await getData(id);
    console.log(data);
});

 

위 코드는 주어진 id 배열에 대해 각각 서버에서 데이터를 가져와 출력하는 작업을 수행합니다. 그러나 forEach 내부에서 await를 사용하면, 비동기 작업이 동기적으로 동작하는 것처럼 보이지만 실제로는 각 비동기 작업이 병렬로 수행됩니다. 이로 인해 예상하지 못한 결과나 성능 문제가 발생할 수 있습니다.

 

 

해결 방안

이 문제는 for...of 루프와 async/await를 적절히 조합하여 해결할 수 있습니다. 아래와 같이 코드를 수정해봅시다.

async function getData(id) {
    // This is a function that gets data from server
}

let ids = [1, 2, 3, 4, 5];

for (let id of ids) {
    const data = await getData(id);
    console.log(data);
}

위와 같이 수정하면, 각 id에 대해 순차적으로 데이터를 가져오고 출력하는 것을 보장할 수 있습니다.

 

---

코드 리뷰 문의 주세요.

함수 리뷰를 기본으로 합니다.

생각 못한 다양한 예외 상황이나

이상 코드 피드백 드립니다.

 

 

오픈톡방 '익스랩 코드 리뷰 신청방'을 검색하세요!

간단한 리뷰는 무료입니다!

---