How To empty an array in JavaScript? – Detailed Guide

Published on: | Last updated on: April 3, 2023 | By:

Arrays are used to store multiple items in a single object.

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

Basic Example

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


    birds = [];


    console.log(birds);

Output

    []

This tutorial teaches you how to empty an array in JavaScript using different methods and when it is appropriate to use them.

Empty an Array Using Empty Array []

Using Empty Array is the simplest and fastest way to empty an array in Javascript.

Use this method when you don’t have any references in other places to the original array. If any reference is made to the array, the reference array stays uncleared while using this method.

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

Referencing the original array in other places can lead to problems, and that must be handled carefully.

Empty an Array Using Array Length Property

The Length property in the array returns the count of elements present in an array.

  • Assign the length = 0 to delete all the elements in the array

Use this method when you simply want to delete the elements of the array without processing any of them.

Code

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

    birds.length = 0;

    console.log(birds);

Output

    []

Empty an Array Using Array Splice()

The Array.splice() method changes the array by removing or replacing the existing items.

To empty an array using the array.splice(),

  • Pass 0 as the start index and the array.length as the end index.

Use this method when you want to remove a range of items in a loop to process it and finally empty the array

Code

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

    birds.splice(0, birds.length);

    console.log(birds);

Output

    []

Empty an Array Using Array Pop()

The Array.pop() removes the last item of an array and returns it.

To empty an array using the array.pop(),

  • Iterate every element of the array and pop it out(remove the last item of that array).

It is not an optimal choice to empty an array using the array.pop() because of its performance;

Use this method when you want to empty the array by popping out each last element one by one and process it.

Code

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

Output

    []

Empty an Array Using Array Shift()

The Array.shift() is used to remove the first item of an array and return it.

To empty an array using array.shift(),

  • Iterate through the array and shift it.

This is not an optimal way to empty an array.

Use this method when you want to empty the array by popping out each first element one by one and process it.

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.

Additional Resources

Leave a Comment