Conditionals

Back

Learning Goals

  • Use comparison and logical operators
  • Write if/else if/else statements for conditional logic

Vocabulary

  • comparison operators
  • conditionals
  • if statements
  • logical operators

Comparison Operators

This will connect to Booleans, which you learned about in the Data Types lesson.

Conditional statements, or conditionals, are JavaScript statements that evaluate to true or false. The most common operators used for conditions are comparison operators, which compare two values. The JavaScript comparison operators are:

  • === (strictly equal)
  • !== (not strictly equal)
  • > (greater than)
  • >= (greater than or equal to)
  • < (less than)
  • <= (less than or equal to)

Comparison operators are used to compare values of the same data type. The code snippet that follows, models the syntax and the comments explain what the code does:

// Does the Number 5 have the exact same value as the Number 5? 
5 === 5
// --> true

// Is Number 5 less than the Number 3?
5 < 3
// --> false

var age = 18;
// Is the age greater than 12?
age > 12
// --> true

// reassign age variable to 9
age = 9
// Is the age greater than 12?
age > 12
// --> false

Equality vs. Assignment

The most common mistake people encounter when writing conditional statements is related to the difference between = and ===.

  • = is an assignment. It instructs, "take the value on the right side and store it into whatever is on the left side" – it’s telling, not asking.
  • === is a question. It asks, "is the value on the right the exact same as the value on the left?" – it’s asking, not telling.

Optional: Read more about comparison operators.


Comparisons

Complete the following work in the Dev Tools Console:

  • Check if 3 is less than or equal to 6.
  • Check if "T" is equal to "t".
  • Check if "P" is equal to " P".
  • Check if 10 is not equal to 10.
  • Declare a variable that store your name in a String.
  • Check if the length of your name is greater than or equal to 10. Not sure how to do that programmatically? Google!


For the remaining practice activities in this assignment, you can use the Dev Tools Console, create a JavaScript file in your Terminal and edit it in VS Code, or use an online IDE such as replit - it’s your preference!

If Statements

If statements are the most common form of conditionals. The logic of an if statement in JavaScript follows the same logic in other programming languages.

if

All of our conditional branches will begin with the keyword if, followed by a condition in parenthesis, then an opening curly bracket {. To communicate to the JavaScript program that the if statement should end, the closing curly bracket } must be used. Any code written in between the curly brackets will run if the condition evaluates to true.

if (condition) {
  // code to execute if condition evaluates to true
}

The following example checks if a store is open, and prints out a statement if the store is indeed open:

var isOpen = true;

if (isOpen === true) {
  console.log("Let's go!");
}

Try It: if statements

Define an age variable and assign it to a Number. Then, write code that will print out the String "Welcome to the Website" only if the user is 21 or older.


else

In the previous exercises, when the condition evaluates to false, we don’t see any output. In order to have a default response that runs when the condition is false, we need an else statement. Here’s an example with the isOpen variable for the store.

var isOpen = true;

if (isOpen === true) {
  console.log("Let's go!");
} else {
  console.log("Oops. Looks like that store is closed now.");
}

Try It: else statements

Go back to your previous exercise with the age variable. Use an else statement that prints out a different message if the user is not 21 or older.


else if

Use the keywords else if to create more branches with additional conditions to check.

if (condition1) {
  // code to execute if above condition1 evaluates to true
} else if (condition2) {
  // code to execute if above condition2 evaluates to true
} else if (condition3) {
  // code to execute if above condition3 evaluates to true
} else {
  // default code to execute if none of the other conditions evaluate to true
}

Notice that code inside the else statement will only run when none of the previous conditions evaluate to true.

Try It: else if statements

Continue building on the previous work you've done with the age variable. Write code that will print out the String "Welcome to the Website" only if the user is 21 or older. If the user is under the age of 2, print out "How are you even on this device?". If the user is any other age, print out "You aren't quite old enough to visit, sorry!".


Optional: Read the Conditionals section from Pluralsight for a different explanation.


More Practice

  • Declare a variable that stores your name in a String.
  • Write an if/else statement - if your name is "Oscar", print "Hello, Oscar!". If not, print "Nice to meet you, Stranger!".
  • Challenge: Use string interpolation to interpolate any non-Oscar name instead of the word "Stranger".

Logical Operators

There are three logical operators in JavaScript; we will learn two today:

  • && or and
  • || or or

&& or and

This logical operator will check two values, and both must be true in order for it to return true. Examples follow:

var age = 34;
var time = 2.05;

age < 40 && time < 3.0
// true (both meet requirement)

age < 30 && time < 3.0
// false (age is not less than 30)

age < 40 && time < 2.0
// false (time is not less than 2.0)

age < 30 && time < 2.0
// false (neither meet requirement)

|| or or

This logical operator will check two values, and one or both must be true in order for it to return true. Examples follow:

var age = 34;
var time = 2.05;

age < 40 || time < 3.0
// true (both meet requirement)

age < 30 || time < 3.0
// true (time meets requirement)

age < 40 || time < 2.0
// true (age meets requirement)

age < 30 || time < 2.0
// false (neither meet requirement)

Logical Operators

Complete the following work in the Dev Tools Console:

  • Declare two variables - one that stores your age and another person's age.
  • Check if both ages are under 100.
  • Check if at least one age is under 78.
  • Check if your age is over 18 and the other age is under 60.
  • Check if your age is over 21 or if the other age is over 25.
  • Check if your age is under 20 or if the other age is over 40.

Now that you know about logical operators and if statements, let’s combine that new knowledge to complete a final exercise.

More Practice: Logical Operators with Conditions

  • Declare a variable that stores a password.
  • In order for a password to be valid, it needs to have 8 characters or more and include the symbol #.
  • Use logical operators and conditions to give the user feedback based on their password.
  • If the user enters a password that is both 8 characters or more and includes the symbol #, print the statement, "Got it. Your password is: XXXXXXXX" using interpolation to confirm their password.


Check For Understanding

Follow the directions in the README of this GitHub repository, and submit your fork in the submission form.





Back