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

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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.

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

Topics:
javascript ,web design and web development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}