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 skip over an element in .map()?
In JavaScript, we sometimes need to skip array elements while using the map() method. For example, we might want to map values from one array to another after performing mathematical operations only on finite values, or transform strings that meet specific criteria.
Here are three effective approaches to skip over array elements while using the map() method.
Using if-else Statement
In the array.map() method, we can use an if-else statement to conditionally process elements. If an element meets our condition, we return the transformed value; otherwise, we return null or undefined.
Syntax
array.map((element) => {
if (condition) {
return transformedValue;
}
return null; // or undefined
})
Example
In this example, we multiply positive numbers by 2 and skip negative numbers by returning null:
<html>
<body>
<h2>Using if-else to skip elements in map()</h2>
<div id="output"></div>
</body>
<script>
let output = document.getElementById('output');
let array = [10, 20, -5, 4, -1, 6, 0, 3];
let multiplier = array.map((number) => {
if (number > 0) {
return number * 2;
}
return null;
});
output.innerHTML = "Original: " + array + "<br>";
output.innerHTML += "Mapped: " + multiplier;
</script>
</html>
Original: 10,20,-5,4,-1,6,0,3 Mapped: 20,40,null,8,null,12,null,6
Using filter() with map()
We can chain filter() before map() to first remove unwanted elements, then transform the remaining ones. This approach creates a clean array without null values.
Syntax
let result = array .filter((element) => condition) .map((element) => transformedValue);
Example
Here we filter strings that start with lowercase letters, then convert them to uppercase:
<html>
<body>
<h2>Using filter() with map() to skip elements</h2>
<div id="output"></div>
</body>
<script>
let output = document.getElementById('output');
let array = ["Hello", "javascript", "Python", "css", "HTML", "react"];
// Filter lowercase-starting strings, then convert to uppercase
let result = array
.filter((string) => string[0] >= 'a' && string[0] <= 'z')
.map((element) => element.toUpperCase());
output.innerHTML = "Original: " + array + "<br>";
output.innerHTML += "Filtered & Mapped: " + result;
</script>
</html>
Original: Hello,javascript,Python,css,HTML,react Filtered & Mapped: JAVASCRIPT,CSS,REACT
Using reduce() Method
The reduce() method can replicate map() functionality while giving us complete control over which elements to include. We start with an empty array and conditionally add transformed elements.
Syntax
let result = array.reduce((accumulator, element) => {
if (condition) {
accumulator.push(transformedValue);
}
return accumulator;
}, []);
Example
This example collects only even numbers from the original array:
<html>
<body>
<h2>Using reduce() to skip elements like map()</h2>
<div id="output"></div>
</body>
<script>
let output = document.getElementById('output');
let numbers = [10, 33, 34, 55, 58, 90, 87, 52];
let evenNumbers = numbers.reduce((array, element) => {
if (element % 2 === 0) {
array.push(element);
}
return array;
}, []);
output.innerHTML = "Original: " + numbers + "<br>";
output.innerHTML += "Even numbers only: " + evenNumbers;
</script>
</html>
Original: 10,33,34,55,58,90,87,52 Even numbers only: 10,34,58,90,52
Comparison
| Method | Result Array Size | Performance | Best Use Case |
|---|---|---|---|
| if-else in map() | Same as original | Good | Need to maintain array length |
| filter() + map() | Only valid elements | Moderate | Clean results, readable code |
| reduce() | Only valid elements | Best | Maximum control, single iteration |
Conclusion
Use filter() + map() for readability, reduce() for performance with complex logic, and if-else in map() when you need to preserve the original array length. Choose based on your specific requirements and team preferences.
17K+ Views
