How to empty an array in JavaScript

Hey readers, In this article we will discuss various methods to empty an array in JavaScript. Let’s get started without any further delay.

Introduction

An array is one of the non-primitive data types of JavaScript. Sounds a little complicated right? Let me make it simple. An array is simply a variable that stores multiple values. It can store elements of various data types of JavaScript like string, number, boolean, etc.

Have you ever wondered why there is a need to store multiple values in a single variable when there exist infinite variables? It is very difficult to manage a large number of values in such a manner. It is only feasible when there is less number of values. So there arrived a need for a variable in which we can store multiple values and also can access each of the values with ease. All the elements present in an array are ordered and each of the elements in it contains a unique index. We can access each element with its unique index.

When you need to empty an array in JavaScript, unfortunately, we don’t have a simple method like we have the clear() method in python for lists but there are multiple ways in which we can empty an array in JavaScript. Let us discuss five such ways in which we can do so.

Five ways to empty an array

Overwriting the original array with an empty one

Probably the most simple and fastest way of emptying an array is just by assigning the original array to an empty array. Let us understand it with the help of an example.

let array1 = ["code", "damn", 0.001, 2, 67]
array1 = []
console.log(array1)
Code language: JavaScript (javascript)

Output :

[]
Code language: Bash (bash)

Note :

This method doesn’t work for cases like those shown in the below example

var array1 = ["code", "damn", 0.001, 86, 67]
var array2 = array1;
array1 = []; 
console.log(array2);
Code language: JavaScript (javascript)

Output :

["code", "damn", 0.001, 34, 67]
Code language: Bash (bash)

The method of assigning the original array to an empty array didn’t work in the above scenario because when the array is referenced with another variable as we have done in the above case, the original array will not get changed. Here array2 is used to reference array1. So this method only works when referenced by its original array as shown in the first example. So be cautious and watch out when you use this method for emptying an array.

Using the property of string length

The array length property is used to know the length of the array and also to set the length of the array. By definition itself, you might have guessed how to use the length property to empty an array. All you need to do is to set the length to zero. Let us see an example of how it is done.

var array1 = ["code", "damn", 0.001, 21, 67]
array1.length = 0;
console.log(array1)
Code language: JavaScript (javascript)

Output :

[]
Code language: Bash (bash)

This method is very simple to use but we have got some complications with using it. Even though all the elements of the array get deleted, the values stay in the same old location. They get inaccessible. So there are some leftovers of memory that become a matter of concern for using this method to empty an array.

Using the splice() method

The splice() is an inbuilt method of JavaScript. This method is used to remove or add elements to an array in JavaScript. This method overwrites the original array. Let us understand the syntax of the splice() method for its usage.

Syntax :

Array.splice( start, count, element1, element2, element3, element4...)
Code language: JavaScript (javascript)

Start

This is the only compulsory parameter of the splice method. This is the index at which you intend to start the splice operation.

Example :

let array1 = ["code", "damn", 0.001, 100, 67]
array1.splice(2)
console.log(array1)
Code language: JavaScript (javascript)

Output :

["code", "damn"]
Code language: Bash (bash)

Count

This is an optional parameter. This is the count of the number of elements to be removed from the start parameter that is specified. By default, this method removes all elements of the array between the start parameter and the end parameter when the count parameter is not specified.

Example :

let array1 = ["code", "damn", 0.001, 32, 67]
array1.splice(2,2)
console.log(array1)
Code language: JavaScript (javascript)

Output :

["code", "damn", 67]
Code language: Bash (bash)

Elements

These are the elements that need to be get added to the array. We can add multiple elements to an array. For it, we have to specify them in the syntax as shown in the syntax like element1, element2, and so on.

Example :

let array1 = ["code", "damn", 0.001, 10, 67]
array1.splice(2, 2, "playground". "karma")
console.log(array1)
Code language: JavaScript (javascript)

Output :

["code", "damn", 67, "playground", "karma"]
Code language: Bash (bash)

Now let us come to our point of discussion i.e how to empty elements of an array using splice. With all the examples given above, you would have been quite clear on how to do it. Let me confirm the answer by taking array1 as an example.

let array1 = ["code", "damn", 0.001, 84, 67]
array1.splice(0)
console.log(array1)
Code language: JavaScript (javascript)

Output :

[]
Code language: Bash (bash)

If you want to learn deeper about the splice() method in JavaScript, do check out this video tutorial at codedamn and make sure you enroll in the course and complete all the labs to become an expert in JavaScript.

Using the pop() method

The pop() method is also an inbuilt function in JavaScript. This method is used to remove the last element of an array. This method permanently alters the original array. We use loops to iterate through the loop making each and every element of the array, the last element thereby removing them. Let us understand it with the help of an example.

let array1 = ["code", "damn", 0.001, 84, 67]
while(array1.length > 0){ 
array1.pop()
}
console.log(array1)
Code language: JavaScript (javascript)

Output :

[]
Code language: Bash (bash)

Do check out this article on How to get the last element in an array using JavaScript (with examples) at codedamn if you want to know multiple ways in which you can extract the last element of an array.

Using the shift() method

The shift() method is also an inbuilt function in JavaScript. This method is used to remove the first element of an array. This method permanently alters the original array. How do you think we can use this shift() method to remove all the elements of an array? We will use a loop like in the above case. In this case, we have to make each element the first element to remove it. Let us understand it with the help of an example.

let array1 = ["code", "damn", 0.001, 67]
while(array1.length > 0) { 
array1.shift();
}
console.log(array1)
Code language: JavaScript (javascript)

[]
Code language: Bash (bash)

Conclusion

In this article, we have discussed various methods with which we can empty an array in JavaScript. These methods help you in managing the data. Using loops generally increases time complexity. So avoid using loops when time is a concern instead use the pop() and shift() methods of JavaScript. This is all in this article. Don’t stop learning with this article. Make sure that you enroll in this course of JavaScript at codedamn and complete all the labs to become an expert in JavaScript.

Do check out the all-new free course on JavaScript under the hood at codedamn to learn about advanced JavaScript and how it works under the hood.