이제 배열과 객체 메서드에 대해서 공부해보겠다.
Part 1에서는 forEach와 for문과 차이점 대해 이야기해보겠다.

---

1️⃣ forEach란?

forEach는 배열의 모든 요소를 순회하면서 함수를 실행하는 메서드.

• 기본 구조

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

• 매개변수의 의미
  | 매개변수 | 의미 |
  | ------- | ------ |
  | element | 현재 요소 |
  | index | 현재 인덱스 |
  | array | 원본 배열 |

---

• 기본 사용

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

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

// Arrow Function 사용
numbers.forEach(num => console.log(num));

---

• 인덱스 활용

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)

---

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은 반복만 건너뜀 continue 역할
• break 불가능 -> // SyntaxError
• 반환값 없음 -> 새 배열이 필요하면 map 사용

---

연습

chatgpt를 이용하여 관련 연습 문제를 풀어보았다.

• 연습문제

// 다음 배열에는 학생들의 점수가 들어 있습니다.
// forEach를 사용하여 전체 점수의 합계와 평균을 구하세요.

const scores = [80, 75, 90, 60, 85];

// 출력 예시
// 총점: 390
// 평균: 78

const scores = [80, 75, 90, 60, 85];

let sum = 0;

scores.forEach(function (score) {
  sum += score;
});

const avg = sum / scores.length;

console.log("총점:" + sum);
console.log("평균:" + avg);

아직 템플릿 리터럴과 Arrow Function이 익숙하지 않다.