Zepto's Use Of Array.filter

I am trying to boost my Javascript understanding, so I've been looking through the Zepto library. I came across this line: uniq = function(array){ return array.filter(function

Solution 1:

it is creating a new, unique array of elements, right?

It just filter your array elements to return unique elements.

demo

But isn't it essentially just cloning the array?

No as I explain above.

If so, wouldn't array.slice() be faster?

Slice doesn't remove duplicates.

Finally, wouldn't it increase performance to change array.indexOf(item) to array.indexOf(item,idx)? Or better yet, just return true?

If you only return true you won't identify if the element is duplicated or not.

demo

When does array.indexOf(item)==idx not equal true?

Example: I have the following array:

['10', '20', '30', '20', '10']

Iterations:

• 1: array.IndexOf(10) == 0 ? // yes, so return true
• 2: array.IndexOf(20) == 1 ? // yes, so return true
• 3: array.IndexOf(30) == 2 ? // yes, so return true
• 4: array.IndexOf(20) == 3 ? // no because array.indexOf(20) is 1 , so return false
• 5: array.IndexOf(10) == 4 ? // no because array.indexOf(10) is 2 , so return false

So, when the element has already been found it gets false because the indexes are not the same.

Solution 2:

It seems that this code is eliminating duplicates.

Solution 3:

Ahh I see the "difference" we're questioning. You kinda answered it though, in your edit. I think this method returns a new array that contains unique values from the original.

When the indexOf method scans the array, it finds the first occurrence of the currently inspected item. If that occurrence is not the same index as the current index being inspected, the indexOf result will not equal idx. Therefore, it will not return the value because it either wasn't found, or it was found earlier in the array (which means it's a duplicate).

Here's an example:

[10, 30, 10, 100]

When the filter methods goes through the items: 10, 30, 10, then 100, it will perform the indexOf on it.

For 10, indexOf will return 0. And idx is also 0.

For 30, indexOf will return 1. And idx is also 1.

For 10, indexOf will return 0. But idx will be 2.

For 100, indexOf will return 3. And idx is also 3.

Therefore, [10, 30, 100] will be returned, not just a simple clone of the original.

Solution 4:

The function (as named) takes unique items in the original array, and returns them in a new array. So if the original array has distinct items, it will just return a clone.

Remember, indexOf returns the first index of a given item. So if the current item appears twice in the array, the filter value will be false.

For example.

var a = [1, 2, 3];
var b = [1, 2, 3, 2];

console.log(uniq(a));  // [1,2,3]
console.log(uniq(b));  // [1,2,3]

​

Solution 5:

As others have said already this gets rid of duplicates in an array. Just added my answer to show why this works. If you log out the values inside the filter function you'll see the pattern:

array.filter(function( item, idx ){
  console.log( item, idx, array.indexOf( item ) );
  ...
  ...

console.log( uniq( ['a','a','b','b','c','c','c','d'] ) );
/*
a 0 0 *
a 1 0
b 2 2 *
b 3 2
c 4 4 *
c 5 4
c 6 4
d 7 7 *
*/

Check the last column, that's what determines if the item already exists so the comparison array.indexOf(item) == idx checks against the second column, if it's not the same number it is a duplicate. For the item to be unique (*) the index and the index position must match.