What are filter, map and reduce functions in JavaScript?

These are in built functions which are available on arrays in JavaScript. In this article, we will talk about what these functions do and how they are used.

filter – Array.prototype.filter

This function returns a subset of an array containing those elements which satisfy a given condition in the form of a callback.

Syntax

newArray = someArray.filter(callback(element[, index, array])[, thisArg])

  • newArray is the filtered array.
  • someArray is the original array.
  • callback is the callback function.
    • element is the current element of the array which is being processed by the filter function.
    • index is the index of the current element.
    • array is the original array.
  • thisArg is the value to be used as this while executing the callback.

If the callback function returns a truthy value then the element will be included in the new array otherwise it will be ignored.

Examples

Getting even numbers from a list of numbers

let numbers = [1234567891011121314];

let evenNumbers = numbers.filter(x => x % 2 === 0);

console.log(evenNumbers); // [ 2,  4,  6, 8, 10, 12, 14 ]

Getting a list of students who scored more than 60 marks in exam

let students = [

    { name: 'student 1'marks: 45 },

    { name: 'student 2'marks: 87 },

    { name: 'student 3'marks: 65 },

    { name: 'student 4'marks: 33 },

    { name: 'student 5'marks: 77 },

    { name: 'student 6'marks: 58 }

];

let selectedStudents = students.filter(x => x.marks > 60);

console.log(selectedStudents);

// [

//     { name: 'student 2', marks: 87 },

//     { name: 'student 3', marks: 65 },

//     { name: 'student 5', marks: 77 }

// ]

map – Array.prototype.map

This method returns a new array containing elements which are returned as a result of executing a callback function on each element of the original array.

Syntax

newArray = someArray.map(callback(element, [index, array])[, thisArg])

  • newArray is the resulting array.
  • someArray is the original array.
  • callback is the callback function.
    • element is the current element of the array which is being processed by the map function.
    • index is the index of the current element.
    • array is the original array.
  • thisArg is the value to be used as this while executing the callback.

Example

Get squares of a list of numbers

let numbers = [123456789];

let squares = numbers.map(x => x * x);

console.log(squares);

// [

//     1, 4, 9, 16, 25,

//     36, 49, 64, 81

// ]

reduce – Array.prototype.reduce

This function returns a single output by executing a reducer function on each element of the original array.

Reducer is nothing but a callback function whose return value is stored and passed on to the next iteration of the array which at the end becomes the output. The value which is stored and passed across iterations is called accumulator. Reducer takes four arguments

  1. Accumulator
  2. Current element
  3. Current index
  4. Original array

Syntax

output = someArray.reduce(callback(accumulator, element[, index, array])[, startingValue])

  • output is the result.
  • someArray is the original array.
  • callback is the reducer function.
    • accumulator is the value which gets remembered.
    • element is the current element.
    • index is the index of the current element.
    • array is the original array.
  • startingValue – A value to be used as accumulator in the first call of the callback. If it is not provided then the first element of the array will be used as accumulator and callback execution will start from the second element.

Example

Sum of elements

let numbers = [123456789];

let sum = numbers.reduce((accelement=> acc + element);

console.log(sum); // 45



Comments

Popular posts from this blog

What is object destructuring and spread operator in JavaScript?

Calling APIs in sequence using async-await