How to skip over an element in .map() ?

0 0 2 minutes read

In this article, we will discuss the methods to skip over elements in a map. The map() function in JavaScript is used to generate a new array by calling a function for every array element.

Note:

map() method calls the function for every array element in order.
map() does not execute for array element that has no values.
map() does not change the original array.

There are various ways to skip over an element in the map:

Using the if loop inside the function to be executed to add the constraints to skip over that element.
Using the filter method.
Using the arrow function.

Example 1: Adding the constraints inside the loop.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        How to skip over an element in .map() ?
    </title>
</head>
 
<body>
    <p style="color: green; 
        font-size: 30px;">
        zambiatek
    </p>
 
    <p>[1,-1,-2,6,7,8]</p>
 
    <button onclick="myFunction()">
        Click to skip negative values
    </button>
 
    <p id="demo"></p>
 
    <script>
        function display(num) {
            if (num > 0) {
                return num;
            }
            else {
                return "null";
            }
        }
        let values = [1, -1, -2, 6, 7, 8]
        let filtered = values.map(display)
        function myFunction() {
            x = document.getElementById("demo")
            x.innerHTML = filtered;
        }
    </script>
</body>
</html>

Output:

Skip over an element in .map()

Example 2: Using the filter method.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        How to skip over an element in .map() ?
    </title>
</head>
 
<body>
    <p style="color: green; 
        font-size: 30px;">
        zambiatek
    </p>
 
    <p>[1,-1,-2,6,7,8]</p>
 
    <button onclick="myFunction()">
        Click to skip negative values
    </button>
 
    <p id="demo"></p>
 
    <script>
        function isPositive(value) {
            return value > 0;
        }
        function display(num) {
            return num;
        }
        let values = [1, -1, -2, 6, 7, 8]
        let filtered =
            values.map(display).filter(isPositive);
 
        function myFunction() {
            x = document.getElementById("demo")
            x.innerHTML = filtered;
        }
    </script>
</body>
</html>

Output:

Skip over an element in .map()

Example 3: Using the arrow function.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        How to skip over an element in .map() ?
    </title>
</head>
 
<body>
    <p style="color: green; 
        font-size: 30px;">
        zambiatek
    </p>
 
 
    <p>Given<br>images = [{src: 1}, {src: 2},
        {src: 3}, {src: 4}]<br>Skip src=3</p>
 
    <button onclick="myFunction()">Skip</button>
    <p id="demo"><br></p>
 
    <script>
        let images = [{ src: 1 }, { src: 2 },
        { src: 3 }, { src: 4 }];
        let sources = images.filter(
            img => img.src != 3).map(img => img.src);
 
        function myFunction() {
            x = document.getElementById("demo")
            x.innerHTML = sources;
        }
    </script>
</body>
</html>