Skip to content
Related Articles

Related Articles

How to skip over an element in .map() ?
  • Last Updated : 23 Jul, 2020

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




<!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>

Output:



Example 2: Using the filter method.

HTML




<!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>

Output:

Example 3: Using the arrow function.

HTML




<!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>

Output: 

Before Clicking the Button:

Before clicking

After Clicking the Button:

After clicking the button

My Personal Notes arrow_drop_up
Recommended Articles
Page :