3.8 The Logical Operators with non Booleans

In the last lesson, you learned how to manipulate logical operators, in all the examples you saw in the last lesson, we used those logical operators with Boolean values. But in JavaScript, unlike two many programming languages, we can use these logical operators with non-Boolean values and it's extremely powerful. Let me show you some examples, let's say we have false or true according to you what is the result of this expression? Well it's true. Now what if we have false or the string 'Toto', what do you think is the result of that expression? Well let's take a look, we get 'Toto'. And if we have wrong or a number 1. We get the number 1. So this is the first thing you have to do. The result of a logical expression is not necessarily true or false, it depends on the value of the operand we have. In the first example our second operand is true and that's why we have true. In the second example our second operand is a string, that's why we get a string and at the same time in the 3rd example we get a number. When our JavaScript engine tries to evaluate this expression, it looks at each operand if that operand is not a true or false boolean. It will try to interpret it as a true value which we call Truthy or a false value which we call Falsy. In JavaScript, we have values that we call Falsy, it's not a false boolean, it's a false type value. What are Falsy values? Well we have an Undefined. A null A number 0. The Boolean string False, an empty and finally to NaN that is not a number. So we'll see this later in the course, for now just remember is not a number is a special value in Javascript and that we have to do a mathematical calculation that does not produce a valid value, this value returns NaN is not a number. We will now look at this later in the course, so here are the Falsy values. In JavaScript, we use any of its values in a logical expression, they will be treated as Falsy, that's what's kind of like boolean false but it's not exactly the same thing. Now anything that's not Falsy and Truthy that is of type true. So let's go back to these examples, in the second example, our second is a 4 character string, so it's not an empty string it's not Falsy so it's true. When our JavaScript engine tries to evaluate this, it looks at the first operand, it is false, so the search continues because with a logical OR operator. As you learned in the last lesson, as long as one of the operands is true the result will be true, now here in the second example, the first operand is false so the search continues hoping that the other operand is true or Truthy, in this case we are dealing with a Trurthy value. This value is then immediately returned. The same goes for the third example, so here it's not a true boolean, it's a Truthy, that's why the value of this operand is returned. Now what happens if we have an expression like this False or 1 or 2. What do you think we will get? Let's take a look, we get 1, so that's another thing you need to understand about the logical OR operator. The evaluation starts here as soon as we find an operand that is Truthy, that operand is returned, so here our second operand is Truthy, its value is returned and here the evaluation stops. No matter what we have on the right side, we could have a million other operands they are completely ignored, this is what we call the short circuit. It's exactly like electrical shorts. Now that you understand how these logical operators work with non-Boolean values, let me give you a concrete example of when they are used. So let's imagine an application, and somewhere the user has to choose a color or we're going to use a default color, maybe it's the color of the t-shirt he wants to buy. So we're going to declare some variables that we're going to call userColor, we set that to red. We then define a new variable that we call defaultColor. We set this to blue. And finally currentColor which we set to userColor or defaultColor. Now let's read this expression userColor or defaultColor which basically means that if we have a value for userColor, we'll use, otherwise we'll use defaultColor. Now we record this on the console we do a console.log of currentColor we get red because our user has selected a color. On the other hand, if the user has not selected a color, we set it to undefined, we save the changes and we get blue. Because the defaultColor is blue. So this is the power of using the logical OR operator between undefined. With this technique we can provide default values, so if the user has selected a color, we'll use it, otherwise we'll use our default color and that determines the actual color we'll display on the screen. That's it for this demonstration on logical operators with non-booleans. Let's get together for the next demonstration where we'll talk about bitWise operators.