Useful JavaScript Method’s : Map(), Filter(), Reduce()

In this article we will be looking at incredibly useful JS methods which are map(), Filter() and Reduce().
Map()
Array.prototype.map()
Lets look what MDS says about map()
The map() method creates a new array with the results of calling a provided function on every element in the calling array.
For Example:
var num = [1, 4, 9, 16];// pass a function to map
const multiplication = num.map(x => x * 2);console.log(multiplication);
// expected output: Array [2, 8, 18, 32]
So basically here map executes callback function once for each value in the array and returns the new array of the same length. map does not mutate the array on which it is called.
map is used when you want to execute a function on each element in array.
consider, we have array of object as below
const employees = [
{first: 'Jhon', last: 'Doe', age: 24},
{first: 'Chelsey', last: 'Dietrich', age: 22},
...]and you want FullName of each employee. then map can be used as follows
const FullName = employees.map(emp => {emp.first +' '+ emp.last});console.log(FullName);//output:
Jhon Doe
Chelsey Dieteich
...
Filter()
Array.prototype.filter()
Lets look what MDS says about filter()
The filter() method creates a new array with all elements that pass the test implemented by the provided function.
For Example:
var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];const result = words.filter(word => word.length > 6);console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]
filter also execute a callback function once for each value in array. Also it may or may not return the same length of array like map(it depends on the condition of function). filter does not mutate the array on which it is called.
filter is used when you want to filter the each element of array for some condition.
Reduce()
Array.prototype.reduce()
Lets look what MDS says about reduce()
The reduce() method executes a reducer function (that you provide) on each member of the array resulting in a single output value.
For Example:
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => (accumulator + currentValue);//**case 1**
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10//**case 2**
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15
In above example,
in 1st case: The reduce is used to just execute a callback while maintaining the resultant value(accumulator).
But in 2nd case, the accumulator is initialized with some value by passing second argument to reduce method.(that is 5 in above 2nd case).
Commonly developer use reduce method only when they have to do addition or array but reduce can do much more than just addition of array elements.
Like,
- Flatten an array of arrays (LINK)
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
( accumulator, currentValue ) => accumulator.concat(currentValue),
[]
);// Output:
// flattened is [0, 1, 2, 3, 4, 5]
- Counting instances of values in an object (LINK)
var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
var countedNames = names.reduce(function (allNames, name) {
if (name in allNames) {
allNames[name]++;
}
else {
allNames[name] = 1;
}
return allNames;
}, {});// Output:
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }
- Grouping objects by a property (LINK)
- Bonding arrays contained in an array of objects using the spread operator and initialValue (LINK)
- Remove duplicate items in array (LINK)
- Running Promises in Sequence (LINK)
I know map and filter are pretty commonly used array methods but this article was to focus on the use of reduce method for not just to use for addition but for other cool stuff to..
so that’s it for this story..see you in the next one!