Intro to iterations

  • The basic gist of iterations are to repeat multiple actions for a desirable result
  • Used to repeat code more efficiently compared to just writing out all the functions line by line

The syntax of a for loop consists of three main parts:

for (initialization; condition; increment) {
    // Code to execute
}

Initialization: This sets up a counter variable and runs once at the beginning of the loop.

Condition: Before each iteration, the loop checks this condition. If it’s true, the loop continues; if false, the loop ends.

Increment: This updates the counter variable after each iteration.

For Loop with Syntax Error

Code Runner Challenge

Run loop, the fix the Syntax Error

View IPYNB Source 
%%js 

// CODE_RUNNER: Run loop, the fix the Syntax Error

for (let i = 1, i <= 5; i++) {
    console.log(i);
}
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Usage: Looping Through Arrays

You can use a for loop to iterate over elements in an array.

Code Runner Challenge

Run loop, then add another fruit to the array and print all fruits

View IPYNB Source 
%%js 

// CODE_RUNNER: Run loop, then add another fruit to the array and print all fruits 

let fruits = ["Heart Shaped Herb", "Yami Yami no Mi", "Gomu Gomu no Mi"];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Add two of your own fruits and try it out!

Objects

for loops can also be used to iterate objects over each key and its value

Code Runner Challenge

Run loop, then change to your Personal Info

View IPYNB Source 
%%js 

// CODE_RUNNER: Run loop, then change to your Personal Info

const personInfo = { // Define an object
    name: "Rishab",
    age: 15,
    city: "San Diego",
    occupation: "High School Student"
};

for (let key in personInfo) { // Notice we are using for... in... instead of for... of...
    console.log(key + ": " + personInfo[key]);
}
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

🌿 Understanding while Loops

A while loop repeats a block of code as long as a condition is true.
It’s useful when you don’t know exactly how many times something should run — you just know the rule for when it should stop.

A while loop always includes:

  • A starting value
  • A condition checked before each loop
  • A change inside the loop that eventually makes the condition false

If the condition never becomes false, the loop runs forever — an infinite loop.

🌱 Simple Example

Code Runner Challenge

Run loop, then change the starting value, condition, and increment

View IPYNB Source 
%%js

// CODE_RUNNER: Run loop, then change the starting value, condition, and increment
let counter = 0;

while (counter < 5) {
  console.log("The counter is:", counter);
  counter += 1;
}
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Try experimenting with:

  • Changing the starting value
  • Changing the condition
  • Changing the increment (e.g., counter += 2)
  • Making it count down instead of up

🌼 Playful Example: Growing Vine

This version is visual, fun, and great for experimenting with iteration.

Try experimenting with:

  • Changing the maximum length
  • Make the vine shrink instead of grow
  • Replace the emoji with another symbol
  • Increase the growth rate (e.g., length += 2)

Code Runner Challenge

Run loop to see growing vine

View IPYNB Source 
%%js   
// Growing vine using a while loop

// CODE_RUNNER: Run loop to see growing vine

let length = 1;

while (length <= 10) {
  console.log("🌿".repeat(length));
  length += 1;
}
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Challenge Iteration

Write an iteration to calculate the sum of all numbers from 1 to n Test it with an input of 5

Hint: use ‘n’ to define your condition, and replace ‘n’ with the number that you want to be the upper limit you are adding to your sum.

Code Runner Challenge

Complete function to Sum Numbers from 1 to n, and call the function with a parameter of your choice

View IPYNB Source 
%%js 

// CODE_RUNNER: Complete function to Sum Numbers from 1 to n, and call the function with a parameter of your choice

function sumNumbers(n) {
    let sum = 0;
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...