forum

Home / DeveloperSection / Forums / What are map, filter, and reduce methods in JavaScript arrays, and how are they used?

Ask Question
Sandra Emily

Sandra Emily

Follow
Content writing is the process of writing, editing, and publishing content in a digital format. That content can include blog posts, video or podcast scripts, ebooks or whitepapers, press releases, product category descriptions, landing page or social media copy and more.

Can you answer this question?

Answer

1 Answers

Ravi Vishwakarma

Ravi Vishwakarma

19-Jun-2024

In JavaScript, map, filter, and reduce are powerful array methods 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.

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 

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.

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 

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.

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 

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?

What is the difference between null and undefined in JavaScript?

What are modules in JavaScript and how do you use them?

What is JavaScript's spread operator (...), and how is it used?

MindStick Training

Liked By