JavaScript: Implicit conversions of non boolean values in expressions

Question

My question has to do with the three links (screenshots of code and explanations in the 3 links below):

List of values which, when converted to boolean, are evaluated as false

First and Second code boxes (see below)

Third code box and explanation (see below)

There are several parts to my question:

1. (First code box) How and why is the var boo equal to 'world' and not 'hello'? According to the first image, both values should be evaluated as true, so why are either of them equal to boo?

2. (2nd code box) This makes more sense than the previous one. However, why is the result of the equation defaulted to the true part of the equation and not the false?

3. (3rd code box) Now this is super confusing. I'm trying to understand the explanation below the code box, but I just can't figure out the reasoning. Going through the explanation:

   a. myNumber = false in the first line: this part makes sense, because the value "1", because of the logical operator ! ,is converted to a boolean value, which makes it instead: true. Therefore, !1 would mean in boolean: !true (not true), which is false.

   b. myNumber !=== null, because it equals false. This is where it gets confusing. The only way that null could NOT equal false is if null is NOT a value in this specific line of code (see first link where it lists null in the list of values evaluated as false). In the explanation, it says that "In the if statement, at line 3, false does not equal null." It seems like it's contradicting itself.

   c. myNumber === false, therefore it is given the value 2. Here again it gives the variable the true value rather than just saying the variable is false ("again" is a reference to link #2 - 2nd code box) Why is that??

Thanks for your help in advance!

betheymc

Answer 1

Good questions!

My Answers

1. The Logical AND (&&) could be used for a Short-circuit evaluation which is done left to right. This Logical operator returns the second truthy value if exist. If dont just return false.

   - true && (anything) is short-circuit evaluated to true but returns anything.

   - false && (anything) is short-circuit evaluated to false and returns false.

2. The Logical OR (||) could be used too for a Short-circuit evaluation which is done as mentioned left to right. This Logical operator returns the first truthy value.

   - var foo = 'Cat' || 'Dog' // =>>>>> foo = "Cat"

   - var foo2 = 'Cat' || false ' // =>>>>> foo2 = "Cat"

   - var foo3 = '' || false // =>>>>> foo3 = false

   The reason why var boo2 = (0/0) || 43.2 return 43.2 is because (0/0) is evalueted as NaN and the first truthy value in that case would be 43.2.

3. In the first line myNumber is not true in other words is false. Than in the third line, the current value of myNumber is compared with null. Then because null is not false and the types are not equal, the if statement is not executed and the code continues until line number 7. In Line 7 happens what is explained in answer number 2.

var boo = !1
console.log('var boo with value ', boo + ' is a ', typeof(boo))
console.log('Null is an ', typeof(null), ' but false is a ', typeof(!true))

console.log(typeof(false || true) == typeof(null)) // types are not equal
console.log(!true == null) // so they are not equal

The rules of logic guarantee that these evaluations are always correct. Note that the anything part of the above expressions is not evaluated, so any side effects of doing so do not take effect. Also, note that the anything part of the above expression is any single logical expression (as indicated by the parentheses).

Answer 2

It's because the first image was wrong.

null could not compare as equal to true or false, it could only be implicitly compared as equal to undefined

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null

Moving on

let foo = A && B

// the above is the same to the one below
function fooFunction(a, b){
   if(!a)
     return a
   else
     return b
}

foo will be the value of A if A can be coerced into false; otherwise, it will be B and the type doesn't matter.

let fooA = '' && 'abc' //''
let fooB = 'something' && 'abc' //'abc'

fooA will be '' since the first value was coerced to false while fooB will notice that the first value could not be coerced to false and will then assign the second value to it which is "abc"

Same with ||

let foo = A || B

foo will be the value of A if A can be coerced to true; otherwise, it will be B and the type doesn't matter.

The third picture should now be easier to understand

Answer 3

You need to understand what the && and || operators do. They're called boolean operators in that they operate on the boolean values of the inputs, but don't modify the actual values because Javascript is dynamically typed. This is important because returning the original input values is BETTER than returning the boolean values because they'll both evaluate to the same boolean value, but you'll be losing information if the operators converted the inputs to boolean outputs.

1) var boo = 'hello' && 'world'

The logic of the && (and) operator is to evaluate the first input, if it evaluates to false, then return it, otherwise return the 2nd value. That's it, that's the contract.

In this case, since 'hello' is true, it immediately returns 'world'.

2) var boo2 = (0/0) || 43.2

The logic of the || (or) operator is the opposite of the && (and) operator in that it evaluates the first input, if that input is true, then return it, otherwise return the 2nd value.

So as you can see, (0/0) evaluates to false, so it immediately returns the 2nd value.

3)

1| var myNumber = !1;
2| 
3| if (myNumber == null) {
4|   myNumber = 3
5| }
6|
7| myNumber = myNumber || 2

The issue here is again with understanding what the operators do, the == equality operator is not a boolean operator, so it doesn't evaluate the inputs as booleans before making the comparisons. So on line 3, you're actually asking if the boolean false equals to the null object. In this case, it's no.

Finally, for the myNumber = myNumber || 2 line, just refer to my comment above about what the || (or) operator does and it'll make sense.

Note: if you wish to evaluate these expressions as booleans you can use the following syntax to convert them to a boolean:

var boo = !!('hello' && 'world');

The '!' negates the expression and converts it to a boolean, negating it again gives it the correct value.

Answer 4

1. The reason the variable boo evaluates to 'world' instead of 'hello' is because of the && operator. This operator basically says If the first value evaluates to true, take the second value.

2. Essentially the opposite of the && operator, the || operator takes the second value if the first value evaluates to false.

3. false and null are still different values when testing for equality. Even though they both get evaluated to false in a boolean test, these values are different and the check for equality fails. Testing for equality is a different action than testing for true or false. Part c of your explanation goes back to the answer to your second question, where the || operator is taking the second value because the first has evaluated to false.

I hope these can help shed some light on your questions.