EN

JavaScript・Grouping and repeating

Let the computer do the repeating: the for statement

Writing the same thing 100 times isn't a job for a human. Learn how to write a "loop" and hand all the tedious work over to the computer.

If someone asked you to “count from 1 to 10 and show it,” would you write console.log(1); on ten lines? What if it were “1 to 10,000”? This kind of repeating the same thing is exactly what the computer is best at. The way to ask for it is the for statement.

Let’s write it

for (let i = 1; i <= 10; i = i + 1) {
  console.log(i);
}

In just three lines, the console shows 1 through 10 in order. Inside ( ) are three parts separated by ;, not commas.

PartExampleMeaning
Startlet i = 1Prepare a counting variable at 1
Condition to keep goingi <= 10Keep going while i is 10 or less
How to advancei = i + 1Increase i by 1 each lap

Picture it going around and around: “set i to 1 → 10 or less? → run the thing to do → add 1 → 10 or less? → …”

It shines when combined with arrays

Where the for statement shines most is when you process an array’s contents in order.

const likes = ["drawing", "ramen", "games", "Shima"];

for (let i = 0; i < likes.length; i = i + 1) {
  console.log(likes[i]);
}

As i advances 0, 1, 2, 3, likes[i] is taken out in order, and all four favorites are shown. Because array numbers start at 0, the start is also let i = 0. The standard form for the condition is i < likes.length (while it’s less than the count).

Let’s see it in action

With a loop, let’s line up stars on the screen.

We repeatedly join ”⭐” onto an empty string and, at the end, write it to the screen. What if you changed 10 to 100? The number of lines you write doesn’t change. That’s the power of a loop.

Summary of this lesson

  1. for (start; condition to keep going; how to advance) { thing to do } lets you loop
  2. Using the name i for the counting variable is the tradition
  3. Use it together with an array and you can process every item in order

Try it

The “for statement” you learned today is not used on Shima’s page. It’s a tool for pages that show lots of data in order or do the same processing over and over. Keep it in mind and use it when you need it.

FAQ

After a for statement finishes, what value is i left with?
The loop stops when the condition stops holding—with i <= 10, that's the moment i becomes 11. But an i created with let only exists inside the for statement, so you can't look at i from outside the loop (trying to will raise an error).
Is it OK to start i from 1 instead of 0?
If you're just counting numbers, that's fine. But when you're pulling items out of an array, let i = 0 is the standard form, because array indexes start at 0.
What should I do if I end up in an infinite loop?
Close the browser tab, or stop the page from running with the developer tools. To prevent it, get in the habit of checking, right after you write the loop, whether you forgot the "how to advance" part and whether the condition will eventually stop holding.