DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Sanchithasr
Sanchithasr

Posted on

3 ways to empty an Array in JavaScript

The Arrays are for JavaScript developers like how screws and nails are for carpenters. Hence it is important to know the in and around with how it works. Emptying an array is one of the important concepts involved so here are the few methods I know.

1) Using length property

The length property returns the number of elements in that array. And if we equate this to 0, we will be able to empty the array elements. This method is quite popular but not the fastest way to do the job.

baratheon = ["Robert", "Renly", "Stannis"]
baratheon.length = 0 // empties array

console.log(baratheon) // expected result: []
console.log(baratheon.length) // expected result: 0
Enter fullscreen mode Exit fullscreen mode

2) Assigning it to a new empty array

This is the fastest way of emptying an array. This is perfect if you don’t have any references from other places to the original arr. If you do, those references won’t be updated and those places will continue to use the old array.

baratheon = ["Robert", "Renly", "Stannis"]
baratheon = [] // empties array

console.log(baratheon.length) // expected result: 0
console.log(baratheon) //expected result: []
Enter fullscreen mode Exit fullscreen mode

3) Using Array method splice()

This can be done using the splice() method from the list of JavaScript Array methods. The splice() method takes the index (from which the splicing should start ) and the number of items to be removed as parameters and splices the elements.
We have to pass the 0 as index (the first element) and the length of the array as parameters which ends up emptying the whole array. The performance of this method is almost as fast as assigning the new array method.

baratheon = ["Robert", "Renly", "Stannis"]
baratheon.splice(0, baratheon.length) // empties array

console.log(baratheon.length) // expected result: 0
console.log(baratheon) //expected result: []
Enter fullscreen mode Exit fullscreen mode

And that sums it up. Comment below if you know any other ways to empty an array.

Thank you :)

Top comments (10)

Collapse
 
lionelrowe profile image
lionel-rowe • Edited on

Whoah, I never knew Array#length was settable!

Setting it almost seems like an antipattern, because you'd expect it to be a read-only property, but it also looks to be the cleanest way to empty an array in-place (the splice version is even less intuitive).

I guess this would be one example where a comment explaining "what" (rather than "why" or "how") would be useful.

// empties array
arr.length = 0
Enter fullscreen mode Exit fullscreen mode
Collapse
 
sanchithasr profile image
Sanchithasr Author

Noted. I'll add the comment. It can be confusing.

Collapse
 
feriun profile image
Farhad

Your Topics are interesting πŸ‘
Which method do you think will be the best in case of readability and performance?

I will chose assigning it to a new empty array baratheon = []

Collapse
 
sanchithasr profile image
Sanchithasr Author

Assigning it to new empty array is the faster way.

Collapse
 
sturpin profile image
Sergio TurpΓ­n

Good post Sanchithasr!

I know another, but it's slower in terms of performance

while (baratheon.length > 0) {
    baratheon.pop();
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
sanchithasr profile image
Sanchithasr Author

Yes. It's very slow when it comes to performance.

Collapse
 
ognanshissi profile image
Ambroise BAZIE • Edited on

Very interesting didn't know about

arr.length = 0
Enter fullscreen mode Exit fullscreen mode

but look's cleaner , THANK YOU

Collapse
 
alfredosalzillo profile image
Alfredo Salzillo

please add the javascript tag to the codeblocks

Collapse
 
sanchithasr profile image
Sanchithasr Author

Done. Thanks for the suggestion.

Collapse
 
bytebodger profile image
Info Comment hidden by post author - thread only accessible via permalink
Adam Nathaniel Davis

This is... "advanced"???

Some comments have been hidden by the post's author - find out more

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!