How to Remove Empty Elements from an Array in Javascript
Read this tutorial and learn the method of removing empty elements from an Array. Also, read about removing falsy elements that include an empty string.
JavaScript suggests several methods to remove elements from an Array. You can delete items from the end of an array using pop(), from the beginning using shift(), or from the middle using <kbd class="highlighted">splice()</kbd> functions. To specifically remove empty or falsy elements, the filter() method is typically used. Let's discuss them.
pop()
The <kbd class="highlighted">Array.prototype.pop()</kbd> method removes the last element from an array and returns it.
pop() method
shift()
The <kbd class="highlighted">Array.prototype.shift()</kbd> method removes the first element from an array and returns it.
shift() method
The <kbd class="highlighted">pop()</kbd> and <kbd class="highlighted">shift()</kbd> methods change the length of the array.
You can use the <kbd class="highlighted">push()</kbd> to add an element to the end of an array or the unshift() method to add a new element to the beginning of an array.
splice()
The <kbd class="highlighted">Array.prototype.splice()</kbd> method mutates the array, removes the specified elements from it, and then returns these removed elements as a new array. The <kbd class="highlighted">Array.prototype.splice()</kbd> needs two or more arguments as input. The first argument defines the location at which to begin removing elements. The second argument specifies the number of elements to remove. The third and subsequent arguments are optional; they define elements to replace the removed elements.
The code below removes one item at position 2:
Javascript splice method change the contents of an array
If you don't know the index of the element you want to remove, the <kbd class="highlighted">splice()</kbd> can be coupled with indexOf() to find and remove the items you want. The <kbd class="highlighted">indexOf()</kbd> searches the array and finds the value you give it. The method will return the first index at which the specified element lies in the array, or -1 if it is not present:
splice() with indexOf()
The second argument 2 specifies that two elements should be removed starting from the found index.
filter()
The filter() method creates a new array, unlike <kbd class="highlighted">splice()</kbd>. The method does not modify the array on which it is invoked. Instead, it returns a brand new array. You should pass a function to this method, and it "filters" the items based on the result of the function:
Javascript filter method creates a new array
To remove empty or falsy elements (like "", null, undefined, 0, false), you can pass Boolean directly to filter():
The delete Operator
This operator will delete the element which you specify in the index (remember to start counting from zero).
Javascript splice method
The delete operator does not remove the index from the array. Instead, it creates a sparse array hole, leaving the position undefined.