For Statements
BackLearning 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 beginscondition
: this is evaluated before each loop iteration. If condition evaluates totrue
, the code in the loop runs. If it evaluates tofalse
, 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 totrue
. 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, buti
is a convention infor 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.
- Challenge #2:Write code that will print out the numbers 0-5, and use String interpolation to combine the number with an emoji of your choice. Here is a resource if you don't know how to pull up the emoji keyboard
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
to3
. 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 shortcutcmd + z
. - Change
fruits[i]
tofruits
. Re-run the code - has the output changed? Revert the changes with the keyboard shortcutcmd + 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 infor
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.