2. Using array.length Property
Syntax
arrayName.length = 0;
Example
let fruits = ["Apple", "Banana", "Mango", "Orange"];
console.log("Before emptying:", fruits);
fruits.length = 0;
console.log("After emptying:", fruits);
You can also try this code with Online Javascript Compiler
Output
Before emptying: ["Apple", "Banana", "Mango", "Orange"]
After emptying: []
Explanation
Setting array.length to 0 removes all elements from the array. This method is efficient and modifies the original array, keeping the reference intact.
3. Using array.splice() Method
Syntax
arrayName.splice(0, arrayName.length);
Example
let colors = ["Red", "Blue", "Green", "Yellow"];
console.log("Before emptying:", colors);
colors.splice(0, colors.length);
console.log("After emptying:", colors);
You can also try this code with Online Javascript Compiler
Output
Before emptying: ["Red", "Blue", "Green", "Yellow"]
After emptying: []
Explanation
The splice() method removes elements from an array starting from a specified index. By setting the start index to 0 and the delete count to the array’s length, we remove all elements from the array.
4. Using array.pop() Method
Syntax
while (arrayName.length > 0) {
arrayName.pop();
}
Example
let cities = ["New York", "London", "Paris", "Tokyo"];
console.log("Before emptying:", cities);
while (cities.length > 0) {
cities.pop();
}
console.log("After emptying:", cities);
You can also try this code with Online Javascript Compiler
Output
Before emptying: ["New York", "London", "Paris", "Tokyo"]
After emptying: []
Explanation
The pop() method removes the last element of an array. By using a while loop, we keep removing elements one by one until the array is empty.
Assign the Array to an Empty Array
One of the simplest ways to create an empty array in JavaScript is by assigning an empty pair of square brackets `[]` to a variable. This method is simple and widely used because it’s easy to understand & implement.
Let’s see how it works:
let myArray = [1, 2, 3, 4, 5]; // Original array with elements
console.log("Original Array:", myArray);
myArray = []; // Assigning an empty array to the variable
console.log("Empty Array:", myArray);
You can also try this code with Online Javascript Compiler
Output
[1, 2, 3, 4, 5]
[]
In this example, we start with an array `myArray` that contains five numbers. By reassigning `myArray` to `[]`, we effectively empty it. The variable now points to a new, empty array, & the original data is no longer accessible.
Why Use This Method?
- Simplicity: It’s easy to write & understand.
- Efficiency: It quickly clears the array without needing additional methods.
- Flexibility: You can reuse the variable to store a new set of data.
However, there’s a small catch. If other variables or parts of your code are referencing the original array, they won’t be affected by this reassignment. For example:
let originalArray = [10, 20, 30];
let referenceArray = originalArray; // Both variables point to the same array
originalArray = []; // Only originalArray is reassigned to an empty array
console.log("Original Array:", originalArray);
console.log("Reference Array:", referenceArray);
You can also try this code with Online Javascript Compiler
Output:
[]
[10, 20, 30]
In this case, `referenceArray` still holds the original data because it wasn’t reassigned.
When to Use This Method
This method is ideal when you want to completely reset an array & don’t need to preserve references to the original data. It’s perfect for scenarios like clearing a list of items in a shopping cart or resetting a collection of user inputs.
Set the length Property to 0
Another way to empty an array in JavaScript is by setting its `length` property to `0`. The `length` property in JavaScript arrays defines the number of elements in the array. By setting it to `0`, you effectively remove all elements from the array, making it empty.
Let’s see how you can do it:
let myArray = [1, 2, 3, 4, 5]; // Original array with elements
console.log("Original Array:", myArray);
myArray.length = 0; // Set the length property to 0
console.log("Empty Array:", myArray);
You can also try this code with Online Javascript Compiler
Output:
[1, 2, 3, 4, 5]
[]
In this example, the `length` property is set to `0`, which removes all elements from `myArray`. The array is now empty, & its length is `0`.
Why Use This Method?
- Direct Modification: It modifies the original array instead of creating a new one.
- Reference Preservation: If other variables reference the same array, they will also reflect the changes.
- Efficiency: It’s a quick way to clear an array without reassigning it.
Let’s look at an example to understand how this works with references:
let originalArray = [10, 20, 30];
let referenceArray = originalArray; // Both variables point to the same array
originalArray.length = 0; // Set length to 0, affecting both variables
console.log("Original Array:", originalArray); // Output: []
console.log("Reference Array:", referenceArray);
You can also try this code with Online Javascript Compiler
Output:
[]
[]
Here, both `originalArray` & `referenceArray` are emptied because they point to the same array in memory.
When to Use This Method
This method is useful when you want to clear an array but still want to keep the same reference. For example, if you’re working with a shared array in a collaborative project or a global variable, this ensures all references to the array are updated.
Key Points to Remember
- Setting `length = 0` modifies the original array.
- It’s a good choice when you need to preserve references.
- It’s faster than reassigning the array in some cases because it doesn’t create a new array.
Using the shift() Method
The `shift()` method is another way to empty an array in JavaScript, but it works differently compared to the previous methods. Instead of clearing the array all at once, `shift()` removes elements one by one from the beginning of the array. To empty an array completely, you need to call `shift()` repeatedly until the array is empty.
Let’s see how it works:
let myArray = [1, 2, 3, 4, 5]; // Original array with elements
console.log("Original Array:", myArray);
while (myArray.length > 0) {
myArray.shift(); // Remove the first element repeatedly
}
console.log("Empty Array:", myArray);
You can also try this code with Online Javascript Compiler
Output:
[1, 2, 3, 4, 5]
[]
In this example, the `while` loop runs as long as the array has elements. The `shift()` method removes the first element of the array each time it’s called, & the loop continues until the array is empty.
Why Use This Method?
- Element-by-Element Removal: It allows you to process or log each element as it’s removed.
- Controlled Clearing: You can add conditions or logic to handle elements during removal.
- Useful for Queues: It’s commonly used in queue-like data structures where elements are processed in order.
Example with Logging Removed Elements
If you want to see which elements are being removed, you can modify the code like this:
let myArray = [1, 2, 3, 4, 5]; // Original array with elements
console.log("Original Array:", myArray);
while (myArray.length > 0) {
let removedElement = myArray.shift(); // Remove & store the first element
console.log("Removed Element:", removedElement); // Log the removed element
}
console.log("Empty Array:", myArray);
You can also try this code with Online Javascript Compiler
This will output:
Removed Element: 1
Removed Element: 2
Removed Element: 3
Removed Element: 4
Removed Element: 5
Empty Array: []
When to Use This Method
This method is ideal when you need to process or log elements as they’re removed. For example, if you’re building a task scheduler or a queue system, `shift()` can help you handle tasks in the order they were added.
Key Points to Remember
- `shift()` removes one element at a time from the beginning of the array.
- It’s slower than other methods because it processes elements individually.
- It’s useful when you need to handle elements during removal.
Frequently Asked Questions
Which method is the best for emptying an array?
It depends on your use case. If you don’t need the original reference, assigning an empty array ([]) is the easiest. If you want to modify the original array, setting length = 0 is the most efficient.
What happens if I use splice() on an empty array?
If the array is already empty, calling splice(0, array.length) will have no effect and will not cause an error.
Can I use filter() or map() to empty an array?
No, filter() and map() return a new array based on conditions or transformations but do not modify the original array.
Conclusion
In this article, we explored different ways to empty an array in JavaScript, including setting the array to an empty array (arr = []), changing its length (arr.length = 0), using splice() (arr.splice(0, arr.length)), and using pop() in a loop. Understanding these methods helps in managing memory efficiently and improving code performance.
518+ registered 
