Map, reduce, and filter are all array methods in JavaScript. Each one will iterate over an array and perform a transformation or computation. Each will return a new array based on the result of the function. In this article, you will learn why and how to use each one.
Map()
Map is a collection of elements where each element is stored as a Key, value pair. Map object can hold both objects and primitive values as either key or value. When we iterate over the map object it returns the key, value pair in the same order as inserted.
The advantages of using a map over loop are as follows:
Immutable: the map() function is immutable, i.e., your original array will remain intact. This is very useful if you need your original array elsewhere.
Cleaner code: the map function helps cut down unnecessary lines while writing code, thus helping you keep your code clean and more readable.
Quickness to code: the map function provides a quicker way to code than the conventional loops.
Syntax:
array.map(function(currentValue, index, arr), thisValue)Parameters:
function(currentValue, index, arr): It is required parameter and it runs on each element of array. It contains three parameters which are listed below:
currentValue: It is required parameter and it holds the value of current element.
index: It is optional parameter and it holds the index of current element.
arr: It is optional parameter and it holds the array.
thisValue: It is optional parameter and used to hold the value of passed to the function.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript map()</h2>
<p>map() creates a new array from calling a function for every array element.</p>
<p id="demo"></p>
<script>
const numbers = [8, 125, 64, 27];
document.getElementById("demo").innerHTML = numbers.map(Math.cbrt);
</script>
</body>
</html>Output:
Filter():
The filter() method is used to create a new array from a given array consisting of only those elements from the given array which satisfy a condition set by the argument method.
Benefits of using array.filter():
Since you operate with the element of the array, you don´t have to define any index.
You don't have to create a new array and push elements into it.
Don't have to create any loop.
Remember always return, otherwise you will get an empty array.
Syntax:
array.filter(callback(element, index, arr), thisValue)Parameters:
callback: This parameter holds the function to be called for each element of the array.
element: The parameter holds the value of the elements being processed currently.
index: This parameter is optional, it holds the index of the currentValue element in the array starting from 0.
arr: This parameter is optional, it holds the complete array on which Array.every is called.
thisValue: This parameter is optional, it holds the context to be passed as this to be used while executing the callback function. If the context is passed, it will be used like this for each invocation of the callback function, otherwise undefined is used as default.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Javascript filter()</h2>
<p>Get result from the given array that has a value of 18 or more:</p>
<p id="demo"></p>
<script>
const ages = [32, 17, 12, 40];
document.getElementById("demo").innerHTML = ages.filter(checkAdult);
function checkAdult(age) {
return age >= 18;
}
</script>
</body>
</html>Output:
Reduce()
The Reduce() method in JavaScript is used to reduce the array to a single value and executes a provided function for each value of the array (from left-to-right) and the return value of the function is stored in an accumulator.
Syntax:
Parameters
The reduce() method takes in:
callback - The function to execute on each array element (except the first element if no initialValue is provided). It takes in
accumulator - It accumulates the callback's return values.
currentValue - The current element being passed from the array.
initialValue (optional) - A value that will be passed to callback() on first call. If not provided, the first element acts as the accumulator on the first call and callback() won't execute on it.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Reduce()</h2>
<p>Subtract the numbers in the array, starting from the left:</p>
<p id="demo"></p>
<script>
const numbers = [150, 50, 25];
document.getElementById("demo").innerHTML = numbers.reduce(myFunc);
function myFunc(total, num) {
return total - num; //Total Number - First Number from Left
}
</script>
</body>
</html>Output:
The Difference:
Map: returns an array of pieces of information from the original array. In the callback function, return the data you wish to be part of the new array.
Filter: returns a subset of the original array based on custom criteria. In your callback function, return a boolean value to determine whether or not each item will be included in the new array.
Reduce: can be used to return almost anything. It is often used to return a single number, like an sum, but it can also be used to combine the logic of Map and Filter to return an array of values matching certain criteria. This can remove unnecessary iterations.
The Tech Platform