JS: For Loops

Learning Goals

• Write for loop syntax
• Understand and explain the components of a for loop and how they can be used in conjunction with arrays

Vocabulary

• Array Used to store a collection of items/multiple values in a single variable
• Element A single item stored in an array. An element can be of any data type
• Loops A quick way to do something repeatedly
• Bracket Notation How we access individual elements of an array. Either to express the element, or assign a new element

Loops

There are times when we want to repeat the same operation multiple times over a set of data. Loops allow us to do just that by running through our data one by one and executing code to accomplish a goal.

For example, let’s take this array:

var pets = [
  {
    name: 'Tilly',
    type: 'cat',
    favoriteTreat: 'cheese',
    human: 'Leta'
  },
  {
    name: 'Sodie',
    type: 'dog',
    favoriteTreat: 'milkbones',
    human: 'Amy'
  },
  {
    name: 'Pumpernickel',
    type: 'cat',
    favoriteTreat: 'kibble',
    human: 'Eric'
  }
];

What if we wanted to print the following sentence for each pet:

// Leta's cat, Tilly, loves cheese.
// Amy's dog, Sodie, loves milkbones.
// Eric's cat, Pumpernickel, loves kibble.

Let’s take a look at the structure of the most commonly used type, the for loop:

for ([initialExpression]; [condition]; [incrementExpression]) {
  statement
}

Which looks like this when we implement it in code:

for (var i = 0; i < 10; i++) {
  console.log(i);
}

If we break this down, we see that our loop is constructed from the following parts:

• the keyword for
• a set of rules, or conditions (var i = 0; i < 10; i++ )
• opening and closing curly braces which contain our code
• the code that we want our loop to execute: console.log(i);

Let’s dig into the three statements separated by semicolons that make up or our conditions:

1. We begin with initialization. Where do we want our loop to start? The first statement var i = 0; creates a variable that is assigned the value of 0. This variable is commonly named i, or index, and will act as the counter. It is created the first time the loop is run.
2. The next statement sets the condition that tells the loop when to stop running: i < 10;. In this case, the condition indicates that the loop will stop when i equals 10. The condition may use a variable that is assigned a value.
3. Finally, with the statement i++ we update the value of our counter i. This adds 1 to the value of i. This syntax is using the increment operator ++, which is a way of writing i = i + 1. It is also possible to decrement downwards using the decrement operator --, which is a way of writing i = i - 1.

The statement within the curly braces executes each time the loop runs. In this case, we can see we are logging the value of i to the console.

Looping With Arrays

for loops are commonly used to take action on every item in an array. To do this, we can use the initializer and condition to tell the loop to perform the action the same number of times for the number of elements in the array. Typically, we set the initializer at 0, and set the stop condition to the length of the array. The code in the snippet that follows is also available in this repl.it.

var fruits = ['apples', 'oranges', 'bananas'];

for (var i = 0; i < fruits.length; i++) {
  console.log("I have some " + fruits[i]);
}

The for loop is not magically tied to the fruits array in the example above. It’s important to note that when we want to call a specific fruit, we call the fruits array then use bracket notation with the i variable to access fruits[0], then fruits[1], then fruits[2] - when i holds each of those respective values.

Now let’s revisit a previous example.

Returning a Value

Let’s looks at this code:

var greetings = ['hello', 'hey', 'hi', 'hey there'];

function sayAllTheGreetings() {
  for (var i = 0; i < greetings.length; i++) {
    return greetings[i];
  }
}

Okay…does this mean we can never return something out of a for loop? No! It just means we need to be careful to ensure that our function is working the way we expect it to. Let’s look at a couple more examples in this repl.

var users = [
  {
    id: 127238,
    firstName: "Matthew",
    handle: "@matthewph",
    lastLoggedIn: 1611937890083,
    followerCount: 723,
    recentPost: "This is the first time I've checked the internet since last March."
  }, {
    id: 728912,
    firstName: "Tanisha",
    handle: "@tdavey",
    lastLoggedIn: 1611937937749,
    followerCount: 2319,
    recentPost: "Wear a mask people, it's not over."
  }, {
    id: 409126,
    firstName: "Megan",
    handle: "@meg36",
    lastLoggedIn: 1611937973534,
    followerCount: 212,
    recentPost: "OMG Gametime AHHHH!!!!!!"
  }
];

for (var i = 0; i > -1; i++) {
  console.log(i);
}

Additional Practice (Optional)

• Leveled Array Practice
• JavaScript Playground lets you experiment more with these concepts.

More Resources

• JS Style Guide
• Seven JS Quirks I Wish I’d Known About
• Adequately Good JS