Filtering array with Boolean giving unexpected results-CodePudding

I can't understand why the output is 17 its only returning the true values not the false values either that the false value are boolean also

function countSheeps() {
  const array1 = [true, true, true, false,
    true, true, true, true,
    true, false, true, false,
    true, false, false, true,
    true, true, true, true,
    false, false, true, true]

  return array1.filter(Boolean).length;
}

the output is 17.

CodePudding user response：

Boolean returns true if its argument is truthy and false otherwise. Array#filter only keeps the values for which the callback returns true (or a truthy value). Here, Boolean is the callback and since all the values in the array are already booleans, only the true values are retained. If you want to keep all values that are primitive booleans, you can use typeof in a custom callback function.

const array1 = [true,  true,  true,  false,
    true,  true,  true,  true ,
    true,  false, true,  false,
    true,  false, false, true ,
    true,  true,  true,  true ,
    false, false, true,  true]
console.log(JSON.stringify(array1.filter(Boolean)));
console.log([true, true, false, true, false, 1, "test"]
              .filter(x => typeof x === 'boolean'));

CodePudding user response：

Array.prototype.filter() works by evaluating the return value given to it each iteration. A new array will be returned, but only values/iterations where a truthy value was returned in the block. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Now take a look at what that function Boolean does: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean

Essentially, you're passing every value from array1 to filter, and for each of those iterations you're returning the return value from calling that Boolean function with the element in question. When you pass true to that function, it returns true, so that value will end up in the array returned by the filter method. When you pass false, the Boolean function returns false in the block to filter, which means the filter method will NOT include that value in its return value.

console.log(Boolean(true)); // This returns true, so all these values from array1 end up in the final array that filter returns.

console.log(Boolean(false)); // This returns false, which means for that iteration you're returning a falsey value to the filter method, therefore filter will not keep select/keep the element in question.