Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 ( int 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.</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>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>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>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’, ‘r’, ‘I’, ‘a’, ‘l’, ‘s’ ]; let n = array.length; chars.splice( start_index, n );
Parameters
The splice() method takes two parameters.
strart_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.spilce() 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', 'r', 'I', 'a', 'l', 's'];
document.getElementById("initial").innerHTML = " [ " + chars + " ] ";
// making array empty using Array.spilce().
let n = chars.length;
chars.splice(0, n);
document.getElementById("final").innerHTML = " [ " + chars + " ] ";
</script>
</body>
</html>Conclusion
Of the given four approaches, the first approach is the fastest, and the third approach is the slowest to making an array empty. As we need to loop through the whole array in the third approach, it is a very slow approach.
336 Views
