Loops for javaScript

Loops

A loop is a programming tool that repeats a set of instructions until a specified condition, called a stopping condition is reached. As a programmer, you’ll find that you rely on loops all the time! You’ll hear the generic term iterate when referring to loops; iterate simply means “to repeat”.

Repeating Tasks Manually

Nice work! Now imagine that the vacation list had 100 places on it— logging each array element to the console by hand would be a tedious task! In the next exercise, we will learn how to make things more efficient with forloops.

const vacationSpots = ['NYC','california','South korea'];

console.log(vacationSpots[0]);

console.log(vacationSpots[1]);

console.log(vacationSpots[2]);

The For Loop

A for loop contains three expressions separated by ; inside the parentheses:

1. an initialization starts the loop and can also be used to declare the iterator variable.
2. a stopping condition is the condition that the iterator variable is evaluated against— if the condition evaluates to true the code block will run, and if it evaluates to false the code will stop.
3. an iteration statement is used to update the iterator variable on each loop.

The for loop syntax looks like this:

for (let counter = 0; counter < 4; counter++) { console.log(counter); }

In this example, the output would be the following:

0
1
2
3

Let’s break down the example:

• The initialization is let counter = 0, so the loop will start counting at 0.
• The stopping condition is counter < 4, meaning the loop will run as long as the iterator variable, counter, is less than 4.
• The iteration statement is counter++. This means after each loop, the value of counterwill increase by 1. For the first iteration counter will equal 0, for the second iteration counter will equal 1, and so on.
• The code block is inside of the curly braces, console.log(counter), will execute until the condition evaluates to false. The condition will be false when counter is greater than or equal to 4 — the point that the condition becomes false is sometimes called the stop condition.

This for loop makes it possible to write 0, 1, 2, and 3 programmatically.

 for(let popcon = 5;popcon<=10;popcon++) {

  console.log(popcon);

}

 

Looping in Reverse

To run a backward for loop, we must:

Make a for loop that loops backwards printing 3 to 0 to the console. Use the >= comparison operator in your stopping condition and the -- operator in your iteration statement.

for (let counter = 3; counter >= 0; counter--){

  console.log(counter);

     

Looping through Arrays

For example, we can use a for loop to perform the same operation on each element on an array. Arrays hold lists of data, like customer names or product information. Imagine we owned a store and wanted to increase the price of every product in our catalog. That could be a lot of repeating code, but by using a forloop to iterate through the array we could accomplish this task easily.

To loop through each element in an array, a forloop should use the array’s .length property in its condition.

Check out the example below to see how forloops iterate on arrays:

const animals = ['Grizzly Bear', 'Sloth', 'Sea Lion']; for (let i = 0; i < animals.length; i++){ console.log(animals[i]); }

This example would give you the following output:

Grizzly Bear
Sloth
Sea Lion

  In the loop above, we’ve named our iterator variable i. This is a variable naming convention you’ll see in a lot of loops. When we use i to iterate through arrays we can think of it as being short-hand for the word index. Notice how our stopping condition checks that i is less than animals.length. Remember that arrays are zero-indexed, the index of the last element of an array is equivalent to the length of that array minus 1. If we tried to access an element at the index of animals.length we will have gone too far!

With for loops, it’s easier for us to work with elements in arrays.