모던 자바스크립트) Data Structure, Modern Operators and Strings 코딩챌린지 3번 문제 - MAP

map()함수는 배열의 각 요소에 대해 지정된 함수를 호출하고, 그 결과로 새로운 배열을 반환한다.

map()함수 특징
✅ 키가 모든 자료형이 가능하다.
✅ 크기를 쉽게 얻을 수 있다.
✅  쉽게 반복할 수 있다.
👉🏻 map()은 배열의 요소를 새로운 배열로 변환할 때 사용한다.(불변성 유지)
👉🏻  데이터 변환, 특정 속성 추출, 포맷 변경 등의 작업에 사용된다.
⛔ map()은 항상 새 배열을 반환한다. 기존 배열을 변경하지 않는다.
⛔  map()에 전달된 함수는 배열의 모든 요소에 대해 한 번씩 호출된다.


map 생김새

task = new Map([
['task', 'Code'],
['date', 'today']
[false, 'Start coding']
]);

배열 VS map

// Array
const arr = ['사과', '바나나'];
console.log(arr[0]); // 인덱스로 접근

// Map
const fruits = new Map();
fruits.set('빨간과일', '사과');
fruits.set('노란과일', '바나나');
console.log(fruits.get('빨간과일')); // 키로 접근

* 배열 VS 객체

// Object
const obj = {
  name: '철수',
  age: 20
};

// Map
const person = new Map();
person.set('name', '철수');
person.set('age', 20);

Map 예제

1. 숫자 배열 변환하기

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

2. 객체 배열의 특정 속성 추출

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];
const userNames = users.map(user => user.name);
console.log(userNames); // ['Alice', 'Bob', 'Charlie']

3. 문자열 배열 포맷 변경

const fruits = ['apple', 'banana', 'cherry'];
const upperFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(upperFruits); // ['APPLE', 'BANANA', 'CHERRY']

4. 인덱스 사용

const numbers = [10, 20, 30];
const indexedNumbers = numbers.map((num, index) => `Index ${index}: ${num}`);
console.log(indexedNumbers); 
// ['Index 0: 10', 'Index 1: 20', 'Index 2: 30']

 

 

 

1. 요구사항 분석

1. 중복 없는 이벤트 배열 생성 (events)

: 주어진 gameEvents에서 중복을 제거하여 이벤트 종류만 포함하는 새로운 배열을 만들어야 한다.

중복 제거는 Set객체를 사용하거나 Array.from()과 Set을 활용하여 해결 할 수 있다.

2. 특정 이벤트 제거

: gameEevents에서 64분에 발생한 놀나 카드 이벤트를 삭제해야 한다.

이는 Map.delete(key)메서드를 사용하여 특정 키를 제거함으로써 해결할 수 있다.

3. 평균 이벤트 발생 간격 계산 및 출력

: 경기 시간은 90분이며, 평균적으로 이벤트가 몇 분마다 발생했는지 계산하고 문자열 형식으로 출력해야 한다.

총 이벤트 개수를 90분으로 나누어 평균을 계산한 후, "An event happend, on everage, every 9 minites"형태의 문자열을 출력한다.

4. 이벤트 로그 출력 (전반전과 후반전 구분)

: gameEvents를 순회하면서, 키 (시간)을 기준으로 **쩐반전(0~45분)과 **후반전(45분 이후)**를 구분하여 로그를 출력한다.

출력 형식은 예시와 같이 [FIRST HALF] 17: ⚽ GOAL처럼 각 이벤트의 위치(전반전/후반전)를 표시하고, 해당 분과 이벤트 설명을 함께 출력해야 한다.

 

필요한 기능 요약

- 중복 제거된 배열 생성

- 특정 항목 삭제

- 평균 계산과 문자열 출력

- 조건에 따른 반복문과 로그 출력

 

메서드: map,set,배열 메서드(map(), forEach(), delete()등을 활용)

 

2. 입력 / 출력

- 입력 예시 (주어진 데이터)

const gameEvents = new Map([
  [17, '⚽ GOAL'],
  [36, '🔁 Substitution'],
  [47, '⚽ GOAL'],
  [61, '🔁 Substitution'],
  [64, '🔶 Yellow card'],
  [69, '🔴 Red card'],
  [70, '🔁 Substitution'],
  [72, '🔶 Yellow card'],
  [76, '⚽ GOAL'],
  [80, '⚽ GOAL'],
  [92, '🔶 Yellow card'],
]);

 

 

- 출력 예시

step1 : 중복 없는 이벤트 배열 생성

['⚽ GOAL', '🔁 Substitution', '🔶 Yellow card', '🔴 Red card']

step2 : 특정 이벤트 제거 (64분의 노란 카드)

gameEvents.delete(64);
// 이후, gameEvents에서 64: '🔶 Yellow card'가 삭제된다.

step3 : 평균 이벤트 발생 간격 출력

An event happened, on average, every 9 minutes

step4 : 각 이벤트 로그 출력 (전반전/후반전 구분)

[FIRST HALF] 17: ⚽ GOAL  
[FIRST HALF] 36: 🔁 Substitution  
[SECOND HALF] 47: ⚽ GOAL  
...
[SECOND HALF] 92: 🔶 Yellow card

 

 

3. 사용해야 할 문법

1. Map 객체에서 key-value 순회
   • for (const [minute, event] of gameEvents)
     • minute과 event를 분리하여 반복문 사용
2. Set을 활용한 중복 제거
   • const events = [...new Set(gameEvents.values())];
     또는
   • Array.from(new Set(gameEvents.values()))
3. Map에서 특정 키 삭제
   • gameEvents.delete(64);
4. 평균 계산
   • const averageTime = 90 / gameEvents.size;
   • console.log(\An event happened, on average, every ${Math.round(averageTime)} minutes`);`
5. 조건문을 사용한 전반전/후반전 구분

if (minute <= 45) { 
console.log(`[FIRST HALF] ${minute}: ${event}`); 
} 
else { 
console.log(`[SECOND HALF] ${minute}: ${event}`); 
}

 

 

https://ko.javascript.info/map-set