Don't understand how this code can detect the length

Question

var data = [1, 2, 3, 5, 2, 1, 4];

// iterate over elements and filter
var res = data.filter(function (v) {
    // get the count of the current element in array
    // and filter based on the count
    return data.filter(function (v1) {
        // compare with current element
        return v1 == v;
        // check length
    }).length == 1;
});

console.log(res);

I understand all the line in this code, but I don't understand how it can detect the length==1.

(My opinion) Because it loop though every single element in the array and return boolean value either true or false so how it can use to detect the length?

This code is to get the array element that only appear once in the array.

Look at what `filter` does. Look at what object the `length` is being taken on. — Quentin, Jun 06 '22 at 15:14
`filter()` returns a new array containing all the elements where the function returned true. It's getting the length of that new array. So it's counting the number of times the function returned true. — Barmar, Jun 06 '22 at 15:16
An easier way to do this is to use a Set. `Array.from(new Set(data))` — Ruan Mendes, Jun 06 '22 at 15:17
For anyone wondering, the code is [from this answer](https://stackoverflow.com/a/39223967/1470607). — Etheryte, Jun 06 '22 at 15:20
Thanks for everyone comment and answer, My brain is tryhard to understand the answer. — Lee JianXing, Jun 06 '22 at 15:46

score 0 · Accepted Answer · answered Jun 06 '22 at 15:23

The return true is not to return the boolean, but when you return true from inside a filter, that item gets added to the resulting array of filter function.
The process here is called chaining of methods. On line 11, first, the filter is applied to the data array, then the .length method is applied to the result of the filter, which will be an array of equal length or less than the number of elements in the data array. Then finally only once the return is called, which will be a boolean used for the outer filter.

Another example:

function reverseString (inputString) {
    return inputString.split("").reverse().join()
}

In the above example, the function returns after the split, then reverse on the split's result, then join on the reverse's result. The final resulting string is only returned.

Thanks for clear my mind,I thought this process is recursion before I see your answer — Lee JianXing, Jun 06 '22 at 16:19

score 0 · Answer 2 · answered Jun 06 '22 at 15:23

Don't think about it as lines of code. Split each segment of code into its true meaning ~~my padawan~~

data.filter(function (v1) {
    // compare with current element
    return v1 == v;
    // check length
})

filters the data array to return an array of elements from data such that every element in it is equal to v

By checking if its length is 1, you want to return true if the the array has only 1 element.

So,

var res = data.filter(function (v) {
    // return true if there is only 1 element in data which is equal to v
});

Which basically means, we are filtering data, and returning a new array where every element is such that it has only one occurrence in the array.

score 0 · Answer 3 · answered Jun 06 '22 at 15:36

The function for filter returns a boolean, but filter itself returns an array.

So, for example:

array.filter(function(element) { return element >= 0; });

says that the function function(element) { return element >= 0; } will be applied to each element in array. Then, if the result of the function is true, that element will exist in the final, filtered version of array (which is what the filter function returns), or will not exist if the result is false.

In effect, all negative numbers from array will be filtered out because they return false.

What your code is saying is the following: For every element in data, filter data to keep only the elements equal to the current one. If this filtered list has only one element, then it can only be our current element. Therefor this element exists only once and should be kept in the final result, so we return true if .length == 1. In the end, once this is done for every element, filter is smart enough to convert those results of true and false into an array of the elements that produced true and leave out those that produced a false.

Thank you,I am more understand what filter () really do now. Return a new array with element if that result is true and ingore the element when result is false — Lee JianXing, Jun 06 '22 at 16:17

Obada ElSharbatly · Answer 4 · 2022-06-06T16:02:51.097

I will describe the filter method step by step in detail. First, it takes a condition. then it returns an array with all values which passed the condition successfully

so think about this block of code as a condition

return data.filter(function (v1) {
        // compare with current element
        return v1 == v;
        // check length
    }).length == 1;

so let's take the first part of the condition

data.filter(function (v1) {
        // compare with current element
        return v1 == v;
        // check length
    })

and let's say we gonna start with the first element 1 , so how many times v1 === v ? the answer is two times so it will return this array [1, 1]

so forget the condition we wrote in the first lines and think about it like that [1,1].length === 1. So [1,1].length === 1 will return false

The same will happen with number 2. so let's talk about the number 3. it will be [3].length === 1 which is true which will go to the upper level and that's why the res will be finally [3, 5, 4]

I tired,seems like my reputation need to be 15 or higher.Today was my first day in stack overflow so I not enough reputation — Lee JianXing, Jun 06 '22 at 16:46

Don't understand how this code can detect the length

4 Answers4