Search code examples
javascriptbooleanexpressionimplicit-conversion

JavaScript: Implicit conversions of non boolean values in expressions


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


Solution

  • 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.