← Learn Javascript

Control Flow

Comparison and logical operators, conditional statements

slides | md

Contents

  1. Introduction
  2. Operators 5 min
  3. Conditions 5 min
  4. Combining conditionals with logical operators 5 min
  5. Next steps
  6. Exercises
  7. References

Introduction

Review the following sections and perform the activities on your own or with your group.

Perform the task(s) when you see this 👉 emoji

Learning Objectives

Students who complete this module will be able to:

  • Demonstrate how to use arithmetic and assignment operators.
  • Explain how conditional statements can control the flow of a program
  • Use Javascript to create a simple gradebook using conditional statements
Homework

Operators

Let's review some of the operators we've seen thus far.

Arithmetic operators

Perform addition +, subtraction -, multiplication *, division / on numbers

1 + 1 // -> 2
3.14 * 2 // -> 6.28

Increment ++ or decrement -- a value

let count = 1;
count ++; // -> 2
count --; // -> 1

Arithmetic operators

Modulus % to return the remainder from a division operation

5 % 2 = 1

The + operator is also used to concatenate (add) strings

"Hello" + " world!" // -> "Hello world!"

Assignment operators

Perform an expression and then assign the value.

let apples = 100;

These operators can be used to add and assign number values ...

apples ++; // -> 101
apples += 10; // -> 111

... or to (convert and) concatenate and assign strings.

apples += " apples"; // -> "111 apples"

Comparison operators

A double == compares values only then returns true or false. If operands of different types are used, Javascript will first convert to the type on the left and compare.

1 == 1 // -> true
1 == "1" // -> true
1 != 2  // -> true

The triple === checks value and type

1 === "1" // -> false

Greater than / greater than or equal to

2 > 1 // -> true
3 <= 2 // -> false

Conditions

Control flow determines which code is executed and the order in which it will happen. To illustrate this, first consider the default behavior of Javascript.

As the program runs, it will execute the instructions it finds, line by line, until the end.

let apples = 0;
apples = apples + 10;
console.log(`We have ${apples} apples!`);

Conditions

However, this is not very interesting. Instead, you will want your code to perform different actions depending on the state of variables in your program. Use conditionals to do this.

In the above diagram, an if statement is used to either run the statement block, or not, depending on whether the condition is true or false.

Conditions

Here is the syntax for a basic if statement.

In this case, if apples is a number greater than 3, then the message will be logged to the console.

Conditions

We can use an else to execute different code, if the first condition is not met.

Conditions

Here is else in practice:

let apples = 2;
if (apples > 3) {
	console.log("we can make pie!")
} else {
	console.log("we need more apples")
}

Conditions

We can use if if/else and else together like so:

let apples = 2;
if (apples > 5) {
	console.log("we can make cider!")
} else if (apples > 3) {
	console.log("we can make pie!")
} else {
	console.log("we need more apples")
}

Combining conditionals with logical operators

Finally, we can combine conditional statements with logical operators to account for more than one variable in a program. Logical operators are used to determine how to combine true and false values using logical and &&, or ||, not !.

Use && ("and") to test if both expressions are true

(1 < 2 && 3 > 4) // -> false

Combining conditionals with logical operators

Use || ("or") to test if either expression is true

(1 < 2 || 3 > 4) // -> true

Use ! ("not") to test if the expression is not true

!true // -> false
!false // -> true
!(1 < 2) // -> false

Combining conditionals with logical operators

And, putting it all together, evaluate more than one condition in an if, if else statement

let apples = 2, // a comma separates multiple variable declarations
    blueberries = 4;

if (apples >= 2 && blueberries >= 4) {
	console.log("we can make fruit salad")
} else if (apples > 3 || blueberries > 2) {
	console.log("we can make pie!")
} else {
	console.log("we need more fruit")
}

Next steps

  1. Try the Exercises below.
  2. Start working on homework listed in the schedule.
  3. Continue to the next lesson: Functions slides | md

Exercises

👉 Try it out

  1. Lottery v.1 - Build your first game!
  2. Gradebook - Code a gradebook app using conditions, functions, and jquery.
  3. Revisit this lamp demo to explore how it uses conditions.

References

Presentation comments ...