Skip to content

JS/SevelteKit

`map()`, `filter()`, `reduce()` 대표적인 array 함수

Author
siwon
Date
2024-01-10 02:55
Views
373

`map()`, `filter()`, `reduce()`는 JavaScript에서 배열을 다룰 때 자주 사용되는 세 가지 고차 함수입니다. 각 함수는 특정한 목적에 따라 배열의 요소를 조작하거나 필터링하는 데 사용됩니다.


1. **`map()` 메서드:**

   - 목적: 기존 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과로 새로운 배열을 생성합니다.

   - 기본 문법:

     ```javascript

     const 새로운배열 = 기존배열.map((현재값, 인덱스, 배열) => {

       // 현재값에 어떤 연산을 적용한 결과를 반환

     });

     ```


2. **`filter()` 메서드:**

   - 목적: 주어진 함수의 조건을 만족하는 배열의 요소들로 이루어진 새로운 배열을 반환합니다.

   - 기본 문법:

     ```javascript

     const 필터된배열 = 기존배열.filter((현재값, 인덱스, 배열) => {

       // 조건을 만족하는지 여부를 반환 (true 또는 false)

     });

     ```


3. **`reduce()` 메서드:**

   - 목적: 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과를 누적하여 하나의 값으로 반환합니다.

   - 기본 문법:

     ```javascript

     const 결과값 = 기존배열.reduce((누적값, 현재값, 인덱스, 배열) => {

       // 현재값에 대한 연산을 누적값에 적용하고 결과를 반환

     }, 초기값);

     ```


이러한 메서드들은 배열을 다양한 방식으로 조작할 수 있게 해주어 코드를 간결하고 가독성 있게 작성할 수 있습니다. 예를 들어, 데이터 변환, 요소 필터링, 배열 축소 등의 작업을 효과적으로 수행할 수 있습니다.

`filter()` 메서드는 주어진 함수의 조건을 만족하는 배열의 요소들로 이루어진 새로운 배열을 반환합니다. 아래는 간단한 예제를 통해 `filter()`를 설명합니다.


```javascript

// 숫자로 이루어진 배열에서 짝수만 필터링하는 예제

const 숫자들 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];


// 짝수를 필터링하는 함수

const 짝수필터 = (숫자) => {

  return 숫자 % 2 === 0;

};


// filter() 메서드를 사용하여 짝수만 필터링된 배열 생성

const 짝수배열 = 숫자들.filter(짝수필터);


console.log(짝수배열);

// 출력: [2, 4, 6, 8, 10]

```


이 예제에서 `filter()` 메서드는 `짝수필터` 함수를 사용하여 주어진 배열에서 짝수만을 필터링한 새로운 배열을 생성합니다. `짝수필터` 함수는 주어진 숫자가 짝수인지를 판별하여 `true` 또는 `false`를 반환합니다. `filter()` 메서드는 이 함수의 반환값이 `true`인 요소만을 새로운 배열에 포함시킵니다.


이와 같이 `filter()` 메서드는 주어진 조건에 따라 배열을 필터링하여 새로운 배열을 만들 수 있습니다.


`reduce()` 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과를 누적하여 하나의 값으로 반환합니다. 아래는 간단한 예제를 통해 `reduce()`를 설명합니다.


```javascript

// 숫자로 이루어진 배열의 합을 계산하는 예제

const 숫자들 = [1, 2, 3, 4, 5];


// reduce() 메서드를 사용하여 배열의 합을 계산

const 합 = 숫자들.reduce((누적값, 현재값) => {

  return 누적값 + 현재값;

}, 0); // 초기값 0을 설정


console.log(합);

// 출력: 15

```


이 예제에서 `reduce()` 메서드는 주어진 배열의 각 요소를 더하여 전체 합을 계산합니다. 첫 번째 매개변수로 전달된 콜백 함수는 두 개의 매개변수를 받습니다. `누적값`은 이전까지의 누적된 결과이고, `현재값`은 현재 배열 요소의 값입니다. 콜백 함수는 누적값에 현재값을 더하여 다음 단계로 전달합니다.


`reduce()` 메서드의 두 번째 인자는 초기값으로, 누적값이 시작할 값입니다. 위 예제에서는 초기값으로 0을 설정했습니다.


이와 같이 `reduce()` 메서드는 배열을 축소하여 단일 값으로 만들 수 있습니다. 다양한 용도로 활용되며, 예를 들어 평균 계산, 최댓값 또는 최솟값 찾기 등에 활용됩니다.