Javascript 배열 순회 forEach 메서드

forEach 메서드는 배열의 각 요소에 대해 주어진 콜백 함수를 한 번씩 실행하는 메서드로 새로운 배열을 반환하지 않고, 기존 배열을 변경하지도 않는다.

array.forEach(callback(currentValue, index, array));

 

callback : 각 요소에 대해 실행할 함수로, 세 개의 인자를 받는다.
currentValue : 현재 배열의 요소.
index : 현재 배열의 인덱스.
array : 메서드가 호출된 배열.

 

const numbers = [1, 2, 3, 4, 5];

// 각 요소 출력
numbers.forEach((num, index) => {
  console.log(`Index ${index}: ${num}`);
});
// 출력:
// Index 0: 1
// Index 1: 2
// Index 2: 3
// Index 3: 4
// Index 4: 5

 

 

 

forEach 메서드 활용

 

1) 배열의 각 요소에 동일한 동작 수행

const items = ['Apple', 'Banana', 'Orange'];

// 각 아이템을 콘솔에 로깅
items.forEach((item) => console.log(item));

 

 

2) DOM 조작

const buttons = document.querySelectorAll('.btn');

// 각 버튼에 이벤트 리스너 추가
buttons.forEach((button) => {
  button.addEventListener('click', () => {
    console.log(`${button.textContent} 버튼이 클릭되었습니다.`);
  });
});

 

 

3) 배열의 합계 계산

const numbers = [10, 20, 30, 40, 50];
let sum = 0;

// 각 숫자를 합산
numbers.forEach((num) => {
  sum += num;
});

console.log(`총합: ${sum}`); // 출력: 총합: 150

 

 

forEach는 배열의 각 요소에 대해 특정 동작을 수행할 때 주로 활용된다. 그러나 반환 값이 없으며, forEach 내에서 break 등의 제어문을 사용하여 루프를 중단할 수 없으므로, 조건에 따라 배열을 가공하거나 필터링하는데는 map 또는 filter를 사용하는 것이 더 효과적일 수 있다.