Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use map and filter simultaneously on an array using JavaScript?
The filter() method creates a new array with elements that pass a test, while map() transforms each element into something new. When used together, they provide a powerful way to both filter and transform data in a single chain.
This combination is particularly useful when you need to process only certain elements of an array and then transform them. For example, filtering positive numbers and then calculating their square roots, or selecting employees with specific criteria and updating their salaries.
Syntax of array.filter() method
array.filter((element, index, self) => {
// write a condition to filter values
// return true to include, false to exclude
})
Syntax of array.map() method
array.map((element, index, self) => {
// perform transformation on element
// return new value for the new array
})
Parameters
element - The current element being processed in the array
index - The index of the current element in the array
self - The array being processed
Using filter() and map() Together
You can chain these methods to filter elements first, then transform the filtered results:
let result = array
.filter((element) => {
// filtering condition
})
.map((element) => {
// transformation logic
});
Example 1: Filtering Positive Numbers and Calculating Logarithms
This example filters positive numbers from an array and calculates their natural logarithms:
<html>
<body>
<h3>Using filter() and map() methods together</h3>
<div id="output"></div>
<script>
let output = document.getElementById('output');
let numbers = [10, 20, -2, -4, 32, -6, -7, -8, 10, 11, -20];
let logarithmicValues = numbers
.filter(num => num > 0)
.map(num => Math.log(num));
output.innerHTML += "Original array: " + numbers + "<br/>";
output.innerHTML += "Positive numbers (logarithmic): " + logarithmicValues.map(val => val.toFixed(2)) + "<br/>";
</script>
</body>
</html>
Original array: 10,20,-2,-4,32,-6,-7,-8,10,11,-20 Positive numbers (logarithmic): 2.30,3.00,3.47,2.30,2.40
Example 2: Employee Salary Processing
This example filters employees with more than 3 years of experience and gives them a 50% salary increase:
<html>
<body>
<h3>Processing employee data with filter() and map()</h3>
<div id="output"></div>
<script>
let output = document.getElementById('output');
let employees = [
{ empId: "01", experience: 3, salary: 50000 },
{ empId: "02", experience: 7, salary: 30000 },
{ empId: "03", experience: 6, salary: 20000 },
{ empId: "04", experience: 5, salary: 10000 },
{ empId: "05", experience: 3, salary: 5000 },
{ empId: "06", experience: 2, salary: 40000 },
{ empId: "07", experience: 1.5, salary: 60000 },
{ empId: "08", experience: 2, salary: 70000 }
];
// Calculate initial total salary
let totalInitialSalary = employees.reduce((sum, emp) => sum + emp.salary, 0);
// Filter experienced employees and calculate salary increases
let salaryIncreases = employees
.filter(emp => emp.experience > 3)
.map(emp => emp.salary * 0.5);
let totalIncrease = salaryIncreases.reduce((sum, increase) => sum + increase, 0);
let newTotalSalary = totalInitialSalary + totalIncrease;
output.innerHTML += "Initial total salaries: $" + totalInitialSalary.toLocaleString() + "<br/>";
output.innerHTML += "Total salary increases: $" + totalIncrease.toLocaleString() + "<br/>";
output.innerHTML += "New total salaries: $" + newTotalSalary.toLocaleString() + "<br/>";
</script>
</body>
</html>
Initial total salaries: $285,000 Total salary increases: $30,000 New total salaries: $315,000
Performance Considerations
When chaining filter() and map(), the array is processed twice. For large datasets, consider using reduce() for better performance:
// Using filter + map (two iterations)
let result1 = numbers.filter(x => x > 0).map(x => x * 2);
// Using reduce (one iteration)
let result2 = numbers.reduce((acc, x) => {
if (x > 0) acc.push(x * 2);
return acc;
}, []);
console.log("Filter+Map result:", result1);
console.log("Reduce result:", result2);
Filter+Map result: [ 20, 40, 64, 20, 22 ] Reduce result: [ 20, 40, 64, 20, 22 ]
Conclusion
Chaining filter() and map() provides a clean, readable way to process arrays by first selecting elements that meet criteria, then transforming them. This functional programming approach makes code more maintainable and expressive.
5K+ Views
