# Step 3: Comparison Operators and Conditionals

April 30, 2021 ## Boolean Data Type

So far, we have learned two data types: numbers and strings. In this section, we will be learning about a new data type called booleans.

A boolean is a `true` or a `false` value. Here is an example of a boolean.

``````const x = true;
``````

Here, the variable `x` has a value `true`, which is of type `boolean`.

Boolean values are generated as a result of using comparison operators.

## Comparison Operators

Comparison operators are operators that allow us to compare two values and generate a boolean value as a result. Here is a list of comparison operators:

• `>` Bigger Than
• `<` Smaller Than
• `===` Equal
• `>=` Bigger Than or Equal
• `<=` Smaller Than or Equal
• `!==` Not Equal

And here are some example usages of these Boolean operators:

``````console.log(10 > 3);
console.log(-10 < 0);
console.log("John" === "John");
console.log(10 >= 10);
console.log(10 <= 10);
console.log(42 !== 7);
``````

All of these operations would result in a `true` value.

There is also the `!` operator that inverts the value of a boolean result.

``````const myVariable = true;
console.log(!myVariable); // false
``````

In the above example, `!myVariable` would be equivalent to `false`. That is because using `!` in front of a boolean would invert the value of that boolean.

There are a couple of complexities that we need to be aware of regarding using comparison operators.

### Equality Operator vs. Strict Equality Operator

There are two kinds of equality operators in JavaScript. The equality operator (`==` or `!=`) and the strict equality operator (`===` or `!==`). We will almost always use the strict equality operator.

Equality operator can be misleading since it doesn't check the type of values that we are comparing. When using the equality operator, these two completely different values would appear to be the same:

``````console.log(10 == "10"); // true
``````

This is extremely misleading. The numeric value `10` and the string value `"10"` are nothing alike. We will not get this result if we are to use the strict equality operator.

``````console.log(10 === "10"); // false
``````

You should avoid using the equality operator like a plague and use the strict equality operator at all times. I can't remember the last time that I have used the equality operator. If we wanted to check to see if a number matches the string's value, there are other ways of going about it, like converting that number to a string or converting the string to a number (by using the `parseInt` function that we have learned about).

### Comparing Fractional Numbers

In the example below, you might expect `x` and `y` to be equivalent. They are not.

``````const x = 0.1 + 0.2;
const y = 0.3;
const z = x === y;
console.log(z); // false
``````

Computers use a binary number system to represent the values that we throw at them. Basically, everything is represented as a `0` or `1`. This results in some loss of precision when the computer stores the results of fractional number operations. This causes issues such as above, where `0.1 + 0.2` is not equivalent to `0.3`. This is a very common issue to be aware of when working with fractional numbers. There are a couple of workarounds for this issue. One is to check to see if two numbers are equivalent in the range of some threshold. Let's say the threshold for our error tolerance is `0.01` for the example above, which means that the numbers can slightly differ from each other but not more than `0.01`. Here is how we would represent this idea in code.

``````const threshold = 0.01;

const x = 0.1 + 0.2;
const y = 0.3;
const z = Math.abs(x - y) < threshold;
console.log(z);
``````

`Math.abs` is a function that converts the given input to an absolute value (meaning converts the given numeric value to a positive value). In the above example, we say that if the difference between two values is smaller than a threshold of our choice, then we accept that these two values are equivalent. They are not equivalent if their difference is greater than the threshold.

Another way of doing comparisons using fractional numbers would be to convert them to string and then compare. We haven't learned how to convert a value to a string yet, so we will not explore that option here.

## Logical Operators

Logical operators allow us to build compound statements using more than one boolean value.

Imagine I told you that you would be happy if you took care of your health AND your finances. This means that you need to take care of both your health and finances to be happy. If you didn't do either one of them, it is not going to work out. This is the logic behind the AND (`&&`) operator in JavaScript. It returns `true` if both sides of the operation are `true`.

``````let isTrue = true && true;
console.log(isTrue); // true

isTrue = 10 === 10 && 10 !== 11;
console.log(isTrue); // true

let isFalse = true && false;
console.log(isFalse); // false

isFalse = false && true;
console.log(isFalse); // false

isFalse = false && false;
console.log(isFalse); // false
``````

As we can see in the above example, both sides of the AND operator need to be `true` for the resulting operation to be `true`.

Now let's imagine I told you that you would be healthier if you improved your diet OR you started to exercise more. This means that you just need to do one of those things to see an improvement in your health. This is how the OR (`||`) operator works in JavaScript. It returns `true` as long as one of the values that we are comparing is `true`.

``````let isTrue = true || false;
console.log(isTrue); // true

isTrue = false || true;
console.log(isTrue); // true

let isFalse = false || false;
console.log(isFalse); // false
``````

## Conditional Statements

Boolean values might seem a bit useless on their own. They are great when used in conjunction with conditional statements. A conditional statement executes only if the given condition is `true`. It is skipped if the condition evaluates to `false`. This is very different from what we have been learning so far. Previously, the programs that we wrote were executed from top to bottom in a linear fashion. Using conditional statements, we can alter the flow of our program. We can skip or execute a certain part based on a condition.

An `if` statement is an example of a conditional statement. Here is how it works.

``````const myVariable = true;

if (myVariable) {
console.log("This gets displayed only if `myVariable` is `true`");
}
``````

An `if` statement consists of the `if` keyword, a condition written inside the parentheses next to it, and a body statement that is written inside curly braces. If the condition inside the parenthesis evaluates to `true` then the statement that is inside the curly braces gets executed. If not, it doesn't. Try changing the value of `myVariable` to `false` to see what happens.

We can append an `else` statement after the `if` statement.

``````const myVariable = true;

if (myVariable) {
console.log("This gets displayed only if `myVariable` is `true`");
} else {
console.log("This gets displayed if the `myVariable` is NOT `true`");
}
``````

The `else` block of the conditional statement gets executed if the `if` statement doesn't. That is if the given condition evaluates to `false`. This is called an `if-else` statement.

This is basically (very basically, that is) how a login screen works.

``````const password = "1234";

console.log("Welcome user");
} else {
}
``````

Conditional statements allow us to write extremely flexible programs because we can adjust our program's behavior based on some external input. Here, in this example, we are entering the value of the `password` ourselves, but there are more advanced ways to construct programs where we can capture the user input or fetch data into our program from other external sources.

## else if Statement

There is also a statement called `else if` that we can use alongside `if` statements. It allows us to handle multiple conditions.

Here is a program that displays the grade of a student given their test score.

``````const score = 59;

if (score >= 90) {
console.log("A");
} else if (80 <= score && score < 90) {
console.log("B");
} else if (70 <= score && score < 80) {
console.log("C");
} else if (60 <= score && score < 70) {
console.log("D");
} else {
console.log("F");
}
``````

Since this functionality can be useful on multiple occasions, we might want to wrap it inside a function for reusability.

``````function getGrade(score) {

if (score >= 90) {
} else if (80 <= score && score < 90) {
} else if (70 <= score && score < 80) {
} else if (60 <= score && score < 70) {
} else {
}

}

``````

`if` and `if-else` statements allow us to write very capable programs. We can adjust this function to handle invalid values to make it much more robust.

``````function getGrade(score) {
if (score < 0 || score > 100) {
console.log("You have entered an invalid value");
return;
}

if (score >= 90) {
} else if (80 <= score && score < 90) {
} else if (70 <= score && score < 80) {
} else if (60 <= score && score < 70) {
} else {
}

}

``````

We have updated our function to display an error message and not to return a value when provided a `score` value below `0` or above `100`. When we use the `return` statement without any value, JavaScript implicitly returns a value called `undefined`. An `undefined` is a built-in JavaScript value that represents the absence of a value.

We get the value `undefined` if we initialize a variable but don't assign a value. Or if a function doesn't return a value just like in our example.

``````let x;
console.log(x); // undefined
``````

There is another value called `null` that is similar to `undefined`. Whereas `undefined` represents an implicit absence of a value, `null` represents the explicit absence of a value.

It is like the difference between saying "I don't know what the value is" (implicit) versus "there is no value here" (explicit).

``````const x = null;
``````

Learning about `null` and `undefined` values provide a great segue for us to learn about truthy and falsy values.

## Truthy and Falsy Values

We have learned that there are two Boolean values, `true` and `false`. There are also other values in JavaScript that are not Boolean but are considered to be like `true` or `false` when evaluated in a Boolean context. Think of the number `0`. It is not a Boolean value. But if we were to use it in a conditional context it would evaluate as `false` because it is falsy. This means it is false-like but not precisely `false`.

``````const myVariable = 0;

if (myVariable) {
console.log("This would NOT get displayed since `myVariable` is `0`");
}
``````

Any non-zero number is truthy. They are true-like but not exactly `true`.

``````const myVariable = 42;

if (myVariable) {
console.log("This would get displayed since `myVariable` is not zero");
}
``````

`null`, `undefined`, `0`, empty string (`""`), and `NaN` are examples of falsy values. Everything else is a truthy value.

## Logical Operators Revisited

Previously we have learned about logical operators and their behavior. We have seen that the `&&` operator returns `true` if both of the values that it operates on are `true` or it returns `false`. This is actually only true when we are using Boolean values. But we would notice that logical operators work differently when we provide other kinds of values.

``````const x = 42 && "hello world";
console.log(x); // displays "hello world"
``````

Here is what's happening. There is this concept called short-circuit evaluation. An AND operation (an operation that uses `&&`) will short-circuit if the first (left-hand side) value is falsy. This means that it would simply evaluate to that value without looking at the rest of the operation. Otherwise, it would evaluate to the second (right-hand side) value.

An OR operation (an operation that uses `||`) will short-circuit if the first value is truthy. Otherwise, it would evaluate to the second value.

Previously I have explained as if these operators would always result in a `true` or a `false` value. That is not entirely correct. They evaluate to one of the values that are being operated on, and their behavior is determined by short-circuit evaluation.

## Summary

In this section, we have first learned about the Boolean data types of `true` and `false`. Then we have learned about comparison operators, which would result in Boolean values. We learned about some of the things that we need to be aware of when making comparisons. Like:

• Making sure to use the strict equality operator.
• Not directly comparing floating point numbers.

In addition to Boolean data types, we have also learned about two new values. These are `null` and `undefined`. They are used the signify an absence of a value.

We have the values `true` and `false`, but we have also values that are truthy and falsy. These are values that are not precisely Boolean but can be thought of as such.

We have then learned about logical operators and the concept of short-circuit evaluation.

The most important thing that we have learned about in this chapter is the conditional statements. Using `if`, `else`, and `if else` we can build programs that are much more capable than before.