All language subtitles for 8- Logical Operators withn-booleans

In the last lecture

you learned about logical operators, in all the examples you saw

in the last lecture, we used these logical operators with boolean

values. But in JavaScript, unlike in many programming languages,

we can use these logical operators with non boolean values.

And that's extremely powerful. Let me show you a few examples.

Let's say we have false or true. What do you

think is the result of this expression? Well, it's true, right?

Now what if we have false or

the string Mosh? What do you think is the result of this

expression? Well let's take a look, we get Mosh back

what if we have false or number 1?

We get number 1 back. So here's the first thing you

need to realize, the result of a logical expression is not

necessarily a true or false. That depends on

the value of the operance we have. In the first example

our second operand is true, that's why we get true back.

In the second example, our second operand is a string, that's why we get

a string back, and by the same token, in the third example.

We get a number back. So when our javaScript engine tries to

evalue this expression, it looks at each operand

if that operand is not a boolean true or false, it will try

to interpret it as truthy or

falsey, so in JavaScript we have

is values which we refer to as Falsey, that's not

boolean false, it's falsey. What are

these falsey values? Well we have undefined

null, number 0, the boolean

false, and empty string and

not a number. Now we haven't talked about this yet, that's going to come

later in the course, for now, just remember, not a number

is a special value in JavaScript, and when we are dealing with a mathematical

calculation that does not produce a valid number,

this value is returned, not a number. Now we're going to look at that later in the course,

so don't worry about it. So these are the falsey values

in JavaScript, if we use any of these values in a logical expression

they will be treated as falsey, which is kind of like

a boolean false, but it's not exactly the same. Now,

anything that is not falsey is truthy.

So, back to these examples.

In the second example, our second operand is a string with

4 characters. So this is not an empty string, it's not

falsey, so it's truthy. So when our JavaScript

engine tries to evaluate this, it looks at the first operand

it's false so the search continues because with a logical or

operator, as you learned in the last lecture, 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 maybe the other operand is true or

truthy. In this case we are dealing with a truthy value, so

this value is immediately returned. The same goes for

third example. So here one is not a boolean true, it's truthy,

that's why the value of this operand is returned.

Now, what if we have an expression like this, false

or 1, or 2. What do you think we're going to get?

Let's take a look. You get 1. So this is 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, it's value is returned, and here the evaluation stops.

It doesn't matter what we have on the right side, we could have a million other operands,

they are completely ignored, this is what we call

short-circuiting. Short-circuiting. That's

exactly like short circuiting that we have in electricity.

Now that you understand how these logical operators work with non-boolean values,

let me give you a real world example on when to use this. So

let's imagine an application, and

somewhere the user has to pick a color, or we're going to use a default

color. Maybe this is the color of the t-shirt they want to buy. So,

I'm going to declare a few variables, userColor.

We set that to red, defaultColor

we set that to blue, and currentColor,

which we set to userColor or

defaultColor. Now let's read this exprsssion

in plain English. userColor or defaultColor

that basically means if we have a value for userColor

we're going to use that, if we don't, we're going to use the defaultColor.

Now, let's log this on the console. So currentColor

we get red. Because our user

has selected a color. In contrast, if the user

has not selected a color, let's set this to undefined,

save the changes, we get blue.

Because defaultColor is blue. So this is the power

of using the logical or operator, between nonbooleans.

With this technique, we can provide default values.

So if the user has selected a color, we're going to use that

otherwise we're going to use our default color and that determines

the current color which we are going to display on the screen.