Introduction to JavaScript: Control Flow

Mahendra Choudhary
Nov 30 · 8 min read

Often times we want our program to act differently based on the information supplied to it. This is known as control flow, and is an integral part of software development.

At the end of this article, you should be able to:

  • understand and be able to use different operators.
  • write control flow using if/else statements.
  • write a basic for loop.

Requirements


Learn to understand and be able to use different operators.

Undefined and Null

There are a couple of JavaScript objects that don’t really fit into any type. Those are the values undefined and null. You will get undefined when you are looking for something that does not exist like a variable that does not have a value yet. undefined simply means what you are asking for does not exist.

null is an object that we, the developers, set when we want to tell other developers that the item they are looking for exists, but there is no value associated with it. While undefined is set by the JavaScript language, null is set by the developer. If you ever receive null, know that another developer has set that value to null

One last thing to note, neither undefined nor null are strings. They are written just as they are with no quotes around them, like a Boolean.


Truthiness

The Boolean values, true and false. When using an if statement or other statements that expect a Boolean value (such as the !, NOT), and the expression given is not a Boolean value, JavaScript will do something called type coercion and transform whatever it is given into a Boolean value. This is known as truthy and falsey. Every data type has a truthiness to it. Here are some examples:


Comparison Operators

Comparison operators (> >= < <= === !==). These operators work just as they would in a math class: greater than, less than, and etc. We use these operators to evaluate two expressions. As the computer runs the code, the operator will return either a true (if the statement is true) or a false (if the statement is not true).

The “triple equals” sign ( === ) must not be confused with a single equal sign (which indicates assigning a value to a variable). The triple equal will compare everything about the two items, including type, and return if they are exactly equal or not: (Something to note: there is a “double equals” ( == ) sign which will compare two items, but it will NOT take into account their types (1 == '1' // true). Due to this, it is considered bad practice to use the double equal sign. We would like to see you always using the triple equal sign, and you will always see us using it.)

The last comparison operator we would like to introduce you to has two parts to it.

With that in mind, we can introduce the “not equals” ( !== ) sign. This will return true if the items are NOT equal to each other, in any way. This, like the triple equal sign, takes type into account.


Logical Operators

We can also combine two equality expressions and ask if either of them are true, both of them are true, or neither of them is true. To do this we will use Logical Operators.

&&

||

!

Notes About Logical Operators

A couple things to note about logical operators.

  • The expressions are evaluated in order, and the computer will skip any redundant expressions. In an && statement, if the first expression is false, the second expression will not be evaluated because BOTH expressions need to be true. Same for the || statement. If the first expression is true, the second will not be evaluated because there only needs to be one true statement to fulfill the requirements of the operator.
  • Use parentheses. As we saw in the second ! operator example, we used parentheses to evaluate what was inside of the parentheses FIRST, then applied the ! operator. We can wrap ANY expression in parentheses and it will be evaluated before evaluating the expression as a whole.

Learn to write control flow using if/else statements.

We touched on control flow in our last lesson, now we will introduce some more complexity. Things aren’t always black or white. Sometimes there is a third (or fourth, or hundredth, etc.) option.

Control Flow (continued)

To add on to if, we can also use the else if and else statements. These statements must be used with if and must come after it. These statements will be evaluated if the initial if returns false. We can think of the else if as another if statement that has been chained (we can have as many else if statements we want). Only one if or else if statement code block will be run. If at any time a statement returns true, that code will be run and the rest will be skipped:

The else statement will always come at the end of an if-else if chain, and will act as a default. If none of the expressions returned true, the else code block will be run no matter what. If any of the previous if or else if expressions are true, the else statement code block will not be run.

Why use else if?

In the above example only older than 20! will be logged even though both the if statement and else if statement were true.

In the above example the first and second if statements would console log because both of them are true.

As you can see, it will be up to you to decide if you want to have multiple actions based on your data or just one action.


Learn to write a basic for loop.

Loops

Most software runs on loops, evaluating expressions over and over again until it either returns what we are looking for, or stops after a certain time. JavaScript has two looping expressions built into it and today we will look at the first one, the “for” loop.

for Loops

In this example, we see that we initially set our counter variable to 0. The loop will run and each time it gets to the end, it will increase the counter by one. The for loop will then evaluate the conditional expression. If it is true, it will run again, but if it is false it will stop running.

The ++ operator

Infinite Loops.

Because our conditional expression will ALWAYS be true (i will never be less than 0) this loop will essentially run forever. This will break your program, and may crash your web browser, or computer.


Tutorials


JavaScript in Plain English

Learn the web's most important programming language.

Mahendra Choudhary

Written by

Full Stack Developer

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade