Lecture: Conditionals

So far we've only made the computer do pretty simple stuff, and no matter what it always did the SAME stuff. But how does the computer handle different situations? Let's learn the if statement:

if (someConditionIsTrue) {
  console.log("The condition was true")
} else {
  console.log("The condition was false")
}

You read it like you would english: "If someConditionIsTrue, execute the code in the subsequent block. Else if it's not true execute the code in the else block."

Let's try it out:

Paste the following code into repl.it, and then re-size the window and click run. What happens?

let bankBalance = 900;
if (bankBalance > 1000) {
  console.log('Treat yo self!')
} else {
  console.log('Keep saving.')
}

Else blocks are not required, it's ok to have an if statement without an else block.

if (someConditionIsTrue) {
  console.log("The condition was true")
}
console.log("This code will ALWAYS run regardless of whether the condition is true or false")

So what is the "condition" though? It's actually a new type called a boolean. A boolean can have only TWO possible values: true or false. Most of the time booleans are built out of equality and inequality statements. As always w3schools has a great reference on booleans that's worth a read. Let's look at some examples:

const someBoolean = true
const aDifferentBoolean = false
const isZeroEqualToZero = 0 == 0
const isZeroEqualToOne = 0 == 1
const isZeroGreaterThanZero = 0 > 0
const isZeroLessThanOne = 0 < 1
// Try logging these different values to the console.
// You should know which ones are true and which ones are false!
console.log(isZeroLessThanOne)

Here are a list of the most common ways booleans are made:

Equals	`==`
Not Equals	`!=`
Greater than	`>`
Less than	`<`
Greater than or equal to	`>=`
Less than or equal to	`<=`

Ok let's combine the boolean type with the if statement to see some real code!

let userName = "Benno"

if (userName == "Benno") {
  console.log("Welcome Benno!")
} else {
  console.log("Hi Guest. Have you seen Benno?")
}

An important strategy is to chain if/else statements. This allows you to conditionally evaluate the else block on whatever condition you want. Let's look at an example:

let userAge = 29

if (userAge >= 21) {
  // userAge is 21 or higher
  console.log("Let's party tonight")
} else if (userAge >= 18) {
  // userAge is 18 or higher but less than 21
  console.log("Let's party responsibly tonight")
} else if (userAge >= 13) {
  // userAge is 13 or higher but less than 18
  console.log("Let's have a LAN party tonight")
} else {
  // userAge is less than 13
  console.log("Time for bed, isn't it past your bedtime?")
}

(Optional) Challenge: write the same logic seen above, but going the other way. In other words, start with if (userAge < 13 ) { ... } and handle all the cases with if/else ifelse statements. You should get the same output the code above gets for var userAge = 29.

Boolean Operators

Another important tool are the boolean operators &&, ||, and ! which are AND, OR, and NOT respectively. Here is a nice guide to visualize these operators.

if (userAge >= 25 && userAge < 70) {
  console.log("Perfect age to rent a car")
}
if (userAge == 18 || userAge == 21) {
  console.log("Congrats on the big milestone year!")
}

Intro to Programming with JavaScript

Lecture: Conditionals

Let's try it out:

Boolean Operators