How To Empty An Array In JavaScript

There are many built-in functions within JavaScript’s support dedicating Array handling tasks, including clearing an available array instead of creating a new one. This article will provide multiple solutions to Empty an Array in JavaScript.

Four Approaches to Empty an Array in JavaScript

Assume that you have the following array with three members:

var my_arr = [ 17 , 0.5 , "test" ];

Approach 1: Replacing with a new array

This approach is the simplest and fastest way to Empty an Array in JavaScript:

my_arr = [];

This line of code will reassign your available my_arr to a new array with no elements. 

This method is best when you don’t originally have any references to my_arr. Please note that the variables or properties referencing the initial my_arr will not update post change. Here is what it looks like:

var my_arr2 = my_arr;
my_arr = [];
console.log(my_arr2);

Output

17 , 0.5 , test

Approach 2: Reducing array length to 0

Length is a readable and writable property of an object in JavaScript, in this case, an array. When you invoke the (array.length), it will return the number of elements that array contains as a positive integer less than 2 to the 32nd power (2^32). 

Using the assignment operator, we can Empty an Array as follow:

my_arr.length = 0;

Due to the modified length being smaller than what my_arr currently holds (3), the excessive elements are eliminated. This method can shorten or extend any array by decreasing or increasing the length property. 

Decreasing the length:

// shorten my_arr
var my_arr = [ 17 , 0.5 , "test" ];

my_arr.length = 2;
console.log(my_arr);
console.log(my_arr.length);

Output:

[ 17, 0.5 ]
2

Increasing the length:

// extend my_arr
var my_arr = [ 17 , 0.5 , "test" ];

my_arr.length = 4;
console.log(my_arr);
console.log(my_arr.length);

Output:

[ 17, 0.5, 'test', <1 empty item> ]
4

As shown above, length does not exclusively indicate defined elements existing in the array. Under the case where a new undefined slot is created, it will be left non-iterable and empty.

Approach 3: With splice() propriety

This built-in method removes, and replaces contents of an array or adds new elements to it, then returns an array containing removed elements.

Syntax:

array.splice(start, deleteCount, item1, ....., itemN)

Parameters:

• start: the position at which to start changing the array
• deleteCount: (Optional) the number of elements to delete
• item1 .. itemN: (Optional) elements to be added

Example:

my_arr.splice(0,my_arr.length);

or

my_arr.splice(0);

In this way, all elements within my_arr are removed. Additionally, the code will also return a copy of the original array. 

The start parameter can also work with numeric values that are not positive integers and produce meaningful results. If the parameter is negative, splice() will start counting from the last element of my_arr, assigned as index -1.

const my_arr = ["A" , "B" , "C", "D" ];
console.log(my_arr);
my_arr.splice(-2,2);
console.log(my_arr);

Output:

[ 'A', 'B', 'C', 'D' ]
[ 'A', 'B' ]

This document will provide you with more on what start parameters can work with and its results.

Approach 4: Looping pop()

Array.pop() removes the last element of an existing array and returns that element with its type remaining unchanged. When provided with a zero array, it returns undefined.

Example:

var my_arr = [ 17 , 0.5 , "test", "example" ];

while (my_arr.length > 0){
	  my_arr.pop();
    console.log(my_arr);
}

Output:

[ 17, 0.5, 'test' ]
[ 17, 0.5 ]
[ 17 ]
[]

In terms of performance, method 4 is considered the least efficient as it checks every element in the target array instead of overwriting the array or modifying it solely on necessary positions.

Summary

The conventional looping method is less favorable compared to other methods mentioned earlier. However, loops can offer more room for accessing and manipulating elements in an array, depending on the task, e.g., Empty an Array in JavaScript. To opt for any methods when designing a program, you should also regard the ability to maintain, update and revise your code for future scenarios.

Maybe you are interested:

• Create an array containing 1 to n numbers in javascript
• Remove the last 2 elements from an array in javascript
• Remove empty elements from an array in javascript

Tom Joseph

My name is Tom Joseph, and I work as a software engineer. I enjoy programming and passing on my experience. C, C++, JAVA, and Python are my strong programming languages that I can share with everyone. In addition, I have also developed projects using Javascript, html, css.

Job: Developer
Name of the university: UTC
Programming Languages: C, C++, Javascript, JAVA, python, html, css