How To empty an array in JavaScript? – Detailed Guide

There are several ways available to empty an array in JavaScript.

You can empty an array using javascript arr = []; declaration.

In this tutorial, you’ll learn about the different methods to empty an array in Javascript.

If You’re in Hurry…

You can use the code snippet to empty an array in javascript.

Code

    var birds = ["dove", "parrot", "finch", "owl", "cuckoos"];


    birds = [];


    console.log(birds);

Output

    []

If You Want to Understand Details, Read on…

Arrays are used to store multiple values in a variable. They are not restricted to the length or type of elements to be stored. Whenever a new element is added, the length value increases (index +1), and on the removal of elements, the length value decreases using the index value (index -1).

Using Empty Array

Using Empty Array is the simplest way to empty an array in Javascript.
Also, this is perfect for emptying an array, if you don’t have any references in other places to the original array.
Code

    var birds = ["dove", "parrot", "finch", "owl", "cuckoos"];


    birds = [];   //No references used


    console.log(birds); 

Output

    []

Let us see another example, emptying an array referenced to another array.
Code

    var birds = ["dove", "parrot", "finch", "owl", "cuckoos"];


    var copyBirds = birds ;   //creating an reference array.


    birds =[]; // empty parent array


    console.log(birds); 


    console.log(copyBirds); 

Output

    []
    ["dove", "parrot", "finch", "owl", "cuckoos"]   //reference array stays uncleared

Empty Array is one of the fastest ways to empty an array, but to use if you don’t reference a variable from the original array.
Referencing the original array in other places can lead to problems and need to be handled carefully.

Using Array Length Property

Length property in array returns the count of elements present in an array.
If you assign the length property of an array to 0, it will automatically delete all the elements in the array.
Code

    var birds = ["dove", "parrot", "finch", "owl", "cuckoos"];

    birds.length = 0;

    console.log(birds);

Output

    []

Using Array Splice()

You can use Array.splice() as an optimal solution to empty an array in JavaScript.
array.splice() takes two parameters(start index and end index), and if you use array.splice() to empty an array, then start index needs to be set as 0 and end index needs to set as array.length so that all the elements in the array are removed.
Code

    var birds = ["dove", "parrot", "finch", "owl", "cuckoos"];

    birds.splice(0, birds.length);

    console.log(birds);

Output

    []

Using Array Pop()

Array.pop() is used to remove the last item of an array.
If you use array.pop() to empty an array, you have to iterate every element of the array and pop it out(remove the last item of that array). It is not an excellent choice to empty an array using array.pop() because of its performance; It is one of the slowest ways of all the methods mentioned above.
Code

    var birds = ["dove", "parrot", "finch", "owl", "cuckoos"];
    while (birds.length > 0) {
        birds.pop();
    }
    console.log(birds);

Output

    []

Using Array Shift()

Array.shift() is used to remove the first item of an array.
Array Shift() is similar to array.pop(), and the only difference is that it removed items in the array from the first. It is also not an excellent choice to empty an array in JavaScript.
Code

    var birds = ["dove", "parrot", "finch", "owl", "cuckoos"];
    while (birds.length > 0) {
        birds.Shift();
    }
    console.log(birds);

Output

    []

JSfiddle

This tutorial is available in this JSFiddle.

Conclusion

In this tutorial, you’ve learned how to empty an array in Javascript. You’ve also known different ways to empty an array.

If you’ve any questions, please comment below.

You May Also Like

Leave a Comment