[JavaScript] 배열 순회 (forEach)

1️⃣ 기본 문법

array.forEach(function(element, index, array) {
  // element: 현재 요소 값
  // index: 현재 인덱스
  // array: 원본 배열
});

• forEach는 배열의 모든 요소를 앞에서부터 차례대로 실행합니다.
• return은 무시되고, 항상 undefined를 돌려줍니다.
• 원본 배열을 바꾸지 않습니다. (콜백 안에서 배열을 직접 수정하면 바꿀 수 있음)

2️⃣ 특징

• break, continue를 사용할 수 없습니다. (항상 끝까지 돎)
• 중간에 멈추고 싶다면 for문이나 for...of를 사용해야 합니다.
• 비동기 await도 제대로 먹지 않습니다. (사용한다면, for...of에서 await 사용)

3️⃣ 예시

(1) - 기본 문법 사용

let arr = [10, 20, 30];

arr.forEach(function(element, index, array) {
  console.log(index, element);
});

0 10
1 20
2 30

(2-1) - 요소만 접근하는 방법 (element)

let arr = [10, 20, 30];

arr.forEach(e => console.log(e));

10
20
30

(2-2) 인덱스까지 필요할 때 (element + index)

let arr = [10, 20, 30];

arr.forEach((e, i) => console.log(i, e));

0 10
1 20
2 30

(2-3) 원본 배열 수정 (element + index + array)

let num = [1, 2, 3];

nums.forEach((e, i, arr) => arr[i] = e * 2);
console.log(nums);

[2, 4, 6]

4️⃣ 주의할 점

forEach는 비동기를 기다려주지 않습니다.

const arr = [1,2,3];

arr.forEach(async e => {
  await new Promise(r => setTimeout(r, 1000));
  console.log(e);
});

console.log("끝");

끝
1
2
3