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

Warm-Up

Write 1-2 sentences to explain the code snippet below, using as many technical vocabulary terms as possible.

var emails = [
  "kaitlyn@turing.edu",
  "justina@turing.edu",
  "amy@turing.edu",
  "launa@turing.edu",
  "nikki@turing.edu",
  "naomi@turing.edu"
];

Discovery

Work through the activity that follows to practice reading unfamiliar code and working to make sense of it.

Reading a for loop

  • Open this replit and click "fork".
  • Run the code in the replit. Read through the code for each for statement and identify the portion of the output that belongs with it. What do you notice? Work to identify which piece of the code corresponds to a change in the output.
  • If questions or wonderings such as "I wonder what would happen if we did X instead of Y...?" - there is nothing stopping you from trying that out, and finding the answer right now! You can edit the existing code, copy-and-paste code snippets then modify, or write something out yourself.


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

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

Explaining Code

  • Choose one of the for statements that was in the replit used for the Discovery activity.
  • To review and solidify what you saw in the video, prepare a verbal or written explanation of what your selected for statement does, in as much detail as possible. Take note of things you find yourself wondering or feeling confused about.
  • Do some research to try and answer your own question or go to your Slack small group!


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 or your small group.


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.


Check For Understanding

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





Back