7-1. 배열과 객체 메서드 Part 1(forEach)⭐️

(1) forEach 기본

구조:

array.forEach((요소, 인덱스, 배열) => {
  // 각 요소에 대해 실행할 코드
});

 

기본 사용:

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

numbers.forEach((num) => {
  console.log(num);
});
// 1
// 2
// 3
// 4
// 5

 

인덱스 활용:

const fruits = ['사과', '바나나', '오렌지'];

fruits.forEach((fruit, index) => {
  console.log(`${index}: ${fruit}`);
});
// 0: 사과
// 1: 바나나
// 2: 오렌지

 

배열 자체 접근:

const numbers = [1, 2, 3];

numbers.forEach((num, index, array) => {
  console.log(`${num} (배열 길이: ${array.length})`);
});
// 1 (배열 길이: 3)
// 2 (배열 길이: 3)
// 3 (배열 길이: 3)

---

(2) for문과 비교

for문:

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

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

 

forEach:

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

numbers.forEach(num => console.log(num));

 

차이점:

특징	for문	forEach
break/continue	가능	불가능
return	함수 종료	현재 반복만 종료
가독성	보통	좋음
인덱스	직접 관리	자동 제공

---

(3) 실전 활용

DOM 조작:

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

buttons.forEach(button => {
    button.addEventListener('click', () => {
        console.log('클릭됨');
    });
});

 

객체 배열 처리:

const users = [
  { name: '홍길동', age: 25 },
  { name: '김철수', age: 30 },
  { name: '이영희', age: 28 }
];

users.forEach(user => {
  console.log(`${user.name}: ${user.age}세`);
});
// 홍길동: 25세
// 김철수: 30세
// 이영희: 28세

 

합계 계산:

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

numbers.forEach(num => {
  sum += num;
});

console.log(sum); // 15

---

(4) 주의 사항

return은 반복만 건너뜀:

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

numbers.forEach(num => {
  if (num === 3) {
    return; // 3만 건너뜀(continue 역할)
  }
  console.log(num);
});
// 1
// 2
// 4
// 5

 

break 불가능:

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

numbers.forEach(num => {
  if (num === 3) {
    // break; // SyntaxError
    return; // 현재 반복만 종료
  }
  console.log(num);
});

 

반환값 없음:

const numbers = [1, 2, 3];

const result = numberrs.forEach(num => num * 2);
console.log(result); // undefined

// 새 배열이 필요하면 map 사용
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]