Filtering array with Boolean giving unexpected results

Question

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.

Answer 1

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'));

Answer 2

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.

Answer 3

filter array method : Filters array on the basis of condition provided inside.

arr = [1,2,3,4,5,6];
arr.filter(ele => ele>3)
output: Array(3) [ 4, 5, 6 ]

Boolean : Boolean returns true if value is true

Boolean(true) 
output: true

And vice versa

Boolean(false) 
output: false

Here your checking Boolean(true), in case of true value it is counting but in case of false it is filtering out. To correct this scenario, Use type checking inside filter function.

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(item => typeof(item)==='boolean').length;
}