JavaScript Loops & Conditionals

What is a Loop?

A loop is just what it sounds like: a structure that repeats the same code. This can be used to do any of the following things:

There are several different kinds of loops, but the two we will focus on are the for loop and the while loop. Copy the following examples into your script and observe the result:

for (var i = 0; i < 10; i++) {

  console.log(i);

}

var i = 0;

while (i < 10) {

  console.log(i);

  i++;

}

As you can see, both loops will execute (iterate) 10 times, print the value of the variable "i" and then increment that variable by one. We never want to repeat the same code indefinitely, because it will cause the program to hang or even crash. This is why we need conditionals.

What is a Conditional?

A conditional is a statement that tests whether or not something is true. This lets us execute the appropriate code depending on the result. In the previous examples we tested the value of the variable "i" and then determined whether or not to iterate through the loop.

The conditional in the code above is i < 10 and it compares the value of the variable "i" to the value 10 using the < operator. When we're not in a loop, we test a conditional statement using the if keyword.

Here's a list of the conditional operators and examples of how we can use them:

Operator Description Example
== Equal to if (age == 100) {
  console.log("You are 100 years old.");
}
!= Not equal to if (x != y) {
  console.log("x and y are not equal in value.");
}
< Less than if (age < 18) {
  console.log("You aren't allowed to vote.");
}
> Greater than if (age > 100) {
  console.log("You are older than 100!");
}
<= Less than or equal to if (numberOfToppings <= 2) {
  console.log("Your pizza 2 or fewer toppings.");
}
>= Greater than or equal to if (accountBalance >= 1000000) {
  console.log("You are rich.");
}

Try writing code that compare various variables and then runs code depending on the result.

Boolean Values

Recall from the previous lesson on variables that boolean variables have a value of either true or false. Conditionals evaluate expressions as either true or false, so we can pass in boolean variables or values to manipulate the result. Copy the following code to your document and observe the result:

var loopFlag = true;

var i = 1000;

while (loopFlag == true) {

  console.log(i);

  i = i - 100;

  if (i <= 500) {

    loopFlag = false;

  }

}

This code combines a loop and an if statement, evaluating both the numerical value of "i" and the boolean value of "loopFlag".

Logical Operators

We can use logical operators to test multiple conditions in the line or invert a boolean value. Here's are the logical operators:

Operator Description Example
&& And if (x > 1 && x < 10) {
 console.log("x is greater than 1 and less than 10.");
}
|| Or if (x < 0 || x > 100) {
 console.log("x is less than 0 or greater than 100");
}
! Not if (!coolFlag) {
 console.log("You are cool... Not!");
}

Try writing your own code that uses logical operators to evaluate whether or not someone's age is both above 18 and below 65, then prints a message indicating the person's age.

Play around with loops and conditionals until you have a firm grasp of these concepts.

Continue to Next Lesson »