Random thoughts & observations

From the mundane to the profound and everything in between here’s what’s rocking our world

Remove an item from a JavaScript array by value

Posted: February 1, 2016
Written by: Saints At Play
Category: Javascript

No matter how much you work with a given tool there will always be those 'aha' moments when you learn something new that you didn't realise was possible before.

One of those 'aha' moments was when we discovered the filter method in JavaScript.

Managing array values with filter

Say you have the following array and want to remove only the third item:

var countries = ["England", "France", "Germany", "Italy", "Spain"];

There's a couple of ways this could be achieved - one with loops and conditional statements and the other with a single line of code.

The 'old' way

In this approach we use a loop to iterate through our array, run a conditional check to see if the current array value matches the value we want to remove and then, if a match is found, use splice to cut the element out:

var countries = ["England", "France", "Germany", "Italy", "Spain"],
    i;

for(i = 0; i < countries.length; i++)
{	
  if(countries[i] === 'Germany')
  {
    countries.splice(i, 1);
  }
}

console.dir(countries);

// Returns following array 
["England", "France", "Italy", "Spain"]

The only downside? This modifies the original array and - if you consider code quantity a downside - too much code has to be written to remove the array item in question.

That said the above approach is one solution to our problem but there is a much cleaner, faster and more efficient method available - one that is baked directly into JavaScript (as of ECMAScript 5): filter.

The 'new' way

With the filter method we could take the above array and remove the third element like so:

var countries = ["England", "France", "Germany", "Italy", "Spain"],
    modified  = countries.filter(function(e){ return e !== 'Germany' });

// Check results
console.dir(modified);

// modified - Returns following array 
["England", "France", "Italy", "Spain"]

// Doesn't modify the original array - bonus!
console.dir(countries);

// countries - Returns following array 
["England", "France", "Germany", "Italy", "Spain"]

Nice and easy huh?

As filter accepts a function argument as a parameter we could write our own custom functions that we then pass into the filter method to extend how we want our array elements returned (I.e. only returning every second element or excluding those countries starting with the letters E and S). This makes filter an incredibly powerful tool for array manipulation.

The only downside is that the filter method is supported from Internet Explorer 9 and above which may be an issue for some developers (I.e. those who have to support IE8 and/or below).

In this context the only resort would be to either use the 'old' way listed above or, instead, opt for a third-party library such as jQuery or Underscore to provide similar functionality.

« Return to Posts

Comments

There are no comments

Posting comments after three months has been disabled.