CODEWITHSUNDEEP
javascriptboolean-operations
Piva Gregory
Piva Gregory

Reputation: 502

when should this example be used?

Given the following code:

if (!!a !== !!b) return false;

What cases might necessitate its implementation as opposed to using loose equality:

if( a != b ) return false;

Upvotes: 1

Views: 93

Answers (1)

Mike
Mike

Reputation: 1327

Strict-Inequality (!==) of Boolean-Coerced (!!) Values

As revealed in the test cases below:

  • native objects of null and undefined are not equivalent
  • other objects who's type is coerced via toString or valueOf depend on what their value is when testing of the truthy state

Notes:

  • the !! is not necessary because it is applied to both side of the condition test and that condition is itself an inequality test; in this case ! is only need to convert truthy/falsey to true/false (respectively); so test3 and test4 are other equivalent examples of how it could be written
  • why did Svelte or another application write it as such? If intentional, it could be a micro optimization, but this would require more research to confirm this hypothesis.
  • It's also important to refer to (What is the !! (not not) operator in JavaScript?) that @VLAZ linked to in comments. It also describes the effect of !! on falsy values

Test Cases

function test1(a,b){
  return !!a !== !!b
}

function test2(a,b){
  return a != b
}

function test3(a,b){
  return !a !== !b
}

function test4(a,b){
  return !(!a == !b)
}

console.log('test1(0,false):', test1(0, false) );
console.log('test2(0,false):', test2(0, false) );
console.log('test3(0,false):', test3(0, false) );
console.log('test4(0,false):', test4(0, false) );
separator()

console.log('test1(\'\',false):', test1('', false) );
console.log('test2(\'\',false):', test2('', false) );
console.log('test3(\'\',false):', test3('', false) );
console.log('test4(\'\',false):', test4('', false) );
separator()

console.log('test1(null,false):', test1(null,false) );
console.log('test2(null,false):', test2(null,false) );
console.log('test3(null,false):', test3(null,false) );
console.log('test4(null,false):', test4(null,false) );
separator()

console.log('test1(undefined,false):', test1(undefined,false) );
console.log('test2(undefined,false):', test2(undefined,false) );
console.log('test3(undefined,false):', test3(undefined,false) );
console.log('test4(undefined,false):', test4(undefined,false) );
separator()

console.log('test1([],false):', test1([],false) );
console.log('test2([],false):', test2([],false) );
console.log('test3([],false):', test3([],false) );
console.log('test4([],false):', test4([],false) );
separator()

console.log('test1([\'a\'],false):', test1(['a'],false) );
console.log('test2([\'a\'],false):', test2(['a'],false) );
console.log('test3([\'a\'],false):', test3(['a'],false) );
console.log('test4([\'a\'],false):', test4(['a'],false) );
separator()

console.log('test1([\'\'],false):', test1([''],false) );
console.log('test2([\'\'],false):', test2([''],false) );
console.log('test3([\'\'],false):', test3([''],false) );
console.log('test4([\'\'],false):', test4([''],false) );
separator()

console.log('test1([0],false):', test1([0],false) );
console.log('test2([0],false):', test2([0],false) );
console.log('test3([0],false):', test3([0],false) );
console.log('test4([0],false):', test4([0],false) );
separator()

console.log('test1([1],false):', test1([1],false) );
console.log('test2([1],false):', test2([1],false) );
console.log('test3([1],false):', test3([1],false) );
console.log('test4([1],false):', test4([1],false) );
separator()

console.log('test1({},false):', test1({},false) );
console.log('test2({},false):', test2({},false) );
console.log('test3({},false):', test3({},false) );
console.log('test4({},false):', test4({},false) );
separator()

console.log('test1({a:1},false):', test1({a:1},false) );
console.log('test2({a:1},false):', test2({a:1},false) );
console.log('test3({a:1},false):', test3({a:1},false) );
console.log('test4({a:1},false):', test4({a:1},false) );

function separator(){console.log('='.repeat(30))}
.as-console-wrapper { 
  height: 100vh !important;  
  max-height: 100vh !important; 
}

Upvotes: 1

Related Questions