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

The map() function in JavaScript is used to generate a new array by calling 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 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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <p style="color: green; 
        font-size: 30px;">
        GeeksforGeeks
    </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";
            }
        }
        var values = [1, -1, -2, 6, 7, 8]
        var filtered = values.map(display)
        function myFunction() {
            x = document.getElementById("demo")
            x.innerHTML = filtered;
        }
    </script>
</body>
  
</html>

chevron_right


Output:



Example 2: Using the filter method.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <p style="color: green; 
        font-size: 30px;">
        GeeksforGeeks
    </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;
        }
        var values = [1, -1, -2, 6, 7, 8]
        var filtered = 
            values.map(display).filter(isPositive);
              
        function myFunction() {
            x = document.getElementById("demo")
            x.innerHTML = filtered;
        }
    </script>
</body>
  
</html>

chevron_right


Output:

Example 3: Using the arrow function.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <p style="color: green; 
        font-size: 30px;">
        GeeksforGeeks
    </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>

chevron_right


Output: 

Before Clicking the Button:

Before clicking

After Clicking the Button:

After clicking the button

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.