Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use map and filter simultaneously on an array using JavaScript?
The filter() method is used to filter values from the array, and the map() method is used to map a new value to another array based on every value of the old array.
Sometimes, we require to use the filter() and map() methods together. For example, we wanted to filter all positive numbers from the array and map their logarithmic value to the new array
Let’s look at the introduction of the filter() and map() methods before we start with this tutorial. In this tutorial, we will learn to use the map and filter methods simultaneously on an array using JavaScript.
Syntax of array.filter() method
Users can follow the syntax below to use JavaScript's filter() method.
array.filter((element, index, self) => {
// write a condition to filter values.
// based on the filtering condition, return a boolean value to include in the filtered array.
})
In the above syntax, we have passed the callback function as a parameter of the filter() method.
Syntax of array.map() method
Users can follow the syntax below to use JavaScript's map() method.
array.map((element, index, self) => {
// perform some action on the element of the array
// return element for a new array
})
In the above syntax, we need to return the array element from the callback function of the map() method.
Parameters
element – It is a current element of the array while iterating through the array using the filter() method.
index – It is the index of the element in the array.
self – It is an array itself.
Use the array.map() and array.filter() method simultaneously
This section will teach us to use the filter() and map() methods together on a single array.
Syntax
Users can follow the syntax below to use the map() and filter() methods together.
let logarithmic_values = array.filter((element, index, self) => {
// filtering condition
})
.map((element, index, self) => {
// return value from map method
})
In the above syntax, we first used the filter() method on the array and the map() method after that.
Example 1
In the example below, the array contains positive and negative numbers. We have taken the array as a reference and invoked the filter() method on the array to filter all positive values from the array. In the callback function of the filter() method, we return true if the number is greater than zero; otherwise false.
After that, we used the map() method and returned the logarithm of every filtered element. Users can see that the logarithmic_values array contains only six values, as we have removed all negative values in the filtered array.
<html>
<body>
<h3>Using the <i> array.map() and array.filter() </i> methods together in JavaScript</h3>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let array = [10, 20, -2, -4, 32, -6, -7, -8, 10, 11, -20]
let logarithmic_values = array.filter((element, index, self) => {
if (element > 0) {
return true;
}
return false;
})
.map((element, index, self) => {
return Math.log(element);
})
output.innerHTML += "The original array values are " + array + "<br/>";
output.innerHTML += "The logarithmic_values are " + logarithmic_values + "<br/>";
</script>
</body>
</html>
Example 2
In the example below, we have created an array of objects, and every object of the array contains the employee id, experience in the years, and salary.
After that, we used the filter() method to filter all employees who have experienced greater than 3 years. Next, we used the map() method to increase the salaries of all employees by 50% and store new salaries in the new_salaries array.
In the output, users can initially observe the sum of the total salary after the increment.
<html>
<body>
<h2>Using the <i> array.map() and array.filter() </i> methods together in JavaScript </h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
// Creating the array of objects
let array = [{ emp_id: "01", experience: 3, salary: 50000 },
{ emp_id: "02", experience: 7, salary: 30000 },
{ emp_id: "03", experience: 6, salary: 20000 },
{ emp_id: "04", experience: 5, salary: 10000 },
{ emp_id: "05", experience: 3, salary: 5000 },
{ emp_id: "06", experience: 2, salary: 40000 },
{ emp_id: "07", experience: 1.5, salary: 60000 },
{ emp_id: "08", experience: 2, salary: 70000 }]
// use the forEach() loop method to find the total initial salary
let total_initial_salary = 0;
array.forEach((employee) => {
total_initial_salary += employee.salary;
})
// filter all employees with experience greater than 3 years.
let new_salaries = array.filter((element) => {
if (element.experience > 3) {
return true;
}
return false;
})
.map((element) => {
// increase the salary of all employees by 50%, who have experienced greater than 3 years
return element.salary * 0.5;
})
// find the sum of new salaries
let new_salary = total_initial_salary;
let total_increased_salary = new_salaries.forEach((salary) => {
new_salary += salary
})
output.innerHTML += "The initial total salaries of all employees is " + total_initial_salary + "<br/>";
output.innerHTML += "The total salaries of all employees after increasing salaries for some employees is " + new_salary + "<br/>";
</script>
</body>
</html>
Users learned to use the filter() and map() methods together via various examples. In the first example, we use the filter () and map() methods with the array of numbers. In the second example, we also learned to use the filter() and map() methods with the array of objects.
3K+ Views
