DEV Community

Code The Web profile image Ethan
Ethan for Code The Web

Posted on • Originally published at codetheweb.blog on

All about IF statements and booleans in JavaScript!

#javascript #webdev #tutorial #beginners

All about IF statements and booleans in JavaScript!

If statements are another core part of JavaScript: they let you control what code is actually executed, based on comparing values and/or variables. I'll also teach you about all the cool stuff that you can do with booleans! Read on below...

Getting started!

First of all, I want to encourage you to follow along in this article! Let's start by making a new HTML file with a <script> tag in it:

<!DOCTYPE html>
<html>
    <head>
        <title>If statements are awesome!</title>
    </head>
    <body>
        <h1>JavaScript :)</h1>
        <script>
            // Our script will go here!
        </script>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Once that's done, open it up in your web browser and you're ready to go! (don't forget to save and reload the page every time you make a change)

What is an if statement?

In essence, an if statement simply executes some code if a value is equivalent to true.

Terminology

In this article, I'll be using the terms 'brackets' and 'curly brackets'. When I say brackets I mean these: ( ) And when I say curly brackets I mean these: { }. The only reason that I am saying this is because I know that depending on which part of the world you come from, you may have different names for your square, curly and normal brackets (eg. parentheses).

The if statement syntax

Here's what a simple if statement looks like:

if (true) {
    alert('Yay!');
}
Enter fullscreen mode Exit fullscreen mode

Let's have a look at what's going on here. In essence, we're simply saying if the stuff inside the brackets is equivalent to true, execute the code inside the curly brackets. Note here that I said equivalent to true. This doesn't mean that the text between the brackets literally has to say true. It just means that it needs to be a statement that is true. For example: 1 + 3 == 4 is true.

Don't worry, I'll get into how this works later (I'll be speaking more about JavaScript math in a later article). It's basically just 1 + 3 = 4. 1 + 3 does equal 4, so it is equivalent to true. Therefore, if we put this inside the brackets our code will run! Let's try it out. Put the following code in your <script> tag, then reload the page:

if (1 + 3 == 4) {
    alert('Yay!');
}
Enter fullscreen mode Exit fullscreen mode

Now, let's try and make it so that the alert doesn't run. We would do this by making the statement inside the brackets equivalent to false:

if (1 + 3 == 5) {
    alert('Yay!');
}
Enter fullscreen mode Exit fullscreen mode

(your high school math teacher wouldn't be proud)

Now, because the statement in the brackets is false, the code inside the curly brackets will not run! Try it out yourself... It will no longer alert "Yay!"

You have now learned the basic if statement syntax!

Boolean operators

It's time to take a bit of a closer look at what gives us true and what gives us false.

Let's use the statement from above as an example:

1 + 3 == 4 /* Returns true */
Enter fullscreen mode Exit fullscreen mode

Here, we're using the double equals sign (==) to compare the two sides: 1 + 3 and 4. This comparison sign says is saying "if they are equal, then return true". But we can compare in other ways as well! For example:

1 + 3 != 4 /* Returns false */
Enter fullscreen mode Exit fullscreen mode

Here, we're telling the computer to return true if 1 + 3 is not equal to 4. 1 + 3 is obviously equal to 4, so it returns false.

There are a few other comparisons that we can use - here is a list of the basic comparison signs:

Sign Returns true if...
== Both sides are equal
!= Both sides are not equal
< The left side is less than the right side
> The left side is greater than the right side
<= The left side is less than or equal to the right side
>= The left side is greater than or equal to the right side

Let's try a few of them out... Challenge Time!

Question 1: Alert "Not fake news!" if 4 is less than 410.

if (4 < 410) {
    alert('Not fake news!');
}
Enter fullscreen mode Exit fullscreen mode

Question 2: Alert "5 is the greatest!" if 5 is greater 6.

if (5 > 6) {
    alert('5 is the greatest!');
}
Enter fullscreen mode Exit fullscreen mode

Question 3: Alert "JavaScript is awesome!" if 3 is less than or equal to 3.

if (3 <= 3) {
    alert('JavaScript is awesome!');
}
Enter fullscreen mode Exit fullscreen mode

Multiple true/false statements

What if we want to combine multiple statements? For example, what if we want to say if 3 + 5 equals 8 and 2 + 2 equals 4? We have two main ways of combining statements like the one above: and and or. And is simply &&, and or is simply || (that's 2x the key with the vertical line on it, usually it will be SHIFT + backslash).

Here's how && (and) works:

true && true /* Returns true */
Enter fullscreen mode Exit fullscreen mode 
true && false /* Returns false */
Enter fullscreen mode Exit fullscreen mode 
false && false /* Returns false */
Enter fullscreen mode Exit fullscreen mode

And here's how || (or) works:

true || true /* Returns true */
Enter fullscreen mode Exit fullscreen mode 
true || false /* Returns true */
Enter fullscreen mode Exit fullscreen mode 
false || false /* Returns false */
Enter fullscreen mode Exit fullscreen mode

It's important to not here that true || true is equal to true, not false. This is because in JavaScript, or actually means and or. Don't ask me why, programming languages sometimes have weird things like that.

Now, let's substitute in a few real statements instead of just true and false. Here's an example:

(65 > 25) || (5 + 1 == 5) /* Returns true */
Enter fullscreen mode Exit fullscreen mode

You don't need to have the brackets, but I've put them in brackets just to make it a bit clearer (you are allowed to do that in JavaScript). As you can see, the code above is simply this:

true || false /* Returns true */
Enter fullscreen mode Exit fullscreen mode

The only difference is that true has been replaced with 65 > 25 which is equivalent to true, and similarly false has been replaced with 5 + 1 == 5 which is equivalent to false.

Your turn to try! See if you can complete the following tasks:

Question 1: Alert "The Universe is not broken" if 5 is equal to 5 and 3 is equal to 3.

if (5 == 5 && 3 == 3) {
    alert('The Universe is not broken');
}
Enter fullscreen mode Exit fullscreen mode

Question 2: Alert "At least one of the statements is correct" if 1 plus 2 equals 4 or 1 plus 2 equals 3.

if (1 + 2 == 4 || 1 + 2 == 3) {
    alert('At least one of the statements is correct');
}
Enter fullscreen mode Exit fullscreen mode

Question 3: Alert "I am such a rebel" if 5 plus 5 is not equal to 10 or 2 plus 4 is greater than or equal to 7.

if (5 + 5 != 10 || 2 + 4 >= 7) {
    alert('I am such a rebel');
}
Enter fullscreen mode Exit fullscreen mode

Question 4: Alert "42 is between 21 and 47" if 42 is greater than 21 and 42 is less than 47.

if (42 > 21 && 42 < 47) {
    alert('42 is between 21 and 47');
}
Enter fullscreen mode Exit fullscreen mode

Woo! Hopefully, you did okay 😉

One more thing on boolean operators...

There's one final super-handy trick that you should know about booleans in JavaScript... By putting a single exclamation mark before a statement, you reverse the boolean. For example, !true would equal false and !false will equal true.

If putting the exclamation before a statement with spaces or symbols in between (eg. 1 + 2 == 3 as supposed to true), don't forget to surround it with brackets! This ensures that the exclamation mark works for the whole statement. Here's an example:

if( !(5 + 2 < 3) && 5 + 6 == 11) {
    alert('Woo!');
}
Enter fullscreen mode Exit fullscreen mode

As you can see, the 5 + 2 < 3 gets wrapped in brackets so that the exclamation mark applies to all of it.

It's worth noting that in the example above, we didn't really need the exclamation mark in the first place - !(5 + 2 < 3) is the same as 5 + 2 >= 3. However, it is still useful to know about this feature and can come in handy when making more complex statements.

...Else?

We can also give our if statement an else, which will run if the code inside the first set of curly brackets doesn't run - in other words, if the statement inside the normal brackets is false. Here's what it looks like:

if ( /* some statement... */ ) {
    /* some code to be run if that statement is true */
} else {
    /* some code to be run if that statement is not true */
}
Enter fullscreen mode Exit fullscreen mode

Try it out! Write some code that will alert "2 is less than 1" if 2 is less than 1 and will alert "2 is not less than 1" otherwise...

if (2 < 1) {
    alert('2 is less than 1');
} else {
    alert('2 is not less than 1');
}
Enter fullscreen mode Exit fullscreen mode

There we go! Else statements are that simple! They simply run if the first set of curly brackets doesn't run.

NOTE: It is very important that the else comes straight after the end of the if, with no other code in between.

Else if

Wait, it could get even more confusing? Sort of. Here's what an if statement looks like with both an else if and an else:

if ( /* some statement... */ ) {
    /* some code to be run if that statement is true */
} else if ( /* another statement... */ ) {
    /* some code to be run if the first statement is false and the else if statement is true */
} else {
    /* some code to be run if nothing has been run yet */
}
Enter fullscreen mode Exit fullscreen mode

This may look confusing at first. However, let's pretend we're the computer and look at it from the computer's point of view.

First of all, we have an if statement. If the stuff inside the brackets is true, we execute the stuff in its set of curly and stop. If it is not true, we move on to the else if. If the stuff inside that set of brackets is true, we run the stuff in its set of curly brackets and stop. Finally, if we are still going and nothing has been true yet, we execute the stuff in the else's pair of curly brackets.

Okay, you can stop being a computer now.

Try doing one of these yourself - we'll use the example from before:

if (2 < 1) {
    alert('2 is less than 1');
} else {
    alert('2 is not less than 1');
}
Enter fullscreen mode Exit fullscreen mode

Now, we want it to alert "2 is equal to 1" if 2 == 1, otherwise alert "2 is less than 1" if 2 < 1 and alert "2 is greater than 1" if none of the others are true. Have a go!

if(2 == 1) {
    alert('2 is equal to 1');
} else if (2 < 1) {
    alert('2 is less than 1');
} else {
    alert('2 is greater than 1');
}
Enter fullscreen mode Exit fullscreen mode

Here, the computer would evaluate 2 == 1 - this is false, so we move on to the next statement - our else if, 2 < 1. This is again false, so we move on to the else and execute the code inside of that set of curly brackets: alert('2 is greater than 1').

Extension:

  1. Make a script where the if code runs, one where the else if code runs and one where the else code runs.
  2. You can have multiple else if's in an if / else if / else statement!! Try making one like the example below: 
if (1 == 5) {
    alert('1 is 5');
} else if (1 == 4) {
    alert('1 is 4');
} else if (1 == 3) {
    alert('1 is 3');
} else {
    alert('None of those were correct!');
}
Enter fullscreen mode Exit fullscreen mode

Why does any of this matter?

In this article, I mainly used numbers to illustrate how if statements work more clearly. However, once we put variables in our if statements instead of just set values, they become a super-useful tool and one of the core parts of JavaScript!

Conclusion

Woo! That was intense 🔥 🔥

I hope you learned a lot today, and it helped you in your quest to learn JavaScript! If it was helpful, I'd really appreciate it if you shared this article or signed up to the newsletter to receive new posts fresh in your inbox!

Also, I'd really appreciate it if you bought me a coffee ☕ - this article is over 2,500 words and has taken over 2.5 hours to write! And c'mon, it's only a few bucks. That said, I don't want you to feel like you have to. In fact, go ahead and don't. Be a rebel. I won't get offended and will love you all the same. I'm perfectly happy giving my content away free - otherwise, you would be paying to read this right now! 😉 🤑

Okay, so that's it for today! Don't forget to head to the comments if you have any questions or feedback.

Next time, I'll be writing about some basic math in JavaScript. I'll be talking about stuff like multiplication, rounding, square roots and more - way beyond the simple 1 + 2 that we learned today! See you next time 😉

P.S. Tomorrow marks 5 months since my first article on Code The Web! 🎉 🎉 In that time, I've written nearly 50,000 words and 30 articles. I'm still really enjoying blogging, creating content and sharing my knowledge with Y'all, and love the chats that I have with subscribers and other members of the community. Keep on being awesome, and if you wanna chat then feel free to contact me!

(and if ya wanna say thanks, I wouldn't mind a coffee 😉 ☕)

Want more posts like this? Sign up to my newsletter.

I've worked hard on these tutorials and as of now do not make any money on them, so I'd really appreciate if you signed up ;)

This article was originally published at Code The Web, a fun and easy-to-understand blog to help you learn web development 🚀
Learn: HTML | CSS | JavaScript

Top comments (0)

Read next

rawas_aditya profile image

Understanding the Barrel Pattern in JavaScript/TypeScript

Aditya Rawas -

jetthoughts-dev profile image

How to Find Your Next Startup Idea: Lessons from Y Combinator

JetThoughts Dev -

suzuki0430 profile image

Simplify Environment Variable Management with GitHub Environments

Atsushi Suzuki -

abhay_yt_52a8e72b213be229 profile image

Unlocking the Power of Web Components and Custom Elements for Reusable UI Design

Abhay Singh Kathayat -