[JavaScript] forEach, map, flatMap, filter, find, findIndex, reduce, reduceRight, some, every 배열 메서드

📌 JavaScript 배열 메서드

- 배열을 순회하고 처리하는 데 유용한 다양한 메서드들 소

📍 forEach

- 배열의 각 요소를 반복 실행

- 반환값은 없으며 반복문처럼 요소를 처리할 때 주로 사용

// 배열 값과 순서(index)
const arr = ['a', 'b', 'c', 'd'];
arr.forEach((val,idx) => {
  console.log(val) // 'a', 'b', 'c', 'd'
  console.log(idx) // 0, 1, 2, 3
});

// 배열 값 누적
const number = [1,2,3,4];
let sum = 0;
number.forEach(num => sum += num);
console.log(sum); // 10

 

📍map

- 배열의 각 요소를 특정 함수로 변환하여 새 배열을 반환

- 원본 배열을 변경하지 않고, 새로운 배열을 반환하므로 불변성을 유지

- 조건에 맞는 불리언 값 반환

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

// 원본 배열 유지, 새로운 배열
const numbers = [1, 2, 3, 4, 5];
const result = numbers.map(number => number * number);
console.log(numbers); // [1, 2, 3, 4, 5]; 원본
console.log(result); // [1, 4, 9, 16, 25] 새로운 반환값

// 조건 여부 반환 - 불리언 값으로 반환 
const numbers = [1, 2, 3, 4];
const result = numbers.map(num => num > 1);
console.log(result) // [false, true, true, true]

 

📍flatMap

- map을 적용한 후, 결과 배열을 평탄화(깊이 1만큼)하여 반환 

- 배열 안에 배열이 있을 때 유용

// 문자열 '공백' 기준으로 쪼개서 평탄화
const text = ['hello world', 'javascript'];
const result = text.flatMap(t => t.split(' '));
console.log(result) // ['hello', 'world', 'javascript']

// 배열 안의 배열을 평탄화
const arr = [[1, 2], [3, 4], [5, 6]];
const flatResult = arr.flatMap(innerArr => innerArr);
console.log(flatResult); // [1, 2, 3, 4, 5, 6]

// 배열 > 객체 > 배열 평탄화
const arr = [
  { id: 1, tags: ['apple', 'banana'] },
  { id: 2, tags: ['cherry', 'date'] },
  { id: 3, tags: ['elderberry', 'fig'] }
];
const flattened = arr.flatMap(item => item.tags);
console.log(flattened); // ['apple', 'banana', 'cherry', 'date', 'elderberry', 'fig']

※ 평탄화 목적 역할 - flat() 메서드 사용

※  arr.flat(2): 특정 깊이,  arr.flat(Infinity); 모든 깊이

✅ 배열 순회하면서 변환 작업 및 평탄화 작업이 필요할 경우 flatMap 사용.

 

📍filter

- 주어진 조건에 맞는 요소들만 새로운 배열로 반환합니다.

- 원본 배열은 변경되지 않으며 조건을 만족하는 값만 필터링

const arr = [1,2,3,4,5,6,7,8,9,10];
const result = arr.filter(num => num > 5); // 5 보다 큰 수
console.log(result) // 6, 7, 8, 9, 10

// 조건을 만족하는 요소가 없는 경우
const arr = [1,2,3,4,5];
const result = arr.filter(num => num > 5);
console.log(result) // []

📍 find

- 조건에 맞는 요소만 새 배열로 생성

- 조건부 선택, 원본 배열 유지

- 조건을 만족하는 객체가 여러 개 있을 경우 첫 번째 요소만 반환

- 조건을 만족하는 요소가 없으면 undefined가 반환

// 첫 번째로 10보다 큰 수 찾기
const found = [5, 12, 8, 130].find(num => num > 10);
console.log(found); // 12 - 조건을 만족하는 첫 번째 요소만

// 조건을 만족하는 요소가 없는 경우
const notFound = [5, 8].find(num => num > 10);
console.log(notFound); // undefined

// 객체의 경우 일치하는 객체 반환
const findData = [{id:'1',num:1}, {id:'2',num:2}, {id:'3',num:3}, {id:'4',num:4}] 
const findResult = findData.find(item => item.num > 2);
console.log(findResult); // {id: '3', num: 3}

📍findIndex 

- 배열에서 조건을 만족하는 첫 번째 요소의 인덱스를 반환

- 조건을 만족하는 값이 없으면 -1을 반환합니다.

// 기본 예시: 10보다 큰 수의 인덱스 찾기
const index = [5, 12, 8, 130].findIndex(num => num > 10);
console.log(index); // 1

// 조건을 만족하는 값이 없는 경우
const noIndex = [5, 8].findIndex(num => num > 10);
console.log(noIndex); // -1

📍reduce

- 배열을 단일 값으로 축소

- 누적 계산, 복잡한 변환 가능

- 초기값을 지정하지 않으면 첫 번째 요소가 초기값으로 사용

// 기본 예시: 배열의 합 구하기
const numbers = [1, 2, 3, 4]; 
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10

// 객체 배열을 합치는 예시
const users = [{ age: 20 }, { age: 30 }, { age: 40 }];
const totalAge = users.reduce((acc, user) => acc + user.age, 0);
console.log(totalAge); // 90

📍reduceRight

- reduce와 동일하지만, 배열의 요소를 오른쪽에서 왼쪽으로 순회

- 순서가 중요한 경우 유용

const arr = ['a','b','c'];
const str = arr.reduceRight((acc, char) => acc + char);
console.log(str); // cba

const numbers = [1, 2, 3, 4];
const reversed = numbers.reduceRight((acc, curr) => {
  acc.push(curr);
  return acc;
}, []);
console.log(reversed) // [4, 3, 2, 1]

// 배열을 오른쪽에서 왼쪽으로 숫자 합치기
const reversedSum = [1, 2, 3].reduceRight((acc, num) => acc + num, 0);
console.log(reversedSum); // 6

📍some

- 배열에서 하나라도 조건을 만족하는 요소가 있으면 true를 반환

- 조건을 만족하는 요소가 없으면 false를 반환

// 짝수가 포함되어 있는지 확인
const hasEven = [1, 3, 5, 7, 8].some(num => num % 2 === 0);
console.log(hasEven); // true

// 조건을 만족하는 값이 없는 경우
const allOdd = [1, 3, 5].some(num => num % 2 === 0);
console.log(allOdd); // false

const alphabet = [
  { id: '1', name: 'a' },
  { id: '2', name: 'b' },
  { id: '3', name: 'c' }
];

const alphabetSome = alphabet.some(item => item.id === '2');
console.log(alphabetSome); // true

📍 every

- 배열의 모든 요소가 조건을 만족해야 true를 반환

- 하나라도 조건을 만족하지 않으면 false를 반환

모든 요소가 짝수인지 확인
const allEven = [2, 4, 6].every(num => num % 2 === 0);
console.log(allEven); // true

// 하나라도 조건을 만족하지 않으면 false
const mixed = [2, 3, 4].every(num => num % 2 === 0);
console.log(mixed); // false

const count = [
  { id: '1', num: 1 },
  { id: '2', num: 2 },
  { id: '3', num: 3 },
  { id: '4', num: 4 }
];
const countEvery = count.every(item => item.num > 2);
console.log(countEvery); // false

 

 

 

✍️ 기록

 

감사합니다. 😁