Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do I empty an array in JavaScript?
This tutorial teaches us to make an array empty in JavaScript. While programming with JavaScript, programmers need to make an array empty in many conditions. For example, coders are doing competitive programming with JavaScript. Suppose, to solve some problem, they need to create a new or an empty array while calling the function every time. Users can visualize this problem from the below example.
function child() {
// create a new array or use a single array and make it empty every time function invokes
}
function parent() {
for (let i = 0; i < 10; i++) {
child();
}
}
In the above example, if the coder creates a new array every time, their code performance will decrease.
To overcome similar problems like the above, we have explained different approaches in this tutorial.
-
Assigning the new empty array
-
Making the array length zero
-
Using the pop() and shift() methods
-
Using the splice() method
Assigning the New Empty Array
In this approach, we will assign the new empty array '[]' to the array to make the array empty. Assigning the empty array is the fastest and most popular approach to making an array empty. However, if users have taken reference to create the array, it will update the current array only, not the parent array from which they have taken reference.
Syntax
Users can follow the below syntax for this approach.
let array = ["welcome", "to", "the", "TutorialsPoint"]; array = [];
Example
In this example, we will look at the basic JavaScript to make an array empty by assigning it to an empty array.
<!DOCTYPE html>
<html>
<head>
<title>Make an array empty.</title>
</head>
<body>
<h2>Make an array empty by assigning new empty array.</h2>
<h4>Initial array as follows:</h4>
<div id="Initial"></div>
<h4>Final array as follows:</h4>
<div id="Final"></div>
<script>
let Initial = document.getElementById("Initial");
let Final = document.getElementById("Final");
let arr = ["welcome", "to", "the", "TutorialsPoint"];
Initial.innerHTML = " [ " + arr + " ] ";
arr = []; // making array empty
Final.innerHTML = " [ " + arr + " ] ";
</script>
</body>
</html>
Initial array as follows: [ welcome,to,the,TutorialsPoint ] Final array as follows: [ ]
In the above output, users can see that after assigning the empty array to the current array, it becomes empty.
Making the Array Length Zero
In JavaScript, every array has a length property that returns the number of elements inside the array. If we make an array length to 0, the array has no elements, and we can achieve our goal of making an array empty.
Syntax
Users can follow the below syntax to use the array length property and make it 0.
let array = ["welcome", "to", "the", "TutorialsPoint"]; array.length = 0;
Example
In this example, we will write JavaScript code to empty the array by making its length zero.
<html>
<head>
<title>Make an array empty.</title>
</head>
<body>
<h3>Make an array empty in JavaScript by making array length 0.</h3>
<h4>Initial array:</h4>
<div id="Initial"></div>
<h4>Final array:</h4>
<div id="Final"></div>
<script type="text/javascript">
let Initial = document.getElementById("Initial");
let Final = document.getElementById("Final");
let array = ["TutorialsPoint", "is", "the", "computer", "science", "portal."];
Initial.innerHTML = " [ " + array + " ] ";
array.length = 0; // making array empty by making length 0.
Final.innerHTML = " [ " + array + " ] ";
</script>
</body>
</html>
Initial array: [ TutorialsPoint,is,the,computer,science,portal. ] Final array: [ ]
Using the pop() and shift() Methods
We can apply the pop() and shift() methods to the array in JavaScript. The Array.pop() method removes the single element from the last, and Array.shift() method removes the element from the first. Using this approach, we will remove elements from the array one by one until the array becomes empty.
Syntax
Users can follow the below syntax to use the Array.pop() and Array.shift() method.
let array = [10, 20, 30, 100, 200, 300]; array.pop(); // removes element from the last. array.shift(); // removes element from the first.
Example
The below example demonstrates to make an array empty by using the array.pop() method. We will run the while loop and pop the single element from the array until the array becomes empty.
<html>
<head>
<title>Make an array empty.</title>
</head>
<body>
<h3>Make an array empty in JavaScript by using the Array.pop() method.</h3>
<h4>Original Array of numbers:</h4>
<div id="Initial"></div>
<h4>Empty array:</h4>
<div id="Final"></div>
<script type="text/javascript">
let numbers = [10, 20, 30, 100, 200, 300];
document.getElementById("Initial").innerHTML = " [ " + numbers + " ] ";
// making array empty using Array.pop().
let n = numbers.length; // length of the array
while (n--) {
numbers.pop();
}
document.getElementById("Final").innerHTML = " [ " + numbers + " ] ";
</script>
</body>
</html>
Original Array of numbers: [ 10,20,30,100,200,300 ] Empty array: [ ]
Using the splice() Method
In this approach, we will use the splice() method to empty the array. The splice() method helps to remove the elements from the list or array in JavaScript. We will remove all elements from the array using the splice() method.
Syntax
Here is the syntax to use the splice() method and remove all elements from the array.
let chars = ['T', 'u', 't', 'o', 'r', 'i', 'a', 'l', 's']; let n = chars.length; chars.splice(start_index, n);
Parameters
The splice() method takes two parameters.
-
start_index ? It is the starting index, from where we want to start to remove the array elements.
-
n ? It is the number of elements that we need to remove from the start index.
Example
<html>
<head>
<title>Make an array empty.</title>
</head>
<body>
<h3>Make an array empty in JavaScript by using the Array.splice() method.</h3>
<h4>Array of chars as follow:</h4>
<div id="initial"></div>
<h4>Final array as follow:</h4>
<div id="final"></div>
<script>
let chars = ['T', 'u', 't', 'o', 'r', 'i', 'a', 'l', 's'];
document.getElementById("initial").innerHTML = " [ " + chars + " ] ";
// making array empty using Array.splice().
let n = chars.length;
chars.splice(0, n);
document.getElementById("final").innerHTML = " [ " + chars + " ] ";
</script>
</body>
</html>
Array of chars as follow: [ T,u,t,o,r,i,a,l,s ] Final array as follow: [ ]
Performance Comparison
| Method | Performance | Maintains Reference | Use Case |
|---|---|---|---|
| arr = [] | Fastest | No | Best for creating new arrays |
| arr.length = 0 | Fast | Yes | Best when array reference matters |
| arr.splice(0) | Moderate | Yes | Good for maintaining reference |
| pop/shift loop | Slowest | Yes | Avoid for large arrays |
Conclusion
Of the given four approaches, assigning an empty array (arr = []) is the fastest method, while using pop() or shift() in loops is the slowest. Choose arr.length = 0 when you need to maintain array references, and arr = [] for optimal performance when references don't matter.
638 Views
