map

배열의 모든 요소를 순회하며 콜백 함수를 실행한 결과를 모아 새로운 배열을 반환하는 메서드이다.
기존 배열은 수정되지 않고 유지된다.

• 배열 내 각 요소를 변환하거나 바꾸고 시은 경우
• 기존 배열은 유지하고, 새로운 배열은 만들고 싶은 경우
  에 사용된다.

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

// map()을 사용하여 각 numbers 요소에 콜백함수를 적용한 결과값을 새로운 배열	(squares)에 추가합니다.
const squares = numbers.map((number) => number ** 2);

console.log("원본 배열:", numbers); // 출력: 원본 배열: [1, 2, 3, 4, 5]
console.log("새로운 배열:", squares); // 출력: 새로운 배열: [1, 4, 9, 16, 25]

문자열을 추가한 새로운 배열을 생성하고 싶은 경우 ( + '문자열') 를 사용해 추가해준다.

객체의 특정 속성이나 값만 추출하여 새로운 배열을 생성하고 싶은 경우

const users = [

{id: 1, name: "김코딩"},
{id: 2, name: "김오즈"},
{id: 3, name: "박자바"}
];

const names = users.map((user)=> {
    return user.name;
});

console.log(names); 
// 출력결과: ['김코딩', '김오즈', '박자바']

프로퍼티 호출하는 방법으로 사용.

map()함수 사용시 주의사항

1. 항상 새로운 배열을 반환한다.
   기존 배열은 변경 되지 않으니 반환된 배열을 변수에 저장하지 않으면 결과를 사용할 수 없다.

2.반복 함수 내부에 return이 없으면 ubdefined가 들어간다.

filter

array배열의 요소를 순회하면서 콜백 함수를 사용하며 원하는 조건에 맞는 요소들을 필터링 하는 함수이다. return 결과는 true 또는 false값 이여야 한다.
true인 경우 해당 요소는 새 배열에 포함이 되고 false인 경우 제외된다.

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

const evenNumbers = numbers.filter(number => {
// 다중 조건을 결합하여 필터링
return number % 2 === 0
});

console.log(evenNumbers); 
// 출력: [2, 4, 6]

객체를 요소로 한 배열에서 나이가 18이상인 사용자만 필터링하고 싶은 경우

const users = [
{ name: '김오즈', age: 17 },
{ name: '박코딩', age: 20 },
{ name: '권자바', age: 15 },
{ name: '이노드', age: 22 },
];

const adults = users.filter((user) => {
	// 나이가 18세 이상인 user만 추출
	return user.age >= 18
});

console.log(adults);
// 출력: [{ name: '박코딩', age: 20 }, { name: '이노드', age: 22 }]

문자열을 요소를 한 배열에서 단어가 'a'가 포함된 문자열만 필터링하고 싶은 경우

const words = ['apple', 'banana', 'cherry', 'date'];

// filter를 사용해 'a'가 포함된 단어만 추출
const wordsWithA = words.filter((word) => {
	return word.includes('a')
});

console.log(wordsWithA);
// 출력: ['apple', 'banana', 'date']

filter 사용시 주의사항

1. 조건을 만족하는 요소만 모아 새로운 배열을 반환한다.
   반환값을 변수에 저장하지 않으면 아무 일도 일어나지 않은 것처럼 보일 수 있다.
2. 콜백 함수는 반드시 true 또는 false를 반환해야 한다.

reduce

배열의 각 요소에 대해 주어진 reducer함수를 실행하고, 하나의 값을 반환하는 함수이다.

기본배열

// callback : 배열의 각 요소에 대해 실행할 리듀서 함수

arr.reduce(callback[, initialValue])
// 네 가지 인수를 풀어 사용하는 경우
arr.reduce((accumulator, currentValue, currentIndex, array) => {
return accumulator + currentValue;
}, initialValue);

initiaValue(첫번째 값) : 콜백의 최초 호출에서 첫번째 인수 (accumulator(누산기))에 제공하는 값이며, 초기값이 없으면 배열의 첫번째 요소를 사용한다.

accumulator(누산기) : reduce에서 정해준 초기값이 들어가고, 계산이 진행되면서 업 데이트 되는 값.

crrentValue(현재 값) : 배열에서 현재 처리할 요소이다.

crrentIndex(현재 배열) : 배열에서 현재 처리할 요소의 인덱스이다.

- 초기값(initialValue)을 제공한 경우 0 , 아니면 1부터 시작한다.

array : 원본 배열

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

// reduce 사용
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0); // 초기값 0 (initialValue)

console.log("합계:", sum); // 출력: 합계: 15

• acc.push를 사용하면 map, filter를 reduce로 구현이 가능하다.

reduce 사용 주의 사항

1. 항상 초기값을 지정하는 습관을 들여라.

2. accumulator 값을 반드시 반환해야 한다.(return문 필수)

3. 누적 외 다양한 구조로 활용할 수 있는 법을 확장해라.