JavaScript의 Array 객체 메서드(map, filter, reduce, forEach, concat, includes)

map 함수

• JavaScript의 Array 객체에는 map, filter, concat, includes등 다양한 내장 메서드가 있음
• map 메서드는 배열의 각 요소를 변환하여 새로운 배열을 생성할 때 사용됨

문법

array.map(function(currentValue, index, arr), thisValue)

• currentValue: 현재 처리 중인 요소
• index: 현재 처리 중인 요소의 인덱스
• arr: 원본 배열
• thisValue: 선택사항, function에서 사용할 this값

사용 예시

배열의 각 요소에 2를 곱하기

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

배열의 각 요소에 객체 생성하기

const names = ['Anna', 'been', 'seong'];
const people = names.map(name => ({name: name}));
console.log(people);
// [{name: 'Anna', name: 'been', name: 'seong'}]

배열의 각 요소에 인덱스 추가하기

const fruits = ["apple", "banana", "cherry"];
cost fruitsWithIndex = fruits.map((fruit, index) => ({index, fruit}));
console.log(fruitsWithIndex); // [{index: 0, fruit: "apple"}, {index: 1, fruit: "banana"}, {index: 2, fruit: "cherry"}];

React에서 배열 렌더링하기

{props.items.map((item) => (
  <li key={item}>{item}</li>
))}

---

filter

• 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열 반환

문법

array.filter(function(currentValue, index, arr), thisValue)

사용예시

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4] --> 짝수만 필터링 됨

reduce

• 배열의 각 요소에 대해 주어진 reduce 함수를 실행하여 하나의 값으로 누적함
• 배열을 처리하여 단일 값을 반환하는데 매우 유용함

문법

array.reduce(function(accumulator, currentValue, currentIndex, arr), initalValue)

• accumulator: 이전 콜백 함수의 반환값
• currentValue: 현재 처리 중인 배열 요소
• currentIndex: 현재 처리 중인 배열 요소의 인덱스 (선택적)
• arr: 원본 배열 (선택적)
• initialValue: 초기값 (선택적)

사용예시

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 15

동작 과정

• initialValue인 0이 accumulator에 할당됩니다.
• 첫 번째 요소 1이 currentValue가 되고, accumulator(0)와 currentValue(1)가 더해져 1이 됨
• 두 번째 요소 2가 currentValue가 되고, accumulator(1)와 currentValue(2)가 더해져 3이 됨
• 세 번째 요소 3이 currentValue가 되고, accumulator(3)와 currentValue(3)가 더해져 6이 됨
• 네 번째 요소 4가 currentValue가 되고, accumulator(6)와 currentValue(4)가 더해져 10이 됨
• 다섯 번째 요소 5가 currentValue가 되고, accumulator(10)와 currentValue(5)가 더해져 15가 됨
• 마지막으로 15가 최종 결과값으로 반환됨

forEach

• 배열의 각 요소에 대해 주어진 함수를 실행함

문법

array.forEach(function(currentValue, index, arr), thisValue)

사용예시

const fruits = ['apple', 'banana', 'cherry'];
fruits.forEach(fruits => console.log(fruit));
// Output:
// apple
// banana
// cherry

concat

• 두 개 이상의 배열을 합쳐 새로운 배열을 반환함

문법

array.concat(array2, array3, ... , arrayX)

사용예시

const fruits1 = ['apple', 'banana'];
const fruits2 = ['cherry', 'orange'];
const allFruits = fruits1.concat(fruits2);
console.log(Fruits); // ['apple', 'banana', 'cherry', 'orange']

includes

• 배열에 특정 값이 포함되어 있는지 확인하고 true, false를 반환함

문법

array.includes(searchElement, fromIndex)

사용예시

const fuits = ['apple', 'banana', 'cherry'];
console.log(fruits.includes('banana'));  //true
console.log(fruits.includes('orange'));  //false