Is filter(x => !!x) the same as filter(x => !!x && x)?

Is filter(x => !!x) the same as filter(x => !!x && x)? In both cases the method returns the same thing but I want to know the theories of the answer.

I think it's the same ,in the filter method, the return value will be regarded as Boolean

!!x === Boolean(!!x) === Boolean(x)

!!x && x === Boolean(!!x && x) === Boolean(x) && Boolean(x) === Boolean(x)

Hahaha, so it's equivalent, that's what I think

But in a assignment expression in the following code

const a = !!x && x
const b = !!x

The results of these two expressions are different

For && operator, exp1 && exp2, if exp1 returns false, the exp2 will not execute, but when exp1 returns true, the exp2 will still execute.

So in assignment expressions

• !!x will always return true || false,so to speak Boolean
• !!x is false
  • !!x will always equals !!x && x
• !!x is true
  • !!x equals !!x && x when x is a Boolean
  • In other cases, the two are not equivalent

Let's run some tests and see what different values output for each of those. This will show you what happens for each value

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const values = [-1, 0, 1, 2, {a:'foo'}, null, undefined, true, false, 'true', 'false', 'foo'];

let htmlStr = '';
values.forEach(x => {
  htmlStr += `
  <tr>
    <td>${JSON.stringify(x, null, 0)}</td>
    <td><code>${JSON.stringify(!!x, null, 0)}</code></td>
    <td><code>${JSON.stringify((!!x && x), null, 0)}</code></td>
  </tr>`;
});

document.querySelector('tbody').innerHTML = htmlStr;

<!-- language: lang-css -->

table, th, td {border:1px solid #DDD; border-collapse:collapse;}
td, th {padding: .25rem;}
code{color: #b71313;}

<!-- language: lang-html -->

<table>
  <thead>
    <tr>
      <th>Value</th>
      <th><code>!!x</code></th>
      <th><code>!!x && x</code></th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

<!-- end snippet -->

The purpose of a filter function is to determine what should or should not be included in the results, thus everything should return a boolean. The results here show that the !!x method always returns a boolean, so for the absolute basics this works best.

However, keep in mind that just because it's a boolean doesn't necessarily mean that what it's converting into a boolean makes sense in your application! For example: Are you sure you want the string "false" to be converted into true?

To summarize: !!x will convert things to booleans every time, but you need to make sure what is being converted makes sense for your use case. It's not a catch-all since there are so many ways this could go wrong.

!!x is not equal to !!x && x

But Why does it return the same thing when used in filter?

first to understand how variables are evaluated during a conditional statement, refer:

• https://developer.mozilla.org/en-US/docs/Glossary/Truthy

• https://developer.mozilla.org/en-US/docs/Glossary/Falsy

for a lot of use case, in order to filter only truthy value, filter method can simply be written as follow:
filter(x => x)

while falsy filter can be written as:
filter(x => !x)

now, given some sample variable

const x = "A"

const notX     = !x        // false  (!"A")
const notNotX  = !!x       // true   (!!"A")/(!notX)

const whatIsThis = (notNotX && x) // "A" || can be read as (true && "A")

// in any other context, it is evaluated as original value of x, in this case: "A"
console.log(whatIsThis) 
// in the context of boolean, it is evaluated as truthy 
if(whatIsThis) console.log(true)

console.log(whatIsThis === notNotX)  // false, whatIsThis is not equal to notNotX

anytime that x itself would be evaluated as truthy,
!!x will returns true

another other way to understand why filter return same result, try reading the statement as

• !!x is true
• !!x && x is true && "truthy"