Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Removing Multiple Items From a JavaScript Array — No For Loops

DZone's Guide to

Removing Multiple Items From a JavaScript Array — No For Loops

So, I was reviewing some code today that was using two for loops to remove elements from a JavaScript array. I won't relate the code here but I figured there has got to be a nicer way. Check out my solution.

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

So, I was reviewing some code today that was using two for loops to remove elements from a JavaScript array. I won't relate the code here but I figured there has got to be a nicer way. So, the first guess is to make use of the filter method, but that creates a new array which might be a problem if the array is large, but not if it is fairly small or not called very often.

providers = providers.filter(function(provider) {  
     return provider.age > 35  
}  

For performance or API reasons you might want to perform an in place removal using splice, so you can simply map the values to indexes you want to remove, reverse the order, then perform a sequence of splice operations:

providers.map(function(provider, index) {
    return provider.age > 35 ? index : -1;
}).filter(function(index) {
    return index >= 0;
}).reverse().forEach(function(index) {
    providers.splice(index,1);
});

You can play with this code in this jsfiddle.

Update 21 Jan 2016: The hazard of doing full stack development is that it is easy to accidentally duck type between languages whilst forgetting the impact. In Java, the equivalent streaming code using map just returns another lazy step in the stream whereas in JavaScript you end up creating a new array of the same size as the original. This removes any performance improvement over the first example if you have lots of data. This is simple to fix though as you can use the reduce function to just create an array and populate it using the reduce operation:

providers.reduce(function(list, provider, index) {
    if (provider.age> 35) list.push(index);
    return list;
}, []).reverse().forEach(function(index) {
    providers.splice(index,1);
});

Here is the updated jsfiddle. I guess at some point I am going to have to benchmark these variants to see which is best; but that is for a less busy day.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
javascript ,web design and web development

Published at DZone with permission of Gerard Davison, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}