For Statements

Back

Learning Goals

  • Explain the concept of a loop
  • Implement syntax for for statements for a variety of situations, including looping with an Array

Vocabulary

  • code block
  • condition
  • for statement
  • initialization

for statement

Watch this video to see an explanation of the code snippet shown below.

for (var i = 0; i < 4; i++) {
  console.log(i);
}

// --> 0
// --> 1
// --> 2
// --> 3

Refer to this outline while reading the explanation below.

for ([initialization]; [condition]; [final-expression]) {
  [statement]
}
  • A for statement creates a loop. This provides the opportunity to run one line of code many times.
  • initialization: this initializes a counter variable that can keep track of how many times the loop has run. This expression is evaluated one time - before the loop begins
  • condition: this is evaluated before each loop iteration. If condition evaluates to true, the code in the loop runs. If it evaluates to false, the loop ends.
  • final-expression: this is evaluated after each loop iteration. It is usually used to increment the counter variable. If nothing ever changes in regards to the condition, the loop will run infinitely.
  • statement: this executes every time the condition evaluates to true. Almost always, it is wrapped in curly braces {}, making it a code block. As many lines of code as neccesary can be written inside the code block.

Common Questions

  • Why is the counter variable named i in most examples I see? Any valid JavaScript variable name can be used, but i is a convention in for loops, and it stands for index.
  • Are these semi-colons really necessary? Can I use commas instead? Use of semi-colons to separate the three expressions provided to the for statement is mandatory.


Practice

Writing Code

For these tasks, utilize your notes but do not, under any circumstance, copy-and-paste code. It's recommended you write the code in a new replit file.

  • Challenge #1: Write code that will print out the numbers 12-18.


Loops and Arrays

Many times, we use for statements to loop through Arrays and do something to or with each element in an Array. The following code snippet models an example:

var fruits = ['apples', 'oranges', 'bananas'];

for (var i = 0; i < fruits.length; i++) {
  console.log("I have some " + fruits[i]);
}

Investigating Code

For this task, fork this replit and then work through the guided exercise below:

  • Print to the console fruits.length and notice the output, and try to make sense of where that came from. Keep what you learned by doing that in mind, keep or delete that code, and continue.
  • Change fruits.length to 3. Re-run the code - has the output changed?
  • Change fruits[i] to [i]. Re-run the code - has the output changed? Revert the changes with the keyboard shortcut cmd + z.
  • Change fruits[i] to fruits. Re-run the code - has the output changed? Revert the changes with the keyboard shortcut cmd + z.

If you have questions about how any of those exercises worked, use Google.


Code Challenge

Code Challenge

Print only the numbers from the following Array that are greater than 10:

var numbers = [10, 11, 7, 19, 4, 52, 89, 9, 12, 10]

Hint: You will need to combine what you learned about for statements today with your prior knowledge of conditionals to solve this challenge!


Common Misconceptions

  • An Array is not required when writing a for statement. You saw this demonstrated in the first part of class! Because Arrays are so commonly used in for statements, sometimes we forget it's possible.
  • for statements are not magically connected to Arrays; when code "loops through an Array" that is becuase the length of the Array is part of the condition, and the Array is (most likely) called in the code block.


Practice

Use a for statement to solve each problem. You can do this work in the place that works best for you - Dev Tools Console, a file in VS Code, or an online editor.

Utilize a for statement to print out the numbers 3-14.


Print the square of each number:

var numbers = [2, 4, 6, 8, 10, 12]


Print each String, but make each String all lowercase:

var words = ["sUnNy", "BeAcH", "wAvEs", "ReLaX"]


Print out only names that begin with "P":

var names = ["Pilar", "Petunia", "Pamela", "Tan", "Amanda", "Phil"]


Print out every odd number between 0 and 100. Do NOT print any even numbers, and do NOT create an Array to help you do this.


Additional Practice

This practice work is encouraged, but not required.

Follow the directions in the README of this GitHub repository.





Back