자바스크립트 배열 연산 동기화 Promise All

자바스크립트는 절차 지향적 언어들과 달리 으로 동기화되어 실행되지 않는다.
시간이 걸리는 작업은 바로 실행되지 않고 콜백 큐에 넣어두고 다음 코드로 넘어가게 된다.

문제상황

그래서 아래와 같이 배열 요소마다 시간이 걸리는 연산(작업)은 각 연산이 끝날때 까지 기다리지 않고, 콜백 큐에 넣어 두고 넘어간다.

그렇기 때문에 아래와 같이 코드를 짜면, 연산이 끝나지 않은 값이 반환된것을 볼 수 있다.

function work() {
	let arr = [1, 2, 3, 4, 5, 6];

	arr.forEach(element=>{
		setTimeout(()=>{
			element *= 10;
		}, 100);
	});

	return arr;
}

console.log("work return: ", work());

의도한 것과 다른 결과

해결 방법

그렇기에 배열의 각 요소마다 시간이 걸리는 연산(또는 작업)은 위의 코드와 같이 일반 C, JAVA 코드 같이 짜면 안된다.

이럴때는 배열의 map과 Promise.all 을 이용하여 해결할 수 있다.

function promiseAllWork() {
	let arr = [1, 2, 3, 4, 5, 6];

	const promiseAllTest = arr.map(element => {
		return new Promise((resolve, reject) => {
			setTimeout(()=>{
				element *= 10;
				resolve(element);
			}, 100);
		});
	});

	return Promise.all(promiseAllTest);
}

promiseAllWork().then(res=>{
	console.log("promiseAllWork: ", res);	
});

배열의 각 요소의 연산이 완료된 후의 결과

• map : Array의 기본 내장 함수이며, 각 배열의 요소에 대한 결과를 모아 새로운 배열을 반환해준다.
• Promise.all : 모든 Promise가 완료가 되면 Promise를 반환 해준다.

위와 같이 코드를 작성하게 되면 각 배열의 연산이 모두 끝난 시점에 원하는 작업을 진행할 수 있게 된다.

 

자바스크립트의 일반적인 동기화 방법을 아직 안봤다면 아래 글들을 확인하자.

 

자바스크립트 비동기 처리 Callback

자바스크립트 비동기 처리 Promise

자바스크립트 비동기 처리 async/await