# Understanding Booleans

To understand conditionals (if, else if, else blocks) in JavaScript, you'll need a solid understanding of booleans first.

### `true` and `false`

Simply put, a Boolean only has two values it can be - `true` or `false`. These are reserved keywords in JavaScript and must be spelled/capitalized (not capitalized at all) correctly.

Examples:

``````var myBool = false;
var isThisASimpleConcept = true;
``````

# Conditions

The concept of conditions are pretty straight-forward, since they're actually part of our every day life (usually without realizing it, we're evaluating conditions just about every waking minute of our life).

For example, you probably evaluate a condition when you first wake up. You look at a clock to see what time it is, and if you woke up on time, you'll get ready at a leisurely pace, eat breakfast, etc. Otherwise (else) you'll rush to get ready.

The condition in this example is the time on the clock compared to the time you wish it were. In JavaScript, this might look like the following:

``````if (currentTime <= wakeUpTime) {
beLeisurely();
eatBreakfast();
} else {
rushOutTheDoor();
}
``````

### Anatomy of the conditional statement

You'll always start a conditional block with an `if` statement, followed by parentheses and curly braces:

``````if (condition) {
// thing to do;
}
``````

The computer's job is to check the part inside the parentheses and turn it into a boolean, either `true` or `false`.

If it is able to turn the condition into `true`, it will run the code inside the `if` block curly braces. If it turns it into a `false`, it won't.

### Comparison Operators

We usually don't know ahead of time the values of the things we're comparing. So we use comparison operators and equality operators to check the current status of different variables so that our program can make the correct decision on which code it should run.

##### Equality/inequality operators
• `===` checks that the operand on the left side is the same value and same data type as the operand on the left
• `1 === 1` will evaluate to `true`
• `"1" === 1` will evaluate to `false`
• `!==` checks that the operand on the left is NOT the same value or is not the same type as the operand on the right
• `2 !== 2` evaluates to `false`
• `"2" !== 2` evaluates to `true`
##### Comparison operators
• `>` returns `true` if the left operand is greater than the right operand
• `1 > 2` return `false`
• `20 > 10` returns `true`
• `<` returns `true` if the left operand is less than the right operand
• `3 < 4` returns `true`
• `>=` and `<=` return `true` if the left is greater than or equal to or less than or equal to the right, respectively.
• `5 >= 5` returns `true`
• `6 <= 7` returns `true`
##### A (kind of) practical example:

For example, let's say we only want to allow children under 18 to use our website. The first thing we do when the page loads is pop up a box asking the user's age. Then, if the number they input is less than 18, we continue to load the site. Otherwise (else) we tell them they're too old to be here.

``````var age = parseInt(prompt("What is your age?"));

if (age <= 17) {
// Allow the user in
} else {
// Don't allow the user in
}
``````
###### "Truthy" vs. "Falsey"

Sometimes in your code the computer can't simply turn a value into a boolean directly. If it sees `if(true || false)...` it knows how to turn the `true || false` into a boolean (`true`). But what if you have: `if (42) {...}` ?

The terms "truthy" and "falsey" refer to values that the computer can infer `true` or `false` from, even if they aren't booleans. Remembering what is "truthy" and what is "falsey" is pretty straight forward.

"Falsey" values in JavaScript:

• `false` (naturally)
• `0`
• `""` (empty string)
• `null`
• `undefined`
• `NaN` (Not a Number)

"Truthy" values in JavaScript:

• Everything else
###### Examples:
``````var myArray = [];

if(myArray.length) {
// won't run because myArray.length is 0, and that is a falsey value.
}

if (myArray) {
// WILL run, because an empty array isn't one of the falsey values.
}
``````

### Logic operators

Sometimes we need to compare multiple things before knowing we want to run a certain block of code. Let's say, for example, that we created a website only for people named "Felix" who are older than 12 years old. As such, when the user creates their account we only want to allow them to create their account if their first name is "Felix" AND if their age is greater than or equal to 12. We need a way to combine comparisons, and that's where logic operators come in to play.

##### And (`&&`)

The double ampersand (`&&`) requires that the value on the left AND the value on the right of the `&&` both evaluate to `true` in order for the whole expression to be considered `true`. As such:

• `false && false` evaluates to `false`
• `false && true` evaluates to `false`
• `true && false` evaluates to `false`
• `true && true` is the only one that evaluates to `true`

So, for example:

``````(1 > 3) && (false);  // false
(5 < 3) && (true);  // false
(1 < 3) && (false);  // false
(1 < 3) && (true);  // true
``````

Advanced reading about `&&` - The above explanation of the `&&` operator will help you understand about 99.9% of the `&&`s you see. If this is your first time learning this stuff, feel free to move on.

However, there's a little more to the `&&` operator. What it really does, rather than evaluate both sides to a `true` or `false` is it returns the first value if it is falsey and stops evaluating the rest of the expression, OR it will return the second value if the first value is truthy.

``````true && true => true (we knew this)
4 && 5 => 5 (Because 4 is a truthy value, the && returns the second value, which is 5, a truthy value. So `if(4 && 5){...}` will pass the conditional test
0 && 5 => 0 (First value is falsey, so it returns that value immediately, and conditionals using this will fail)
"" && false => "" (empty string is also falsey; conditionals fail)
``````

This concept can be particularly useful in assuring that a function or method exists before trying to call it. Rather than typing:

``````if (person.speak !== undefined) {
person.speak();
}
``````

``````person.speak && person.speak();
``````

If `person.speak` is undefined, it will stop evaluating that expression and not evaluate the method call. If it is truthy, it will call the method from the second part of the statement.

If that didn't make any sense to you, don't worry about it. Revisit this page at a later time and it might start to click.

##### Or (`||`)

The double pipe (`||`) allows either the value on the left OR the value on the right of the `||` to evaluate to `true` in order for the whole expression to be considered `true`. As such:

• `true || true` evaluates to `true`
• `false || true` evaluates to `true`
• `true || false` evaluates to `true`
• `false || false` is the only one that evaluates to `false`

So, for example:

``````(1 > 3) || (false);  // false
(5 < 3) || (true);  // true
(1 < 3) || (false);  // true
(1 < 3) || (true);  // true
``````
##### Not (`!`)

Any expression or simple boolean can be reversed with the `!` ("not") operator. For example:

``````console.log(!true);  // false
console.log(!false);  // true
console.log(!true || false);  // false
console.log(!(1 > 3) || !true);  // ==> !false || !true ==> true || false ==> true
``````

### Order of operations

It's important to note that the logical operators will execute in a pre-determined order of operations, similar how `+`, `-`, `*`, `÷`, etc. in math have an order of operations.

There is a long list of point values associated with operations which you can find on MDN's Operator Precedence Table, but here are the ones we're most concerned with when talking about conditions:

1. Grouping using parentheses - `()`
2. Not operator - `!`
3. Logical And - `&&`
4. Logical Or - `||`

Here are some examples to illustrate the importance of understanding the order of operations.

``````!true || true;  // ==> false || true == > true
!(true || true); // ==> !(true) ==> false
!(!false && (true || false) || !(false || false));  // ==> !(true && true || !(false)) ==> !(true || false) ==> !true ==> false
``````
##### Example

In our above example about the website where we only want to allow people whose name is Felix AND who is 12 or older, we could find ourselves writing something like the following:

``````var age = parseInt(prompt("What is your age?"));
var name = prompt("What is your name?").toLowerCase();

if (age <= 12 && name === "felix") {
// Welcome!
} else {
// Go away!
}
``````

### Switch statements

If you find yourself wanting to write a long chain of `if`, `else if`, `else if`, `else if`, `else if` etc. statements, you can shorten and simplify your chain by using a `switch` statement.

`switch` looks at a variable and tests it against a number of "cases". If the variable matches the case, it executes the code inside the `case:` block. It's important to use `break` after each case unless you want it to continue checking other cases as well.

You also will always want to add a `default` case at the end to act as an `else`, in case all of the above `cases` don't match.

``````switch (mood_ring) {
case ‘blue’:
mood = ‘calm’;
break;
case ‘red’:
mood = ‘excited’;
break;
default:
}
``````

### Ternary operator

The ternary operator gives us a way to shorten a common `if(){}` block:

``````if (moodRing == "blue") {
mood = "calm";
}
``````

It works like this:

``````variableToSet = (conditionToCheck) ? <value if the condition is true> : <value if the condition is false>
``````

Using the ternary operator (`?`) we can shorten this to:

``````mood = (moodRing === "blue") ? "calm" : mood;
``````

### What's the deal with `==` vs. `===`?

First of all, as a general rule, you should always plan on using `===` instead of `==`.

Both `==` and `===` will check to make sure the value of the two operands are the same. The difference is that `===` will also check to make sure the type of the two operands are the same. `==` on the other hand will attempt to coerce the two operands into the same data type. Since this can have some strange side effects, it's always best to use `===` and be sure you're getting a correct equality.

``````// Double equals (==)
"0" == 0  // true
"" == "0" // false
0 == ""   // true

false == undefined  // false
false == null       // false
null == undefined   // true

// Triple equals (===)
"0" == 0  // false
"" == "0" // false
0 == ""   // false

false == undefined  // false
false == null       // false
null == undefined   // false
``````

As you can see, the `===` behaves more like you'd expect it to, without relying on JavaScript to do too much of your job as a developer for you. (Like making sure types are equal before comparing them).