const - JS | lectureJavaScript Fundamentals 1

So far, we've only used comparison operators to take decisions with if/else statements. Now, imagine that we want to check if two values are actually equal. For that, we have different equality operators. Let's consider an example where we have an if statement which will log to the console that a person has received one free bottle of milk only if the number of articles bought is exactly 12.

const articlesBought = 12
/**
 * The if control structure is connected to the one statement that follows them; if
 * you want to have them connected to more than one statement, you use the block
 * statement ({...}) to do that.
*/
if(articlesBought === 12) console.log('Jacob has reached retirement age!')

To check that it is exactly 18we use the triple equals ( === ). If you execute this code, we will get the expected output and nothing if we change the value of articlesBought. Let's try to understand how this equality operator works.

Just like the comparison operator this operator ( === ) will return a true or false value ( A boolean value ). The only difference is that in this case, true will only be the result of this operation if both sides are exactly the same.

Besides the triple equals, we also have the double equals ( == ). The difference is that the triple equals is called the strict equality operator. It is strict because it does not perform type coercion. It only returns true when both values are exactly the same.

There is also the loose equality operator, which is the double equals. The loose equality operator actually does type coercion.

/**
 * Double equals does type coercion
*/
console.log('18' == 18) // Result ==> true

/**
 * triple equals does not perform type coercion.
 * 18 the string is not equal to 18 the number and JavaScript does not convert them
 * for us
*/
console.log('18' === 18) // Result ==> false

I hope it isn't too confusing because it is actually quite a confusing topic in JavaScript. Confusing because this loose equality operator is full of really weird rules and behaviors .i.e. if we use the double equals, it can introduce many hard-to-find bugs into our code. As a general rule for clean code and best practice, avoid this loose equality operator as much as you can. When comparing values, always use strict equality.

This is an advice given by most JavaScript developers. It is a good rule for sure, even if we actually need type conversion. In such a case, it's better to convert the type manually before the comparison than relying on the double equals operator. In short, always default to the triple equals operator.

There is a pretty simple way I want to show you on how to get a value from the web page using JavaScript. We can do that by using the prompt function. We will learn what functions are later. Here is how it works :

prompt('What is your age ?')

On loading this script, you will get a prompt window, and in the provided input area, you can enter anything and hit return or enter. Basically, the prompt function will create a value. In this case, the number we are going to enter. Since we need to store the provided age, we can just write something like this :

const age = prompt('What is your age ?')

It is in this age variable that we are going to store the provided value. Just try to log the age variable to see the number you entered.

const age = prompt('What is your age ?')
console.log(age)

// You can check the type if you wish
console.log(typeof age)

Now we are just going to make a simple check to see if the user has reached 30 years old.

// Loose equality check
if(age == 30) { // Same as '30' == 30
    console.log("You've reached 30 years old")
}

If we try this, it will, of course, work because we used the double equals ( loose equality operator ) in the condition which does type coercion. However, if we use the triple equals ( strict equality operator ), it won't work ( Nothing will appear in the console ). I guess by why you understand why.

To make this work with the triple equals, we have to convert the value receive from the prompt to a number

const age = Number(prompt('What is your age ?'))

If we now try to execute our script one more time, everything should work as expected.

The next cool stuff I will like to show you is that we can actually add more conditions to an if/else statement. So far, we've been using if/else; however, we can also add an else if block. Here is what I mean :

// Strict equality check
if(age === 30) {
    console.log("You've reached 30 years old")
} else if (age === 25) {    console.log("You're left with 5 years before 30")
}

What will happen is that JavaScript will check if the age is 30; if t's not, it will, of course, go to the next block ( else if ) and check the condition. If the age is 25, it will log the block message. You can, of course, add an else block at the end that will be executed in case the two previous conditions didn't work. You can add as many else if blocks as you want.

To finish, there is also an operator for different ( Not equal operator ). Just as the equal operator, there is a strict ( !== ) and loose ( != ) version of the different operator. Just as before, always use the strict version.

if(age !== 30) {
    console.log("You've not yet reached 30 years old")
}