JavaScript | Remove empty elements from an array

In order to remove empty elements from an array, filter() method is used. This method will return a new array with the elements that pass the condition of the callback function.

array.filter() This function creates a new array from a given array consisting of those elements from the provided array which satisfy conditions by the argument function.

array.filter( function(cValue, index, arr), tValue )

Parameters: This function accepts two parameter which are listed below:

  • function: It contains three parameters.
    • cValue: This parameter is required and it is the value of the current element.
    • index: This parameter is optional.It is the array index of current element.
    • arr: This parameter is optional. It is the array object the current element belongs.
  • tValue: This parameter is optional. This value is to be passed to function to used as its “this” value.
    If it is empty, the value “undefined” will be passed.

Example: This example is removing undefined, null and empty elements from the array.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
  
<head
    <title
        JavaScript | Remove empty elements
        from an array
    </title
</head
      
<body style = "text-align:center;"
  
    <h1 style = "color:green;"
        GeeksForGeeks 
    </h1
  
    <p id="GFG_up" style="color:green;"></p>
      
    <button onclick = "myGeeks()"
        Click here 
    </button
          
    <p id="GFG_down" style="color:green;"></p>
          
    <script
        var array = ["GFG_1", "GFG_2", null, "GFG_3",
                    "", "GFG_4", undefined, "GFG_5",,,,,,
                    "GFG_6",, 4,, 5,, 6,,,,];
          
        var p_up = document.getElementById("GFG_up");
          
        p_up.innerHTML = array;
          
        function myGeeks() {
            var p_down = document.getElementById("GFG_down");
            var filtered = array.filter(function (el) {
                return el != null;
            });
            p_down.innerHTML = filtered;
        
    </script
</body
  
</html>                    

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example:This example removes only “false” values from the array.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
  
<head
    <title
        JavaScript | Remove empty
        elements from an array
    </title
</head
      
<body style = "text-align:center;"
  
    <h1 style = "color:green;"
        GeeksForGeeks 
    </h1
  
    <p id="GFG_up" style="color:green;"></p>
      
    <button onclick = "myGeeks()"
        Click here 
    </button
          
    <p id="GFG_down" style="color:green;"></p>
          
    <script
        var array = ["GFG_1", "GFG_2", null, "GFG_3",
                    "", "GFG_4", undefined, "GFG_5",
                    ,,,,, "GFG_6",, 4,, 5,, 6,,,,];
          
        var p_up = document.getElementById("GFG_up");
          
        p_up.innerHTML = array;
          
        function myGeeks() {
            var p_down = document.getElementById("GFG_down");
            var filtered = array.filter(function (el) {
                return el;
            });
            p_down.innerHTML = filtered;
        
    </script
</body
  
</html>                    

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


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.