Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

Home Forums What are map, filter, and reduce methods in JavaScript arrays, and how are they used? – MindStick
Ask Question

1 Answers

Ravi Vishwakarma
Ravi Vishwakarma 19 Jun 2024
Report Abuse

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
Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md