[JS] 비동기 함수(모드)에서 루프를 동기로 동작시키기

    - 자바스크립트 async mode loop change to sync

* 비동기로 동작
[...Array(2).keys()].map(async (el, i) => {
            console.log('1', i);
            await new Promise(resolve => setTimeout(resolve, 500));
            console.log('2', i);
            await new Promise(resolve => setTimeout(resolve, 500));
            console.log('3', i);
        });
        console.log('완료-1');

 

    - 결과
1 0
1 1
완료-1
2 0
2 1
3 0
3 1
        

//-------------------------------------
* 동기로 변환
     - Promise.all 사용, map 만 가능 (forEach, some 등은 불가)

    - 주의 ! 동시에 실행됨

await Promise.all([...Array(2).keys()].map(async (el, i) => {
            console.log('1', i);
            await new Promise(resolve => setTimeout(resolve, 500));
            console.log('2', i);
            await new Promise(resolve => setTimeout(resolve, 500));
            console.log('3', i);
        }));
        console.log('완료-2'); 
        

    - 결과
1 0
1 1
2 0
2 1
3 0
3 1
완료-2
        

//-------------------------------------

* 모두 순차 실행

    - for 사용

 

for (let v of [...Array(2).keys()]) {
            console.log('1', v);
            await new Promise(resolve => setTimeout(resolve, 500));
            console.log('2', v);
            await new Promise(resolve => setTimeout(resolve, 500));
            console.log('3', v);
        }
        console.log('완료-3'); 

 

    - 결과         
1 0
2 0
3 0
1 1
2 1
3 1
완료-3