map, filter, and reduce

map, filter, and reduce are very useful array methods. In this article, we are going to learn this one by one with suitable examples.

1. map() in JavaScript array:

The map() method takes the callback function and returns a new array with the result of the callback function for every array element. Let’s understand using the example

//Find square of numbers using map()
let arr = [1, 2, 3, 4, 5];

let squares = arr.map((num) => {
  return num * num;
});

console.log(squares);

// Output: [ 1, 4, 9, 16, 25]

map() syntax:

The syntax of a map() is

arrayName.map(callback(element), thisArg);

Here,

callback is a function that is called for every element of an array. It returns values and adds to the new array.

element the current element from an array.

thisArg is a value to use as a this to execute a callback. By default this is undefined.

Example:

// Multiply all numbers with 10
let arr = [1, 2, 3, 4, 5];

let newArr = arr.map((element) => {
    return element*10;
});

console.log(newArr);

//output: [10, 20, 30, 40, 50]

2. filter() in JavaScript array:

The filter() method takes the callback function and returns a new array with filtered values. Let’s understand with an example

// Filter all even number in new array

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenNums = arr.filter((element) => {
    return (element % 2 == 0);
});

console.log(evenNums);

// Output: [2, 4, 6, 8, 10]

filter() syntax:

arrName.filter(callback(element), thisArgs);

Here,

callback function executes over every element of an array returns true if elements passes callback else  false

element is a current element of an array

thisArgs is a value to use as a this to execute a callback. By default this is undefined.

Example:

// return array of age greater than 18
let arr = [25, 34, 22, 16, 10, 9];

let adults = arr.filter((age) => {
    return age > 18;
});

console.log(adults);

//Output: [25, 34, 22]

3. reduce() in JavaScript array:

The reduce method executes a callback function for each element of the array and returns a single value. Let’s understand reduce() with an example.

// Calculate sum of all array elements
let arr = [1, 2, 3, 4, 5];

let sum = arr.reduce((acc, element) => {
     return acc + element;
});

console.log(sum);

// Output: 15

reduce() syntax:

arrName.reduce(callback(accumulator, element), initialValue)

Here,

Callback The function is to be executed for each element of the array (except for the first element if initialValue is not specified). to record

Accumulator Accumulates the return values ​​of the callback.

element – The current element passed from the array.

initialValue (optional): A value that is passed to the callback() on the first call. If not specified, the first element acts as an accumulator on the first call, and callback() is not performed on it.

Example:

// Find maximum element in an array

let numbers = [1, 2, 3, 4, 5];

let max = numbers.reduce(function(accumulator, currentValue) {
  return Math.max(accumulator, currentValue);
});

console.log(max)

// Output: 5

Thank you so much for reading

Happy Coding

For more details visit MDN Docs

Some other articles on JavaScript

• Introduction to JavaScript
• Variable in JavaScript
• JavaScript Data Types
• Let var const in JavaScript
• Operators in JavaScript
• JavaScript Conditionals
• for loop in JavaScript 
• while and do-while in JavaScript
• break and continue in JavaScript
• functions in JavaScript
• Strings in JavaScript
• String Methods in JavaScript
• Arrays in JavaScript
• Array methods in JavaScript