[JS]map, filter, reduce 등 다양한 배열메서드 개념 및 활용법

개념

배열을 조작하고 변환하기 위한 고차 함수(higher-order function)로, 배열의 각 요소에 대해 특정 작업을 수행하는 데 사용됩니다. 이러한 함수들은 JavaScript의 배열 메서드로, 순회(iteration), 필터링(filtering), 변환(transformation) 등의 작업을 쉽게 수행할 수 있도록 도와줍니다. 이들은 함수형 프로그래밍의 개념을 지원하며, 코드를 더 간결하고 읽기 쉽게 만들어줍니다.

1. map 메서드

개념: map은 배열의 각 요소에 대해 제공된 함수를 호출하고, 그 결과를 모아 새로운 배열을 생성합니다. 원래 배열을 변경하지 않고, 항상 원본 배열과 동일한 길이의 새로운 배열을 반환합니다.
사용 목적: 배열의 모든 요소에 동일한 작업을 수행해야 할 때 사용합니다. 예를 들어, 숫자 배열의 모든 요소에 2를 곱하거나, 문자열 배열의 모든 요소를 대문자로 변환할 때 유용합니다.

• 예제

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

이 예제에서 map은 number * 2라는 함수를 배열의 각 요소에 적용하고, 그 결과를 doubledNumbers라는 새로운 배열에 저장합니다.

2. filter 메서드

개념: filter는 배열의 각 요소에 대해 제공된 함수를 호출하고, 함수가 true를 반환하는 요소들만 모아 새로운 배열을 생성합니다. 원래 배열을 변경하지 않고, 조건에 맞는 요소들로만 구성된 새로운 배열을 반환합니다.
사용 목적: 배열에서 특정 조건을 만족하는 요소들만 추출하고자 할 때 사용합니다. 예를 들어, 짝수만 추출하거나, 특정 문자열을 포함하는 요소만 걸러낼 때 유용합니다.
예제

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((number) => number % 2 === 0);
console.log(evenNumbers); // [2, 4]

이 예제에서 filter는 number % 2 === 0이라는 함수를 배열의 각 요소에 적용하고, 짝수만 evenNumbers라는 새로운 배열에 저장합니다.

3. 그 외 자주 사용되는 배열 메서드
   JavaScript에는 map과 filter 외에도 배열을 다루기 위한 다양한 메서드가 있습니다.

3. reduce 메서드

개념: reduce는 배열의 각 요소를 순회하며 누적 결과를 계산합니다. 누적 결과는 배열의 모든 요소를 함수에 적용한 결과로, 단일 값이 됩니다. 이 메서드는 배열을 단일 값으로 줄이는 데 유용합니다.
사용 목적: 배열의 합계, 곱셈, 평균 등을 계산하거나 객체를 그룹화할 때 사용합니다.
예제

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

이 예제에서 reduce는 accumulator + currentValue라는 함수를 배열의 각 요소에 적용하여 전체 요소의 합을 계산합니다.

4. forEach 메서드

개념: forEach는 배열의 각 요소에 대해 주어진 함수를 호출하지만, 반환 값이 없으며 새 배열을 생성하지 않습니다.
사용 목적: 배열의 각 요소에 대해 어떤 작업을 수행해야 하지만, 결과가 필요하지 않은 경우 사용합니다. 예를 들어, 배열의 요소를 콘솔에 출력하거나 DOM 조작을 수행할 때 유용합니다.
예제

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => {
  console.log(number);
});

이 예제에서 forEach는 배열의 각 요소를 순회하며 콘솔에 출력합니다.

5. find 메서드

개념: find는 배열에서 주어진 조건을 만족하는 첫 번째 요소를 반환합니다. 조건을 만족하는 요소가 없으면 undefined를 반환합니다.
사용 목적: 배열에서 특정 조건을 만족하는 첫 번째 요소를 찾을 때 사용합니다.
예제

const numbers = [1, 2, 3, 4, 5];
const firstEvenNumber = numbers.find((number) => number % 2 === 0);
console.log(firstEvenNumber); // 2

이 예제에서 find는 조건 number % 2 === 0을 만족하는 첫 번째 요소(짝수)인 2를 반환합니다.

6. some 메서드

개념: some은 배열의 요소 중 하나라도 주어진 조건을 만족하는지 검사하여, 만족하면 true, 만족하지 않으면 false를 반환합니다.
사용 목적: 배열에 특정 조건을 만족하는 요소가 하나라도 있는지 검사할 때 사용합니다.
예제

const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some((number) => number % 2 === 0);
console.log(hasEvenNumber); // true

이 예제에서 some은 배열에 짝수가 하나라도 있는지 검사하고, true를 반환합니다.

7. every 메서드

개념: every는 배열의 모든 요소가 주어진 조건을 만족하는지 검사하여, 모두 만족하면 true, 하나라도 만족하지 않으면 false를 반환합니다.
사용 목적: 배열의 모든 요소가 특정 조건을 만족하는지 확인할 때 사용합니다.
예제

const numbers = [1, 2, 3, 4, 5];
const allEvenNumbers = numbers.every((number) => number % 2 === 0);
console.log(allEvenNumbers); // false

이 예제에서 every는 배열의 모든 요소가 짝수인지 검사하고, 하나라도 짝수가 아니기 때문에 false를 반환합니다.

결론

JavaScript의 배열 메서드(map, filter, reduce, forEach, find, some, every 등)는 배열 요소를 조작하고 변환하는 작업을 간결하고 직관적으로 수행할 수 있도록 도와줍니다.