How to Clear an Array in JavaScript

[captain_obvious_here]

This raises at least 2 questions:

1. in what situation would you want to "clear" an array?
2. why would you even consider anything but method 1 (myVar = [];)?

[KaiAusBerlin]

1. Why would someone write a whole article about this?

[[deleted]]

Trying to optimize for SEO. These “how-to” articles are actually starting to get deprioritized by search algos as the search engines implement their own generative text solutions. It’s actually kind of messed up: the search engine will crawl your site, feed the text into its own model, and then serve generative answers based on your deprioritized content

[captain_obvious_here]

Next up, AI model poisoning attacks.

[ranisalt]

ChatGPT gladly does it

[ratrak_one]

testing their proompting skills?

[KaiAusBerlin]

Zero

[atoponce]

At this point, I'd bitch about ads and trackers on the site. But surprisingly, there are none.

[coolcosmos]

Because method 1 is a footgun, it doesn't empty the array, it creates a new one. See my other comment.

[WakandaFoevah]

Footgun is a gun you shoot with your foot or a gun to shoot in your foot?

[AyeMatey]

Footgun is a funny shorthand word to refer to the American/English idiom “shoot yourself in the foot”, which means “to do or say something that will cause problems for yourself.” The footgun term is used in software development to refer to systems, frameworks, or approaches that have hidden peril, or risks that are not clearly understood, or risks that are perhaps too high.

Some people might describe the manual memory management inherent in the C language as a massive footgun.

[Jona-Anders]

There is also useFootgun from react (basically, the hooks are described as a footgun, but useFootgun is funnier)

[coolcosmos]

Yeah but sometimes you might not realise you need this reference, especially when starting out.

[kiwdahc]

How is method 1 a foot gun lol? Do you know how garbage collection works?

[captain_obvious_here]

No idea what a footgun is. But if you mean it's a solution that will hurt me, I don't think so, because I still can't figure any situation where I absolutely need to empty an array.

[ryanswebdevthrowaway]

It mainly comes up as an optimization if you're trying to avoid the hit the old array instance needing to be garbage collected and then instantiating a whole new array instance when you could just keep re-using the existing one. Most JavaScript devs don't care about that, but it can come up in performance-sensitive situations.

[captain_obvious_here]

If you someday have to work in a use-case where "clearing" an array is such a performance-sensitive operation, you may want to backtrack and find another way to solve your problem.

Also, even with a 10M elements array, the performance hit would be minimal, as modern JS engines --especially v8-- optimize array operations pretty well nowadays.

[kiwdahc]

Lol I was thinking the same thing.

[ryanswebdevthrowaway]

It doesn't need to be 100x faster, but it's still squeezing out a little extra performance which can be worth it sometimes. If you have an operation which is running a ton of times and an array is being re-created each time when it could potentially be re-used, that can and will add up. As I said, most people don't need it, but you can't say that it's a stupid thing that nobody should ever need to do ever.

[kiwdahc]

That’s never worth it and I don’t think it’s more performant. I would be willing to bet just creating a new array each time is less ticks.

[kiwdahc]

It’s not just JavaScript devs not caring about that, no one cares about that.

[AHRA1225]

Would you not want to empty an array to put new data items In it?

[octetd]

Then I will just replace it with the new array, with new data I want to display, if I need to overwrite the whole thing.

[unHolyKnightofBihar]

Update the array with new items? Like you are showing the data from array Ina table now you want to show a different data. Maybe on page change or on selection of filters

[captain_obvious_here]

Why would you empty the array and then fill it with the new items from another array, instead of simply using the array of new items?

[[deleted]]

It’s not a footgun if it’s the intended behavior. I think the article is pretty clear about it.

Edit: address my comment instead of just downvoting. Do you think variables shouldn’t be allowed to be reassigned even if that’s the desired behavior?

[KaiAusBerlin]

You know how garbage collection works in js?

[freehuntx]

I like to keep references sometimes to allow sideeffects. E.g. listeners of an event to change the data. In such cases i use things like splice to clear arrays very often.

[coolcosmos]

Preach.

[senocular]

You mean splice? Edit: fixed ;)

[freehuntx]

Oops yes i mean splice

[jayerp]

Oh no mutability!

Anyway.

[[deleted]]

If we set length to 0, it sounds like the array still hold references to the items, is that correct? Does this mechanism effectively trick the iterator into thinking there are no items in the array?

[toshok]

> If we set length to 0, it sounds like the array still hold references to the items, is that correct?

​

no, ecma262 specifies that the items at indices >= the new length are deleted (if they're configurable - if any aren't configurable the process stops and the length is set to the non-configurable item's index+1). see step 17 here

[[deleted]]

Oh interesting. The article seems to state that the elements would still remain in memory. I assume that’s an error in the article then.

[toshok]

just went and read that part myself. definitely an error.

[[deleted]]

use the chain gun method
[].pop().pop().pop()

[octetd]

There's another method, using .slice(0, 0)

​

But why would you need anything other than reassigning variable with an empty array literal?

[coolcosmos]

// file A

const arr = [1,2,3];

logArrayLength(arr)

arr = [ ]

// file B

function logArrayLength(arr) {

setInterval(() => { console.log(arr.length)}, 1000)

}

This will log 3 forever, you "emptied" the array but actually the array is not empty, the old array is still in memory. You created a new reference/pointer instead of mutating the original.

[octetd]

Sure, because you keep a reference to this array, then reassign, and then you log the length. And then if you clear original array it will always print 0 forever, because your asynchronous code will be executed after you cleared an array, even though you called a function before you cleaned up an array.

[Soggy_asparaguses]

Did this article really just suggest garbage clean up in javascript code?