Megan Paffrath

Posted on

# Loops: For Loops, While Loops, For...Of Loops, For...In Loops

The point of looping is to repeat some functionality.

Some types of loops include:

• for loop
• while loop
• for...of loop
• for...in loop

# For Loop

To can write a simple for loop as follows:

``````for (let i = 1; i <= 10; i++) {
console.log(i); // prints numbers 1-10
}
``````

To loop over an array, we can do as follows:

``````const animals = ['lizard', 'fish', 'turtle'];

for (let i = 0; i < animals.length; i++) {
console.log(i, animals[i]);
}
// 0 'lizard'
// 1 'fish'
// 2 'turtle'
``````

We can also loop over this array in reverse:

``````for (let i = animals.length - 1; i >= 0; i--) {
console.log(i, animals[i]);
}

// 2 'turtle'
// 1 'fish'
// 0 'lizard'
``````

We can also make a loop within a loop:

``````for (let i = 0; i <= 2; i++) {
for (let j = 0; j < 2; j++) {
console.log(`i=\${i}, j=\${j}`);
}
}

// i=0, j=0
// i=0, j=1
// i=1, j=0
// i=1, j=1
// i=2, j=0
// i=2, j=1
``````

This is useful if we want to iterate over an array of arrays:

``````const seatingChart = [
['Abigale', 'Tim', 'Cynthia'],
['Bob', 'Carter', 'Zane', 'Tanja'],
['Quin', 'Xavier'],
];

// To print each name individually from seatingChart:
for (let i = 0; i < seatingChart.length; i++) {
for (let j = 0; j < seatingChart[i].length; j++) {
console.log(seatingChart[i][j]);
}
}
``````

# While Loop

An example of a simple while loop is:

``````let num = 0;

// to print out 0 through 4:
while (num < 5) {
console.log(num);
num++;
}
``````

# Break keyword

The break keyword can be used to exit a while loop:

``````let input = prompt('Say something:');
while (true) {
input = prompt(input);
if (input === 'stop copying me') {
break; // finally stops prompting user
}
}
``````

It can also be used to exit a for loop. Let's say we have the line:

``````let line = ['Abby', 'Salvia', 'Jamie', 'Carter', 'John'];
``````

and we want to output everyone that comes before Jamie, but not Jamie:

``````for (let i = 0; i < line.length; i++) {
if (line[i] === 'Jamie') break;
console.log(line[i]);
}
``````

# For...Of Loops

If we want to print each value from an array, we can do something like:

``````let people = ['Agitha', 'Bruce', 'Charlie', 'Dane', 'Ernie'];
// to print each persons name:
for (let person of people) {
console.log(person);
}
``````

To make our seating chart example from before more legible, we can do:

``````const seatingChart = [
['Abigale', 'Tim', 'Cynthia'],
['Bob', 'Carter', 'Zane', 'Tanja'],
['Quin', 'Xavier'],
];

// To print each name individually from seatingChart:
for (let row of seatingChart) {
for (let person of row) {
console.log(person);
}
}
``````

# For...In Loops

If we want to iterate through each key value pair in an object, we can do something like:

``````const testScores = {
jim: 34,
abby: 93,
greg: 84,
mark: 95,
melvin: 73,
};

for (let person in testScores) {
console.log(`\${person} scored \${testScores[person]}`);
}
``````

If we want to get the average of the testScores using For...Of, we can do as follows:

``````let total = 0;
let scores = Object.values(testScores);
for (let score of scores) {
total += score;
}
let avg = total / scores.length;
console.log(avg);
``````