---
title: "What are map, filter, and reduce methods in JavaScript arrays, and how are they used?"  
description: "What are map, filter, and reduce methods in JavaScript arrays, and how are they used?"  
author: "Sandra Emily"  
published: 2024-06-18  
updated: 2024-06-19  
canonical: https://www.mindstick.com/forum/160761/what-are-map-filter-and-reduce-methods-in-javascript-arrays-and-how-are-they-used  
category: "javascript"  
tags: ["web development", "javascript", "front-end development"]  
reading_time: 3 minutes  

---

# What are map, filter, and reduce methods in JavaScript arrays, and how are they used?

What are [map](https://yourviews.mindstick.com/view/81351/nepal-parliament-s-approves-new-controversial-map-india-rejects-it-but), [filter](https://www.mindstick.com/forum/1176/filter-in-a-xml-file-in-c-sharp), and reduce methods in JavaScript [arrays](https://www.mindstick.com/articles/11955/arrays-and-its-limitations), and how are they used?

## Replies

### Reply by Ravi Vishwakarma

In JavaScript, `map`, `filter`, and `reduce` are powerful [**array methods**](https://www.mindstick.com/blog/5/concept-of-array) that provide functional programming capabilities for handling arrays. They allow you to **transform**, **filter**, and accumulate **data concisely** and **expressively**.

### `map()`

The `map()` method creates a new array populated with the results of calling a provided function on every element in the calling array.

```javascript
const newArray = array.map(callback(currentValue[, index[, array]])[, thisArg]);
```

**callback:** Function that produces an element of the new array, taking three arguments:

1. **currentValue:** The current element being processed in the array.
2. **index (optional):** The index of the current element.
3. **array (optional):** The array map was called upon.

**thisArg (optional):** Value to use as this when executing the callback.

## Example

```javascript
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]
```

### `filter()`

The `filter()` method creates a new array with all elements that pass the test implemented by the provided function.

```javascript
const newArray = array.filter(callback(element[, index[, array]])[, thisArg]);
```

**callback:** Function that tests each element of the array. Return true to keep the element, false otherwise.

1. **element:** The current element being processed in the array.
2. **index (optional):** The index of the current element.
3. **array (optional):** The array filter was called upon.

**thisArg (optional):** Value to use as this when executing the callback.

## Example

```javascript
const numbers = [1, 2, 3, 4];
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // Output: [2, 4]
```

### `reduce()`

The `reduce()` method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

```javascript
const result = array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]);
```

**callback:** Function to execute on each element in the array, taking four arguments:

1. **accumulator:** The accumulated value previously returned in the last invocation of the callback, or initialValue, if supplied.
2. **currentValue:** The current element being processed in the array.
3. **index (optional):** The index of the current element.
4. **array (optional):** The array reduce was called upon.

**initialValue (optional):** Value to use as the first argument to the first call of the callback.

## Example

```javascript
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 10
```

## Note of Uses:

- `map()`: Transforms each element in the array and returns a new array with the transformed elements.
- `filter()`: Filters elements in the array based on a test and returns a new array with the elements that pass the test.
- `reduce()`: Accumulates all elements in the array into a single value, typically used for **summing values**, **counting instances**, or **combining elements** in a specific way.

## Read also,

[**What are JavaScript generators and how do they work?**](https://www.mindstick.com/forum/160758/what-are-javascript-generators-and-how-do-they-work)

[**What is the difference between null and undefined in JavaScript?**](https://www.mindstick.com/forum/160756/what-is-the-difference-between-null-and-undefined-in-javascript)

[**What are modules in JavaScript and how do you use them?**](https://www.mindstick.com/forum/160762/what-are-modules-in-javascript-and-how-do-you-use-them)

[**What is JavaScript's spread operator (...), and how is it used?**](https://www.mindstick.com/forum/160760/what-is-javascript-s-spread-operator-and-how-is-it-used)


---

Original Source: https://www.mindstick.com/forum/160761/what-are-map-filter-and-reduce-methods-in-javascript-arrays-and-how-are-they-used

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.