How To Empty An Array In JavaScript

In this tutorial, you’ll be going to learn how to empty an array in javascript. The easiest way to clear an array in javascript you just need to pass blank array literal [ ] to a variable like this ( array = [ ] ).

JavaScript array is a collection of different types of values like string, number, boolean and many more which will be stored at a particular index of an array.

But there is also another way you can remove values from an array in javascript. But Some processor has also its own pros and cons which we will discuss in this tutorial.

You can also check :

  1. How to check if object is empty in javascript
  2. How To Loop Through An Array In JavaScript
  3. Convert PHP array to JavaScript array
  4. How to remove duplicates from javascript array
How To Empty An Array In JavaScript
How To Empty An Array In JavaScript

Empty An Array In JavaScript


Table of Content

  • Passing Blank Array To Variable
  • Assign new Array()
  • By Setting Array.length To Zero
  • Using Array.splice()
  • Using Array.pop()
  • Using Array.shift()
  • Create Clear Array Prototype like Array.clear()

So you have seen our table of content. Now you’ll be going to learn all method one by one. And it’s up to you to decide which one is your favorite method.

1. Passing Blank Array To Variable like array = [ ]

So the easiest approach to passing a new array to a variable which clears the whole array. Bypassing a blank array to a variable also not break the array reference.

Now move to a code section so you will understand in a better way.

 // declare a array
 var array = [1, "codekila", 6, "array"];
 
 // passing blank array to variable
 array = []

 console.log(array);
 // result => []

So first, you declare an array and then just passing blank array you can empty an array and it just one line of code. But you can also check if an array is empty in javascript by checking it’s length.

you can also modify the above code in optimization manner and reusable functionality by make it as a function like below code.


 // declare a variable and assign array
 var array = [1, "codekila", 6, "array"];
 
 // passing array to function
  array = clearArray(array)

 console.log(array);
 // result => []

  // create clear array function
function clearArray(){
 // passing blank array to variable
     return []
}

2. Assign new Array()

You can also assign new Array() which will work as same as passing a blank array works but it is not a good practice to use new Array(). It’s best to use Array literal [ ].

Let see it in the example.

 // declare a array
 var array = [1, "codekila", 6, "array"];
 
 // passing blank array to variable
 array = new Array()

 console.log(array);
 // result => []

Using new Array() also not make their reference variable empty. It just makes empty whom it assign to only. You can also check if an array is empty or not.

3. By Setting Array.length To Zero

Array.length is also a way to empty an array in javascript. I now you are confused that Array.length is used to check the array length but if you assign an Array.length to zero it also creates an empty array in javascript.

Now see it in action.

 // declare a variable and assign array
 var array = [1, "codekila", 6, "array"];
 
 // setting an array length to 0
 array.length = 0

 console.log(array);
 // result => []

But in the above processor, there is an issue if an array which you need to make a blank is passed their reference to another variable also make him blank.

Let see it in the code.

 // declare a variable and assign array
 var array = [1, "codekila", 6, "array"];
 
 // reference array 
 var arrayTwo = array

 // setting an first array length to 0
 array.length = 0

 console.log(array);
 // result => []

 console.log(arrayTwo);
 // result => []

Don’t think too much it’s a reference that array pass to arrayTwo. So if the first array is empty then their reference array is also empty. So how you tackle this situation. using a blank array.

Clear Array Without Empty Reference Array

 // declare a variable and assign array
 var array1 = [1, "codekila", 6, "array"];
 var array2 = [1, "codekila", 6, "array"];

 // reference array 
 var array3 = array1
 var array4 = array2

 // setting an first array length to 0
 array1.length = 0

 // passing blank array to variable
 array2 = []

 console.log(array1);
 // result => []

 console.log(array2);
 // result => []

 console.log(array3);
 // result => []

 console.log(array4);
 // result => [1, "codekila", 6, "array"]

So, in the above example by passing a blank array to a variable not blank their other references.

4. Using Array.splice() Clear Array

Array had another cool method which is splice. But this process is slow compared to the above method. But Array.splice() can also empty an array in javascript.

Move on to our code section.

 // declare a variable and assign array
 var array = [1, "codekila", 6, "array"];
 
 // passing blank array to variable
 array.splice(0)

 console.log(array);
 // result => []

Note: Array.splice() also clear reference array.

5. Using Array.pop() Empty Array

As we have Array.pop() method which removes values from an array.

Array.pop() method remove the last element from the array.

So in this method, first you’ll iterate an array using a while loop and run Array.prototypr.pop() method to remove the last array element.

Let’s take an example

 // declare a variable and assign array
 var array = [1, "codekila", 6, "array"];
 
 // looping an array
 while(array.length){
   // remove last element from an array
   array.pop()
 }

 console.log(array);
 // result => []

In the above method, you looping an array using while loop but you can also use for loop and forEach. But it is a slow process if an array length is more.

6. Using Array.shift() Clear Array

Array.prototype.shift() can also be used like Array.pop(). With the help of Array.shift() we remove an element from an array in each iteration of while loop.

Array.shift() method remove the first element from the array.

 // declare a variable and assign array
 var array = [1, "codekila", 6, "array"];
 
 // looping an array
 while(array.length){
   // remove first element from an array
   array.shift()
 }

 console.log(array);
 // result => []

As it is also a slow process because iterating and deleting element one by one is not a good approach. If array length is more then it takes a lot of time to empty an array.

7. Create Clear Array Prototype in Javascript

As you know prototype is a cool feature. It attaches method to an Array. So you also empty an array using prototype creation.

So first you declare an array in javascript and then attach a method to it which clear an array.

Set’s create a prototype of Array in javascript.

 Array.prototype.clear = function(){
     this.length = 0
 }

 var array = [1, "codekila", 6, "array"];

// clear an array but its reference also get empty
 array.clear()

 console.log(a)
 // result => []

It’s just Array.clear() method which takes care of every thing.

Conclusion :

As you can see there are many ways you can implement how to empty an array in javascript

We have used only functions and functionality provide by JavaScript only like bypassing blank [] array and array.length to zero.

I hope you read the full article and I am very excited to get a comment on this post to get your review.

If you have any question please feel free to ask me in the comment section and also let me know if you have any suggestion is also acceptable. Also, like our Facebook Page.

You can also check :

  1. Phone Number Validation in HTML5
  2. Convert PHP array to JavaScript array
  3. Get Multiple Elements By Id Using Javascript
  4. Remove duplicates from a javascript array

Leave a Reply

Your email address will not be published. Required fields are marked *