모던 자바스크립트) 오답 노트 2

 

---

사용된 코드와 문법

1. forEach() 사용 이유

game.scored.forEach((player, index) => {
  console.log(`Goal ${index + 1}: ${player}`);
});

이 문법을 선택한 이유

• forEach()는 배열을 순회할 때 가장 직관적인 방법 중 하나입니다.
• game.scored는 배열이므로 각 요소와 인덱스가 필요할 때 사용하기 적합합니다.
• forEach()를 사용하면 인덱스와 값을 한 번에 접근할 수 있어 코드를 간결하게 작성할 수 있습니다.

언제 사용해야 할까?

• 배열의 각 요소에 대해 순서대로 작업을 해야 할 때.
• **반복문을 단순히 순회만 하면서 부작용을 발생시키는 작업 (예: console.log)**일 때.

어떻게 판단할까?

• 배열을 순회하면서 결과를 저장하지 않고 작업만 수행하는 경우라면 forEach()가 적합합니다.
• 만약 새 배열을 생성하거나 조건에 맞는 요소만 선택해야 한다면 map()이나 filter() 같은 다른 배열 메서드를 고려하세요.

---

2. reduce() 사용 이유

const averageOdd = odds.reduce((sum, odd) => sum + odd, 0) / odds.length;

이 문법을 선택한 이유

• reduce()는 배열의 값을 누적하여 하나의 값을 반환하는 메서드입니다.
• 평균값을 구할 때는 모든 확률의 합을 구한 후 길이로 나누어야 하므로 누적 합산이 필요합니다.

언제 사용해야 할까?

• 배열을 하나의 값으로 합산, 곱셈, 평균 계산 등의 작업이 필요할 때.
• 값이 누적되면서 이전 값과 현재 값을 기준으로 새로운 값을 계산할 때.

어떻게 판단할까?

• 여러 숫자의 합을 구하거나 누적되는 연산을 할 때 reduce()를 고려합니다.
• 각 요소마다 단일 작업을 수행해야 한다면 forEach()를, 각 요소를 변환해야 한다면 map()을 사용하세요.

---

3. 객체에 동적으로 값 추가

scorers[player] = (scorers[player] || 0) + 1;

이 문법을 선택한 이유

• scorers는 객체로, 각 플레이어의 골 수를 저장하는 용도입니다.
• 이미 값이 있으면 해당 값을 사용하고, 값이 없으면 기본값 0으로 초기화한 후 1을 더하는 방식입니다.
• || 연산자는 기본값 설정에 사용됩니다.

언제 사용해야 할까?

• 객체에 동적으로 속성을 추가하거나 속성값을 업데이트할 때.
• 기존 값이 있는지 확인하고 조건부 기본값을 설정할 때.

어떻게 판단할까?

• 특정 키가 객체에 존재하는지 확인하고 기본값을 설정하는 상황에서 ||를 사용할 수 있습니다.
• 객체의 값을 조건부로 증가시킬 필요가 있을 때 유용합니다.

---

✔️정리: 다음 문제에서 문법을 어떻게 선택할지

1. 배열을 순회해야 할 때
   • 각 요소에 대해 작업만 해야 하면 forEach() 사용.
   • 새로운 배열을 생성해야 하면 map() 사용.
   • 조건에 맞는 요소만 필터링해야 하면 filter() 사용.
2. 배열의 모든 값을 하나의 값으로 누적해야 할 때
   • 예: 합산, 평균, 곱셈 등을 수행할 때는 reduce() 사용.
3. 객체에 조건부 값을 추가하거나 업데이트할 때
   • 기본값이 필요한 경우 (obj[key] || 초기값) 패턴 사용.
   • https://mynameisdabin.tistory.com/10

---

이처럼 문제의 요구사항과 데이터 구조를 먼저 이해한 후, 가장 직관적이고 효율적인 문법을 선택하는 습관을 들이세요. 다양한 문제를 풀며 배열, 객체 메서드의 특성을 익히면 자연스럽게 어떤 문법을 선택할지 판단할 수 있게 됩니다.

 

 

 

---

1. forEach()

사용법

array.forEach((element, index, array) => {
  // 실행할 코드
});

매개변수 설명

• element: 배열의 현재 요소.
• index(선택 사항): 현재 요소의 인덱스.
• array(선택 사항): forEach()를 호출한 배열 자체.

예제

const numbers = [10, 20, 30];
numbers.forEach((num, idx) => {
  console.log(`Index ${idx}: ${num}`);
});
// 출력
// Index 0: 10
// Index 1: 20
// Index 2: 30

사용 시기

• 배열을 순회하며 작업(출력, 조건부 계산 등)을 수행할 때 사용.
• 배열의 원본을 변경하지 않음.

---

2. reduce()

사용법

const result = array.reduce((accumulator, currentValue, index, array) => {
  // 누적 작업 수행
  return accumulator;
}, initialValue);

매개변수 설명

• accumulator: 이전의 계산 결과를 누적하는 값.
• currentValue: 현재 배열 요소.
• initialValue: 누적값의 초기값(선택 사항).

예제

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum);  // 출력: 10

사용 시기

• 배열을 하나의 값으로 줄여야 할 때(합, 곱, 평균 등).

---

3. 객체에 동적으로 값 추가하기

사용법

const obj = {};
obj['key'] = 'value';  // 동적 키 추가

예제: 기본값과 함께 업데이트

const scorers = {};
const player = 'Lewandowski';
scorers[player] = (scorers[player] || 0) + 1;
console.log(scorers);  // 출력: { Lewandowski: 1 }

사용 시기

• 객체의 속성을 동적으로 설정하고 기존 값을 업데이트할 때.
• 키가 없으면 기본값(0)을 사용하고 증가시키는 경우.

---

요약된 선택 기준

배열을 순회하며 작업만 수행	forEach()	array.forEach((el, idx) => console.log(el));
배열을 하나의 값으로 축소	reduce()	const sum = array.reduce((acc, val) => acc + val, 0);
객체에 조건부 값 추가	객체 접근과 기본값 설정	`obj[key] = (obj[key]