JavaScript 비동기 - forEach vs for

비동기 실행 순서

비동기 작업은 실행 순서에 유의해아 합니다.

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function log(item) {
  await sleep(300);
  console.log(item);
}

위 두 함수는 아래 상황에서 공통적으로 쓰이는 함수입니다.

1. forEach 메소드

async function processArrayForEach(array) {
  array.forEach(async (item) => {
    await log(item);
  })
  console.log('Done!');
}

processArrayForEach([1, 2, 3]);
// Done!
// 1
// 2
// 3

Done!이 먼저 출력되고 300ms 간격으로 1, 2, 3이 출력됩니다.

2. for문

async function processArrayFor(array) {
  for (let i = 0; i < array.length; i++) {
    await delayedLog(array[i]);
  }
  console.log('Done!');
}

processArrayFor([1, 2, 3]);
// 1
// 2
// 3
// Done!

300ms 간격으로 1, 2, 3이 먼저 출력되고, 마지막에 Done!이 출력됩니다.