How to Remove Empty Elements from an Array in Javascript

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 splice() functions. Let's discuss them.

Watch a course JavaScript -The Complete Guide (Beginner + Advanced)

pop()

The Array.prototype.pop() method removes the last element from an array and returns it.

pop() method
let myArray = ["1", "2", "3", "4"]; const lastElement = myArray.pop() console.log(myArray); // ["1", "2", "3"] console.log(lastElement); // "4"

shift()

The Array.prototype.shift() method removes the first element from an array and returns it.

Javascript array filter method
const myArray = ["1", "2", "3", "4"]; const firstElement = myArray.shift() console.log(myArray); // ["2", "3", "4"] console.log(firstElement); // "1"

The pop() and shift() methods change the length of the array.

You can use the push() 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 Array.prototype.splice() method mutates the array, removes the specified elements from it, and then returns these removed elements as a new array. The Array.prototype.splice() 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
const myArray = ['a', 'b', 'c', 'd']; const newArray = myArray.splice(2,1); console.log(myArray); // ['a', 'b', 'd']; console.log(newArray); // ['c'];

If you don't know the index of the element you want to remove, the splice() can be coupled with indexOf() to find and remove the items you want. The indexOf() 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:

Javascript splice method change the contents of an array
let myArray = ["a", "b", "c", "d"]; myArray.splice(myArray.indexOf('c'), 2); console.log(myArray); // ["a", "b"];

filter()

The filter() method creates a new array, unlike splice(). 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
function isEven(value) { return value%2 == 0; } arr = [13, 8, 15, 31, 44]; console.log(arr.filter(isEven));

The delete Operator

This operator will delete the element which you specify in the index (remember to start counting from zero).

Javascript splice method
let myArray = ["1", "2", "3", "4"]; delete myArray[2]; console.log(myArray); // Output: [ "1", "2", null, "4" ]

The delete operator actually does not remove the index from the array. It just makes it null.