Year 4 Coding & Computational Thinking Maths Link

Loops and Patterns

Discover how loops let us repeat actions -- and how they connect to the repeating patterns you already know from Maths!

Maths Connection: Repeating Patterns

In Maths, you have already learned about repeating patterns like:

In coding, a loop is how we tell a computer to repeat a pattern. Instead of writing the same instruction over and over, we say "repeat this 3 times". The idea is exactly the same!

What is a Loop?

A loop is an instruction that tells the computer to repeat something. Instead of writing the same code again and again, we use a loop to say "do this X times."

Without a Loop (Repetitive!)

say "Hip Hip Hooray!"
say "Hip Hip Hooray!"
say "Hip Hip Hooray!"
say "Hip Hip Hooray!"
say "Hip Hip Hooray!"

5 lines of the same thing!

With a Loop (Much better!)

repeat 5 times:
    say "Hip Hip Hooray!"

Just 2 lines -- same result!

Drawing a Square with a Loop

Imagine a robot that can move forward and turn right. To draw a square:

Without a loop:

move forward 100 steps
turn right 90 degrees
move forward 100 steps
turn right 90 degrees
move forward 100 steps
turn right 90 degrees
move forward 100 steps
turn right 90 degrees

8 lines!

With a loop:

repeat 4 times:
    move forward 100 steps
    turn right 90 degrees

Just 3 lines!

Loops in Real Life

Loops are everywhere in daily life:

Days of the Week

Monday, Tuesday... Sunday -- then it repeats again forever! This is an infinite loop.

Times Tables

3 x 1, 3 x 2, 3 x 3... You repeat the pattern of multiplying 3 by the next number.

Jumping Jacks

"Do 10 jumping jacks" = repeat {jump, spread arms, jump, arms down} 10 times.

Eating Cereal

Repeat: scoop cereal, put in mouth, chew, swallow -- until the bowl is empty.

Loops in JavaScript: Counting 1 to 10

In JavaScript, we use a for loop to count. Here's how to count from 1 to 10:

// Count from 1 to 10 using a loop
for (let i = 1; i <= 10; i = i + 1) {
    display(i);
}

How it works:

let i = 1 -- Start counting at 1
i <= 10 -- Keep going while i is 10 or less
i = i + 1 -- Add 1 each time (count up)

Maths + Code: Times Tables with a Loop

We can use a loop to generate an entire times table! Change the number to see different tables:

// Generate a times table
let number = 5;
for (let i = 1; i <= 12; i = i + 1) {
    display(number + " x " + i + " = " + number * i);
}

Times table for:

Key Vocabulary

Loop

An instruction that tells the computer to repeat a set of steps a certain number of times.

Count Loop

A loop that repeats a specific number of times. E.g., "repeat 5 times."

Repeat / Iteration

Each time the loop runs through its instructions is called one iteration.

Pattern

A repeating sequence of shapes, numbers, or instructions. Loops create patterns!

Infinite Loop

A loop that never stops repeating. Like the days of the week -- they go on forever!

For Loop

A type of loop in JavaScript that lets you count and repeat actions a set number of times.

Worked Examples

What does this code output?

for (let i = 1; i <= 3; i = i + 1) {
    display("Clap!");
}

Step 1: The loop starts with i = 1. Since 1 <= 3, it displays "Clap!"

Step 2: i becomes 2. Since 2 <= 3, it displays "Clap!" again

Step 3: i becomes 3. Since 3 <= 3, it displays "Clap!" one more time

Step 4: i becomes 4. Since 4 is NOT <= 3, the loop stops.

Answer: It displays "Clap!" 3 times.

How would you draw a triangle using a loop?

Think: A triangle has 3 sides. For each side, the robot moves forward then turns.

Turn angle: For a triangle, turn 120 degrees (360 / 3 = 120).

repeat 3 times:
    move forward 100 steps
    turn right 120 degrees

Pattern: Square = repeat 4 times, turn 90. Triangle = repeat 3 times, turn 120. The loop count matches the number of sides!

Fix the broken loop

// This loop should count 1, 2, 3, 4, 5
for (let i = 1; i <= 5; i = i + 2) {
    display(i);
}

The bug: i = i + 2 adds 2 each time, so it outputs: 1, 3, 5 (skips 2 and 4!)

The fix: Change to i = i + 1 so it counts by 1 each time.

Lesson: The step size in a loop controls how it counts. +1 counts every number, +2 counts every second number.

Knowledge Check

Select the correct answer for each question. Click "Check Answer" to see if you are right.

Question 1

What will this code display?

for (let i = 1; i <= 4; i = i + 1) {
    display("Go!");
}

"Go!" displayed 4 times "Go!" displayed 3 times "Go!" displayed 5 times "Go!" displayed 1 time

Question 2

What numbers will this loop display?

for (let i = 2; i <= 10; i = i + 2) {
    display(i);
}

1, 2, 3, 4, 5, 6, 7, 8, 9, 10 2, 4, 6, 8, 10 1, 3, 5, 7, 9 2, 4, 6, 8

Question 3

To draw a hexagon (6 sides) with a loop, how many times should the loop repeat?

3 times 4 times 6 times 12 times

Question 4

Which of these is an example of a loop in real life?

Reading a book from start to finish once Drawing a single line Eating one apple The seasons repeating: Summer, Autumn, Winter, Spring, Summer...

Question 5

What is wrong with this loop?

for (let i = 1; i <= 5; i = i - 1) {
    display(i);
}

It subtracts 1 instead of adding, so i goes 1, 0, -1... and never reaches 5. It's an infinite loop! Nothing -- it works fine It should start at 0 instead of 1 The word "display" is wrong

Key Concepts Summary

●A loop repeats a set of instructions a certain number of times.
●Loops save time and reduce repetition -- instead of writing the same code 10 times, use a loop!
●A for loop in JavaScript has three parts: start value, condition, and step.
●Loops connect to Maths patterns -- times tables, counting by 2s, repeating shapes.
●An infinite loop never stops -- be careful with your loop conditions!

Year 3: Algorithms Year 5: Variables Data