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 skip over an element in .map()?
In JavaScript, we sometimes require to skip array elements while using the map() method. For example, we need to map value from one array to another array after performing some mathematical operations on the element only if the array value is finite.
In such cases, users can use the below approaches to skip over array elements while using the map() method.
Use the if-else statement
In the array.map() method, we can use the if-else statement to skip over the element. If the element fulfills the if-else statement condition, we need to return the element for mapping; Otherwise, we can return a null value.
Syntax
Users can follow the syntax below to use the if-else statement to skip over elements in the map() method.
array.map((number) => {
if (condition) {
// return some value
}
return null;
})
In the above syntax, we return some value if the condition of the if-else statement evaluates true; Otherwise, we return null.
Example 1
In the example below, we have created the array with numeric values. We aim to multiply every positive element with two and map them to the multiplier array. In the map() method, we check if the array is positive using the ‘element > 0’ condition, and if it evaluates true, we return the number after multiplying it by two.
In the output, users can see that when we return the null values, that array index appears empty.
<html>
<body>
<h2>Using the <i> if-else </i> statement to skip over element in the array.map() method</h2>
<div id = "output"></div>
</body>
<script>
let output = document.getElementById('output');
let array = [10, 20, 34, 4, 5, 6, 0, -1, 3, 2, 4, -2];
let multiplier = array.map((number) => {
if (number > 0) {
return number * 2;
} else {
return null;
}
})
output.innerHTML += "The final array after skipping the negative number in the map() method is - " + multiplier;
</script>
</html>
Use the filter() method with map() method
We can use the filter() method before the map() method. Using the filter() method, we can remove some elements and filter the required elements in another array.
After that, we can use the map method with the array created from the filter() method, and in such a way, we can indirectly skip elements in the map() method.
Syntax
Users can follow the syntax below to use the filter() method to skip over elements in the map() method.
let filteredValues = array.filter((string) => {
// filtering condition
})
let str_array = filteredValues.map((element) => {
// map value
})
In the above syntax, first, we filter values from the array and use the map() method on the filtered values.
Example 2
We have created an array of different string values in the example below. We aim to convert all strings to uppercase, which has the first character in uppercase. So, first, we use the filter() method to filter all strings with the first character in the uppercase and store them in the filteredValues array.
After that, we will use the map() method with the filteredValues array to map them to a new array after converting them into uppercase.
<html>
<body>
<h2>Using the <i> array.filter() </i> method to skip over element in the array.map() method.</h2>
<div id = "output"></div>
</body>
<script>
let output = document.getElementById('output');
let array = ["Hello", "hi", "JavaScript", "typescript", "C", "CPP", "html"];
let filteredValues = array.filter((string) => {
if (string.charCodeAt(0) > 96 && string.charCodeAt(0) < 123) {
return true;
}
return false;
})
let str_array = filteredValues.map((element) => {
return element.toUpperCase();
})
output.innerHTML += "The filtered values from the array are " + filteredValues + "<br/>";
output.innerHTML += "The final array after skipping some strings in the map() method is - " + str_array + "<br>";
</script>
</html>
Use the array.reduce() method
The map() method maps the element to the new array. We can also achieve the same using the reduce() method. We can take an empty array and map elements to that array one by one using the reduce() method.
Syntax
Users can follow the syntax below to use the reduce() method to work it like the map() method and skip some elements.
let final_Array = numbers.reduce(function (array, element) {
if (condition) {
// perform some operation
// push the final element to the array
// return array
}
// return array
}, []);
In the above syntax, we push the element to the array based on a certain condition; Otherwise, we return the array without pushing the element to the array to skip the element.
Example 3
In the example below, we aim to map all elements to themselves, which are divisible by two. So, we have passed the callback function as the first parameter of the reduce() method and the empty array as a second parameter.
In the callback function, if the condition is fulfilled, we push the element to the array and return the array. Otherwise, we return the array without making a change.
At last, the reduce() method returns the array with all mapped elements, and we store that in the final_array variable, which users can see in the output.
<html>
<body>
<h2>Using the <i> array.reduce() </i> method to skip over element in the array.map() method.</h2>
<div id = "output"></div>
</body>
<script>
let output = document.getElementById('output');
let numbers = [10, 33, 34, 55, 57, 58, 90, 87, 85, 53];
let final_Array = numbers.reduce(function (array, element) {
if (element % 2 == 0) {
array.push(element);
}
return array;
}, []);
output.innerHTML += "The final array after skipping some strings in the map() method is - " + final_Array + "<br>";
</script>
</html>
We learned three approaches to skip over an element in the map() method. The first approach stores the null element and takes more space, and the second approach increases the time complexity as we use the filter() method separately. The third approach is the best as it is space and time optimized.
11K+ Views
