Map, Filter and Reduce

The map(), filter() and reduce() methods operate on arrays (including arrays of objects).

map()

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

map() applied to an array

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

let numbersSquared = numbers.map(number => number * number);

alert(numbersSquared);

 

map() applied to an array of objects

let employees = [{forename:"Ann", surname:"Anglesey", role:"IT"}, 
                 {forename:"Brian", surname:"Brown", role:"HR"}, 
                 {forename:"Cathy", surname:"Connolly",role:"HR"}, 
                 {forename:"Dennis", surname:"Deagan", role:"IT"}, 
                 {forename:"Emma", surname:"Epstein", role:"HR"} ]; 

/* Combine forename and surname into a string and save to an array */
let fullNameArray = employees.map((employee) => `${employee.forename} ${employee.surname}`);
alert(fullNameArray);

/* New object with only forename and surname */
let fullNameJSON = employees.map(employee => ({forename:employee.forename, surname:employee.surname}));
console.log(fullNameJSON); 

filter()

The filter() method creates a new array that contains all elements from the original array that pass the logical test implemented by the provided function.

filter() applied to an array

let numbers = [1, 3, 6, 8, 11];

let odd = numbers.filter(number => number % 2 === 1);

alert(odd); 

 

filter() applied to an array of objects

let employees = [{name:"Ann", role:"IT"}, {name:"Brian", role:"HR"}, {name:"Cathy", role:"HR"}, {name:"Dennis", role:"IT"}, {name:"Emma", role:"HR"} ]; 

let hrEmployees = employees.filter(employee => employee.role === "HR");

alert(hrEmployees[0].name);
console.log(hrEmployees); 

reduce()

 

The reduce() method reduces an array to a single value. This value is the result of applying a given function against an accumulator and each element in the array (from left to right). The accumulator must be set with an initial value.

In the examples below, the variable total is the accumulator. The accumulator has been initialised to 0.

reduce() applied to an array

let numbers = [1, 3, 6, 8, 11];

let total = numbers.reduce((total, number) => total + number, 0);

alert(total);  

 

reduce() applied to an array of objects

let employees = [{name:"Ann", role:"IT", salary:100000}, 
                 {name:"Brian", role:"HR", salary:50000}, 
                 {name:"Cathy", role:"HR", salary:60000}, 
                 {name:"Dennis", role:"IT", salary:120000}, 
                 {name:"Emma", role:"HR", salary:30000}]; 

let totalSalary = employees.reduce((total, employee) => total += employee.salary, 0);

alert(totalSalary);
 
<div align="center"><a href="file:///C|/Users/Derek/Documents/Notes/versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>