Lesson 8: Loops and Repetition

8.1 Doing the Same Thing Many Times

Here's the club's Members sheet, which you'll use throughout this lesson:

{"sheetName": "Members", "rows": 16, "columns": 8,
 "data": [{"range": "A1:E13", "values": [["First Name", "Last Name", "Email", "Dues Paid", "Volunteer Hours"], ["Maya", "Thompson", "maya.thompson@example.com", true, 24], ["Ava", "Lopez", "ava.lopez@example.com", true, 12], ["Ben", "Okafor", "ben.okafor@example.com", false, 4], ["Cam", "Nguyen", "cam.nguyen@example.com", true, 9.5], ["Dev", "Patel", "dev.patel@example.com", true, 15], ["Elena", "Rossi", "elena.rossi@example.com", false, 6.5], ["Farah", "Haddad", "farah.haddad@example.com", true, 11], ["Gabe", "Martinez", "gabe.martinez@example.com", false, 2], ["Hana", "Kim", "hana.kim@example.com", true, 18.5], ["Isaac", "Cohen", "isaac.cohen@example.com", true, 7], ["Jordan", "Lee", "jordan.lee@example.com", false, 0], ["Keisha", "Brown", "keisha.brown@example.com", true, 13.5]]}],
 "formats": [{"range": "A1:E1", "fontWeight": "bold"}]}

Suppose you want to log every member's name. Here's that request, in a new chat with your learner profile from Lesson 7. Arrays and the sheet description you wrote in that lesson:

This is the profile at work again. The usual tool for this job is a loop, which isn't on your list yet, so the assistant said so and solved the problem with what you know: twelve nearly identical lines, one per member. It works, and you can read every line.

But imagine the club grows to 200 members, or you decide to log emails instead of names. You'd have to write, or change, a line for every member. The assistant pointed this out itself, and offered a preview of loops.

A loop repeats a block of code, so you write the steps once and let the computer do them as many times as needed. This lesson builds up to the most common kind step by step, starting with the simplest.

8.2 The while Loop

A while loop repeats its block as long as a condition is true. It looks like an if statement, but instead of running the block once, it goes back and checks the condition again after each time through:

let count = 1
while (count <= 5) {
  console.log(count)
  count = count + 1
}
console.log("The loop is done.")

Follow it the way the computer does:

1. count starts at 1.
2. The condition count <= 5 is true, so the block runs: it logs 1, then adds 1 to count, which becomes 2.
3. Back to the condition. 2 <= 5 is true, so the block runs again, logging 2.
4. This repeats for 3, 4 and 5.
5. After logging 5, count becomes 6. Now 6 <= 5 is false, so the loop ends, and the code carries on after the closing brace.

The line count = count + 1 is what makes the loop end. Each time through, it moves count a step closer to making the condition false. Without it, the condition would stay true forever. You'll see what happens then later in this lesson.

8.2.1 Shortcuts for counting

Adding 1 to a variable is so common that JavaScript has a shortcut for it, the increment operator, ++. These two lines do the same thing:

count = count + 1
count++

--, the decrement operator, subtracts 1 in the same way. There's also a shortcut for adding any amount: total += 5 means total = total + 5. You'll see all three in code from an assistant, so it's worth recognizing them.

You may also see ++count, with the ++ in front. On a line by itself it does the same thing. It only behaves differently when it's part of a larger expression, which this book avoids because it makes code harder to read.

8.3 A while Loop Over a Sheet

Now to the members. Here's code that reads the sheet and logs the first few rows, one line per row:

function logMembers() {
  let sheet = SpreadsheetApp.getActiveSheet()
  let range = sheet.getDataRange()
  let data = range.getValues()
  console.log(data[1])
  console.log(data[2])
  console.log(data[3])
}

Each line is the same except for the index. That's the clue for turning it into a loop. Replace the index with a variable, and change the variable each time:

function logMembers() {
  let sheet = SpreadsheetApp.getActiveSheet()
  let range = sheet.getDataRange()
  let data = range.getValues()
  let rowIndex = 1
  while (true) {
    console.log(data[rowIndex])
    rowIndex++
  }
}

The condition here is just true, so this loop never stops. Don't run it. After the last member it would keep going, logging undefined for rows that don't exist, until you stopped it. It's here to show the part that changes: rowIndex starts at 1 and goes up by one each time, so data[rowIndex] is a different row on each pass.

To stop at the last row, the condition should be true while there are rows left and false once they run out. data.length is the number of rows, and the last row's index is data.length - 1, so the condition is rowIndex < data.length:

function logMembers() {
  let sheet = SpreadsheetApp.getActiveSheet()
  let range = sheet.getDataRange()
  let data = range.getValues()
  let rowIndex = 1
  while (rowIndex < data.length) {
    console.log(data[rowIndex])
    rowIndex++
  }
}

Run it. data.length is 13, so rowIndex goes from 1 to 12, and every member is logged. When rowIndex reaches 13, 13 < 13 is false, and the loop ends. Starting at 1 instead of 0 skips the header row.

Now changing what's logged means changing one line, not twelve. To log each member's name, pick items out of the row. Storing the row in its own variable makes that easier to read:

function logMembers() {
  let sheet = SpreadsheetApp.getActiveSheet()
  let range = sheet.getDataRange()
  let data = range.getValues()
  let rowIndex = 1
  while (rowIndex < data.length) {
    let row = data[rowIndex]
    console.log(row[0], row[1])
    rowIndex++
  }
}

row holds one member's row at a time, so row[0] is always a first name and row[1] a last name, whichever member the loop is on.

8.4 From while to for

Look at the three parts of that loop that control it:

1. Setting up the counter, before the loop: let rowIndex = 1
2. The condition, checked before each pass: rowIndex < data.length
3. The step, at the end of each pass: rowIndex++

This pattern, a counter that starts somewhere, goes up by one, and stops at a limit, is so common that JavaScript has a loop built around it. Here's the same loop with two changes: the word while becomes for, and there's a semicolon on each side of the condition:

function logMembers() {
  let sheet = SpreadsheetApp.getActiveSheet()
  let range = sheet.getDataRange()
  let data = range.getValues()
  let rowIndex = 1
  for (; rowIndex < data.length; ) {
    let row = data[rowIndex]
    console.log(row[0], row[1])
    rowIndex++
  }
}

It looks odd, but it runs exactly the same. The semicolons mark out three slots in the for loop's parentheses: setup, condition, step. So far only the middle one is filled. Now move the setup into the first slot and the step into the third:

function logMembers() {
  let sheet = SpreadsheetApp.getActiveSheet()
  let range = sheet.getDataRange()
  let data = range.getValues()
  for (let rowIndex = 1; rowIndex < data.length; rowIndex++) {
    let row = data[rowIndex]
    console.log(row[0], row[1])
  }
}

That's a standard for loop. It does exactly what the while loop did, in the same order:

• The setup, let rowIndex = 1, runs once, before anything else.
• The condition, rowIndex < data.length, is checked before each pass. If it's false, the loop ends.
• The block runs.
• The step, rowIndex++, runs after each pass, even though it's written at the top. Then the condition is checked again.

That last point is the one that trips people up: the step is written before the block but runs after it. If you ever lose track, rewrite the for loop as the while loop above in your head.

Why have both? Because putting all three controlling parts on one line makes the loop easy to read: you can see where it starts, where it stops and how it moves without hunting through the block. Use for when you're counting through a list, which is most of the time, and while when you're repeating until something happens.

8.5 Asking for a Loop

Back to the chat. With loops learned, you can ask again:

Read. It's the loop you just built, with two small differences. The counter is called i, a very common name for a loop counter, short for index. And the reply stores each name in its own variable before logging it, where the book's version used a row variable. Both are fine. Twelve lines became one loop, and it would work just as well for 200 members.

Loops get useful when you combine them with the decisions from Lesson 6. Making Decisions. The club wants to know who hasn't paid their dues:

The if sits inside the loop, so it's checked once for every member, and only the unpaid ones are logged. Because you described Dues Paid as a checkbox, the assistant knew the value is a real boolean and compared it with false.

Then a total:

This is a pattern you'll use constantly, called a running total. A variable starts at 0 before the loop, and each pass adds one member's hours to it. When the loop ends, it holds the sum. The variable has to be created before the loop: if let totalHours = 0 were inside the block, it would be reset to 0 on every pass.

Here are both tasks in the book's style, in one function. Run it, and check the results against the sheet. The unpaid members should be Ben, Elena, Gabe and Jordan, and the total should be 123:

function reportMembers() {
  let spreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  let sheet = spreadsheet.getSheetByName("Members")
  let range = sheet.getDataRange()
  let data = range.getValues()
  let totalHours = 0

  // start at 1 to skip the header row
  for (let rowIndex = 1; rowIndex < data.length; rowIndex++) {
    let row = data[rowIndex]
    let fullName = `${row[0]} ${row[1]}`
    let duesPaid = row[3]
    let hours = row[4]

    if (duesPaid === false) {
      console.log(`${fullName} hasn't paid dues`)
    }
    totalHours = totalHours + hours
  }

  console.log(`Total volunteer hours: ${totalHours}`)
}

Try changing it: log the members with more than 10 hours, or count the unpaid members instead of listing them. (For a count, start a variable at 0 and add 1 to it inside the if.)

8.6 When a Loop Never Ends

Sooner or later, you'll write a loop that never stops. Here's a typical one. Can you see the problem?

function logFirstNames() {
  let sheet = SpreadsheetApp.getActiveSheet()
  let range = sheet.getDataRange()
  let data = range.getValues()
  let rowIndex = 1
  while (rowIndex < data.length) {
    let firstName = data[rowIndex][0]
    console.log(firstName)
  }
}

When it runs in Apps Script, it logs "Maya" over and over, and never finishes. Here's what an assistant said when asked about it, in a new chat with the learner profile:

The assistant spotted it immediately: nothing inside the loop changes rowIndex, so the condition rowIndex < data.length stays true forever. This is an infinite loop. The fix is the missing rowIndex++ at the end of the block.

for loops are less prone to this, because the step is written right at the top where it's hard to forget. That's one more reason to prefer them for counting.

If your script runs much longer than you expect, click Stop in the Apps Script toolbar. If you don't, Apps Script stops it for you after six minutes, the longest a script is allowed to run.

8.7 Reading for Danger

Loops and setValues let code change a lot of data very quickly, which makes the Read step more important than ever. Here's a request for something that sounds harmless, sample data for practicing:

The code is clear, and you can explain every line. Before you run it, though, ask the question from Lesson 2. Working with an AI Assistant: does it change or delete anything?

It does. sheet.getRange("A1:E6") with setValues writes over cells A1 to E6 of the active sheet, whatever is there. If you ran it while the real Members sheet was showing, it would replace Maya, Ava, Ben, Cam and Dev with made-up people. Rows 7 to 13 would be left alone, so you'd end up with a mix of real and fake members, with no warning and no error. (Edit, then Undo, in Google Sheets can usually reverse it, if you notice in time.)

There's a second, quieter problem. The sample data uses the text "Yes" and "No" for Dues Paid, but your real sheet uses checkboxes, which are true and false. Code that checks duesPaid === false would find no unpaid members in this sample data. Practice data that doesn't match the real data's types can make working code look broken, or broken code look fine.

Neither problem is the assistant's fault. You asked it to fill "my sheet," and you didn't say what types to use. But it didn't warn you either. Reading for danger means looking for three things before you run code that works with real data:

• Which sheet it changes. "Active sheet" means whichever tab is showing when you click Run.
• Which cells it changes, and whether anything is already there.
• Whether it deletes anything. Watch for methods with names like clear, delete or remove.

Then run it on a practice copy. In Google Sheets, File, then Make a copy, gives you a whole spreadsheet to experiment on.

8.8 Loops You'll See in Other Code

Here's the same kind of request, the unpaid members and the total hours, sent with the sheet description but without a learner profile:

A lesson ago, much of this would have been unreadable. Now you can follow most of it:

• The for loop is the one you know, starting at 0 because the range starts at row 2, so there's no header row in data.
• getRange(2, 1, 12, 5) is another way to write a range, with numbers: start at row 2, column 1, and take 12 rows and 5 columns. That's A2:E13.
• unpaidMembers.push(...) collects the unpaid names in an array to log later.
• totalVolunteerHours += ... is the += shortcut for a running total.
• Number(volunteerHours) || 0 converts the hours to a number, and uses 0 if that fails. || here isn't the or you learned in a condition; it picks the right-hand value when the left one is empty, zero or NaN. You don't need this trick, but now you know what it does.

Two things deserve a closer look. The first is the hard-coded 12 in getRange(2, 1, 12, 5). When the club gets its thirteenth member, this code will silently leave them out. Code that uses getDataRange() and data.length adjusts to the data automatically.

The second is forEach, at the end:

unpaidMembers.forEach(function(name) {
  Logger.log(name);
});

forEach is a method that arrays have. It runs a function once for each item in the array, and hands the item to the function each time, here under the name name. So this does the same thing as:

for (let i = 0; i < unpaidMembers.length; i++) {
  let name = unpaidMembers[i]
  Logger.log(name)
}

forEach is shorter, and you'll see it often, along with another form, for (let name of unpaidMembers), called for...of, which does the same. Both hide the counter, which is exactly why this book asks for the for loop with an index for now: you can see every step. You'll learn to use these shorter forms later in the book.

(The instructions in this reply also mention View, then Logs, the old editor menu you saw in Lesson 7. Arrays.)

8.9 Your Learner Profile

What's new:

• "Use for loops with an index." Without this rule, an assistant may use forEach or for...of, which you can recognize now but haven't practiced. A for loop with an index shows you exactly where the loop starts, where it stops and which row it's on, which makes it easier to check. This rule will come off later in the book, when you'll use the shorter forms.
• Five new items under "What I know so far," covering the loops and patterns in this lesson.

8.10 Summary

A loop repeats a block of code. A while loop repeats as long as its condition is true, so something inside it has to change the condition eventually, or it becomes an infinite loop. A counting while loop has three parts: a setup, a condition and a step. A for loop puts all three in its parentheses, which makes it the natural choice for going through the rows of a sheet: start at 1 to skip the header, and stop before data.length. Inside a loop, an if can pick out certain rows, and a running total can add up a column. Loops make code powerful, and code that changes many cells at once deserves careful reading: check which sheet and which cells it changes, and try it on a copy first. In code you find, you'll also see forEach and for...of, which do the same job with the counter hidden. So far, each of your scripts has been one function. In the next lesson, you'll learn to split code into several functions that work together.