Question

Hello fellow JS junkies. Can someone please explain to me the difference between the following ways of evaluating truthiness of variables?

var q1Var1 = "hello",
        q1Var2 = 0,
        q1Var3 = true,
        q1Var4 = "false",
        q1Var5 = -1,
        q1Var6 = undefined,
        q1Var7 = null,
        q1Var8;

// What is the difference between this block of code:

console.log( !q1Var1 );
console.log( !q1Var2 );
console.log( !q1Var3 );
console.log( !q1Var4 );
console.log( !q1Var5 );
console.log( !q1Var6 );
console.log( !q1Var7 );
console.log( !q1Var8 );

// and this block?

if( q1Var1 === true ){ console.log( "true" ) } else { console.log( "false" ) };
if( q1Var2 === true ){ console.log( "true" ) } else { console.log( "false" ) };
if( q1Var3 === true ){ console.log( "true" ) } else { console.log( "false" ) };
if( q1Var4 === true ){ console.log( "true" ) } else { console.log( "false" ) };
if( q1Var5 === true ){ console.log( "true" ) } else { console.log( "false" ) };
if( q1Var6 === true ){ console.log( "true" ) } else { console.log( "false" ) };
if( q1Var7 === true ){ console.log( "true" ) } else { console.log( "false" ) };
if( q1Var8 === true ){ console.log( "true" ) } else { console.log( "false" ) };

I was expecting to find that the second block would just be an inverse of the first (in other words, the values would just switch), however, it looks like only the variable set to nonstring “true” actually returns true. Why is this? What is the fundamental difference between the two evaluations:

!q1Var1

vs.

true === q1Var1

Answer 1

This illustrates the notion of “falsy” values in JavaScript. For instance, undefined becomes the same as false in a boolean context (such as an if condition). However, undefined === false is not true. The following are all “falsy” values:

• false
• undefined
• the empty string
• the number 0
• null
• NaN

The === operator means “strictly equal” (see here, for instance); it suppresses automatic type conversions.

Type conversion rules for the == operator (from the second link above) are:

If the two operands are not of the same type, JavaScript converts the operands then applies strict comparison. If either operand is a number or a boolean, the operands are converted to numbers if possible; else if either operand is a string, the other operand is converted to a string if possible. If both operands are objects, then JavaScript compares internal references which are equal when operands refer to the same object in memory.

Strict comparison rules are:

• Two strings are strictly equal when they have the same sequence of characters, same length, and same characters in corresponding positions
• Two numbers are strictly equal when they are numerically equal (have the same number value). NaN is not equal to anything, including NaN. Positive and negative zeros are equal to one another
• Two Boolean operands are strictly equal if both are true or both are false
• Two objects are never equal for either strictly or abstract comparisons
• An expression comparing Objects is only true if the operands reference the same Object
• Null and Undefined Types are == (but not ===)

Note in particular that !var is not the same as var == false (and certainly not the same as var === false if var is not a boolean value to begin with). Non-empty strings are “truthy” (!"..." is always false for any non-empty "..."), but non-empty strings that evaluate to 0 when converted to numbers (like "0") are == false.