In this lesson, we'll learn about loops in JavaScript and how to control the flow of our code!

• Learn about if/else and switch statements and contrast use-cases
• Implement while-loops and understand how to break them
• Identify the 4 components of a for-loop and their execution order
• Compare the use-cases of for and while-loops

if statements are an extremely common way to manage application logic —— what happens when, etc.

if (/* whatever's in here is true */) {
  // this code runs
}

... means run the code block if expr is truthy

if (true) {
  console.log('Hello')
}

if (1 > 0) {
  console.log('World')
}
//=> Hello
//=> World

When you need to test more than one case, you may use else if:

const favoritePet = 'cat';

if (favoritePet === 'dog') {
  console.log('Achoo!!! Im allergic to dogs.');
} else if (favoritePet === 'cat') {
  console.log('Yeah!! Cats are the best.');
} else {
  console.log(`Please don't tell me you own a ferret`);
}

//=> Yeah!! Cats are the best.

When you're comparing variables to values, make sure you're using === —— not =. If you use =, you're reassigning the variable, instead of checking it for equality.

Touch a new javascript file —— control-flow.js —— and work in that.

Let's see if you have enough money to buy a cat! Using the following terms, create an if / else if / else conditional statement:

• If yourMoney is equal to catPrice, log the message "You have just enough to buy a cat!"
• If yourMoney is more than catPrice, log the message "You can buy a cat and will have dollars left over"
• If yourMoney is less than catPrice, log the message "You cannot buy a cat. You need more dollars :("

Check your code with the following variables (Remember, you can use Node to run the file in your terminal: node control-flow.js)

const yourMoney = 50
const catPrice = 100

const yourMoney = 100
const catPrice = 100

const yourMoney = 200
const catPrice = 100

If you get stuck, talk to your neighbor and see if you can work it out.

(condition) ? ifTrue : ifFalse

JavaScript has a ternary operator for quick conditional expressions. Where an if ... else statement conditionaly runs code, a ternary is used to make an expression which returns a value conditionally. Consider the difference when distinguishing between a statement and an expression:

const age = 12

let allowed

if (age > 18) {
  allowed = 'yes'
} else {
  allowed = 'no'
}

console.log(allowed)

const age = 12

const allowed = (age > 18) ? 'yes' : 'no'

console.log(allowed)
//=> "no"

The switch statement can be used for multiple branches based on === equality:

const food = 'apple';

switch(food) {
  case 'pear':
    console.log('I like pears');
    break;
  case 'apple':
    console.log('I like apples');
    break;
  case 'orange':
    console.log('mmm... citrus');
    break;
  default:
    console.log('idk what that is');
}
//=> I like apples

In this case the switch statement compares food to each of the cases (pear and apple), and evaluates the expressions beneath them if there is a match. (Using === to evaluate equality)

The default clause is technically optional but in most cases it is good practice to include one.

Now complete the following exercise in your control-flow.js file.

Using the example above as a guide, construct a switch statement to inform us if some number n is prime.

• If it's 1, log the message '1 is actually not prime!'
• If it's 2, log the message '2 is the smallest prime!'
• If it's 3, 5, or 7, log the message: 'n is prime!' (use string interpolation to show the value of n instead of the letter "n")
• If it's 4, 6, 8, or 9, log the message: 'n is not prime :('
• Otherwise, log the message "idk if n is prime. google it, ask yourself, ask your friend."

Test your code in the terminal by running node switch-practice.js. Try it several times giving n different values to make sure each part of your switch statement is functioning properly. Be careful to match the proper syntax!

while is a loop statement that will run while a condition evaluates to truthy. WARNING if your while loop never evaluates to falsy you may be stuck in an infinite loop! Like this:

let n = 0
while (n < 50) {
  console.log(`${n} is ${n % 2 ? 'odd' : 'even'}`)
  n++
}

A simpler version of the code broken down.

let n = 0
while(n < 50) {
  if (n % 2) {
    console.log(`${n} is odd`)
  } else {
    console.log(`${n} is even`)
  }
  n++
}

note: remember that n++ is the equivolent of n = n + 1, so basically it makes n's value increase by 1 each time you loop through the code.

You can also break to exit the loop before the condition is met.

let n = 0
while (n < 50) {
  console.log(`${n} is ${n % 2 ? 'odd' : 'even'}`)
  if (n === 42) {
    break
  }
  n++
}

for loops contain 4 components:

• initialization (e.g. let i = 0;)
• test condition (e.g. i < 10;)
• final expression or incrementor (e.g. i++)
• block (e.g. console.log(i))

Notice these components all exist in our while example above. A for loop is just a specialized while loop since the pattern is so common.

// start at i = 0; continue while i < 10; add 1 to i after each iteration
for (let i = 0; i < 10; i++) {
  console.log(i);
  // do more stuff
}

What will we see when running the above snippet? What is the final value of i?

let i = 0;
while(i < 10) {
  console.log(i);
  // do more stuff

  i++;
}

We can implement something similar to a for loop with a while loop.

One of the most common ways that we'll use loops in real life is by looping through arrays.

const food = ['tacos', 'burritos', 'pizza', 'soup', 'pasta']

Now we iterate over the food array.

for(let i = 0; i < food.length; i++) {
  console.log(food[i])
}

Now for something a bit more challenging, looping through an array of objects. For example, let's say that we have the following array of wizards:

const wizards = [
  {name: "Harry Potter", house: "Gryffindor"}, 
  {name: "Lord Voldomort", house: "Slytherin"}, 
  {name: "Cedric Diggory", house: "Hufflepuff"},
  {name: "Luna Lovegood", house: "Ravenclaw"},  
  {name: "Albus Dumbledor", house: "Gryffindor"}, 
  {name: "Merlin", house: "Slytherin"}, 
  {name: "Pomona Sprout", house: "Hufflepuff"}, 
  {name: "Gilderoy Lockheart", house: "Ravenclaw"}, 
  {name: "Ron Weasley", house: "Gryffindor"}, 
  {name: "Severus Snape", house: "Slytherin"}, 
  {name: "Nymphadora Tonks", house: "Hufflepuff"}, 
  {name: "Padma Patil", house: "Ravenclaw"}, 
  {name: "Hermoine Granger", house: "Gryffindor"} 
 ]

If we wanted to print the name of each wizard, we could use a for loop to iterate through this array. To do so, we use i to correspond to the index number of each object in the array:

for(let i = 0; i < wizards.length; i++){
    console.log(wizards[i].name)
}

• When would use conditionals? What are the different ways to tackle conditional logic?
• What can we use for and while loops to accomplish?
• How do we choose between using a for or a while loop?

In this lesson, we learned about if statements, ternary operators, and using loops to control the flow of data in our code.

• if...else
• for Loops
• while Loops