JavaScript Made Easy: Part 10

For Part 10, we are going to learn about loops. Loops are extremely important because they can make code run as many times as you need them to, and they allow you to set conditions to make this happen. There are several types of loops. We will be discussing them all over the next several posts. Like functions, there is a lot to them. Open up your repl and code along!

For Loop

"For loops" generally use three expressions that determine how many times they will run. However, these expressions are optional. Here is the syntax:

const looped = "the loop ran"; for(let i = 0; i < 3; i++) {  console.log(looped);//logs the string with each iteration}

The terms we give those statements in the parenthesis are as follows:

for (initialization; condition; post-expression) {    //code}

Notice in the first example that we did the following:

1. initialized a variable called "looped" and assigned a string to it.
2. used a "for loop" with three expressions in it.
3. wrote the three expressions inside of the parenthesis which consisted of a variable named "i" equal to 0 (initialization), a condition which determines how many times the loop runs (condition), an expression which increments the variable. (post-expression).
4. logged the value saved to the "looped" variable to the console every time the code block runs.

Try to change the three statements inside the parenthesis in the "for loop" and see what happens. Try to use different data types other than strings. Now, try the accumulator pattern like this:

let total = 0;for(let i = 0; i <= 100; i++) {   total += i;}console.log(total);

This pattern adds every number from 1 to 100 and accumulates the total in the variable. The loop runs while the variable "i" is less than or equal to 100.

You can also use a for loop to iterate over an array. Here's an example:

let primeNumbers = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43];for(let i = 0; i < primeNumbers.length; i++) {   console.log(primeNumbers[i]);}

This logs the values in the array individually every time the loop runs. This happens inside the code block when primeNumbers[i] is logged every time the loop runs. The value of "i" changes every time the loop runs because "i" is incremented. It is like logging the value located at the indexes primeNumbers[0], primeNumbers[1], primeNumbers[2], primeNumbers[3], etc. The expression in the middle of the parenthesis (the second expression) determines how long the loop with run. In this particular instance, the loop will run while the variable "i" is less than the length of the array (primeNumbers.length). Every time the loop runs, the third expression increases "i" by one. If you want to see this in action look below:

//logs 0, 1, 2, 3, 4for(let i = 0; i < 5; i++) {   console.log(i);}

What happened in this example is that the value assigned to "i" increased every time the loop ran. When the code inside the brackets ran, it logged the current value of "i". Since the condition is at the beginning of the loop, as long as the condition is true before the loop runs, it will run again until the second statement is no longer true. Notice that the numbers that were logged started with 0. This is because as soon as the loop got to the point that the condition was true, it ran again. Take some time to do some variations of all of these examples of "for loops" and come up with some of your own.

I hope you have enjoyed this post! Please check out the entire "JavaScript Made Easy" series by David Tetreau. There will be a new post daily.