Removing duplicates in an array with javascript

At a job interview, I was asked how to do this without jQuery. Javascript's filter function makes it easy.

javascript,array,unique,filter

06/11/2013

I was asked this question on a test recently by a prospective employer and couldn't think of a way to do it without jQuery, so I decided to do my research and come up with a solution. Turns out that with the relatively new filter function of javascript, this is quite easy. Let's say you have an array like this:

var duplicatesArray = ['mike','james','james','alex'];

The filter function will allow you to create a new array, using a callback function once for each element in the array. So you could set up the unique array like this:


  var uniqueArray = duplicatesArray.filter(function(elem, pos) {
    return duplicatesArray.indexOf(elem) == pos;
  });

Here's a demo:

In this scenario your unique array will run through all of the values in the duplicate array. The elem variable represents the value of the element in the array (mike,james,james,alex), the position is it's 0-indexed position in the array (0,1,2,3...), and the duplicatesArray.indexOf(elem) value is just the index of the first occurrence of that element in the original array. So, because the element 'james' is duplicated, when we loop through all of the elements in the duplicatesArray and push them to the uniqueArray, the first time we hit james, our "pos" value is 1, and our indexOf(elem) is 1 as well, so James gets pushed to the uniqueArray. The second time we hit James, our "pos" value is 2, and our indexOf(elem) is still 1 (because it only finds the first instance of an array element), so the duplicate is not pushed. Therefore, our uniqueArray contains only unique values.

Thanks to Peter Scheler for pointing out that if you want to make this function reusable, you can modify it as follows:


  var uniqueArray = duplicatesArray.filter(function(elem, pos,arr) {
    return arr.indexOf(elem) == pos;
  });

such that if you had multiple arrays for which you wanted to remove duplicates, such as:


var duplicatesArray1 = ['mike','james','james','alex'],
    duplicatesArray2 = [2, 1, 3, 2, 4, 5, 5, 6, 7];

you could then say:


var uniqueArray1 = duplicatesArray1.filter(unique), uniqueArray2 = duplicatesArray2.filter(unique);