For loop in Javascript - Mini Project: Build & Apply

Using a For Loop to Sum Numbers

📖 Scenario: You are helping a small shop owner who wants to add up the prices of some items they sold today.

🎯 Goal: Build a simple program that uses a for loop to add all the prices in a list and show the total amount earned.

📋 What You'll Learn

Create an array called prices with the exact values: 10, 20, 30, 40, 50

Create a variable called total and set it to 0

Use a for loop with the variable i to go through each item in prices

Add each price to the total inside the loop

Print the total after the loop finishes

💡 Why This Matters

🌍 Real World

Adding up prices is a common task in shopping apps, cash registers, and budgeting tools.

💼 Career

Understanding loops and arrays is essential for many programming jobs, especially in web development and data processing.

1

Create the prices array

Create an array called prices with these exact numbers: 10, 20, 30, 40, 50.

Javascript

// Create the prices array with the numbers 10, 20, 30, 40, 50
// Your code here

Hint

Use square brackets [] to make an array and separate numbers with commas.

2

Create the total variable

Create a variable called total and set it to 0.

Javascript

const prices = [10, 20, 30, 40, 50];
// Create a variable total and set it to 0
// Your code here

Hint

Use let to create a variable that can change later.

3

Use a for loop to add prices

Use a for loop with the variable i to go through each item in prices. Inside the loop, add prices[i] to total.

Javascript

const prices = [10, 20, 30, 40, 50];
let total = 0;
// Use a for loop with i to add each price to total
// Your code here

Hint

Start i at 0 and loop while it is less than prices.length. Add each price to total inside the loop.

4

Print the total

Write console.log(total) to print the total sum after the loop.

Javascript

const prices = [10, 20, 30, 40, 50];
let total = 0;
for (let i = 0; i < prices.length; i++) {
    total += prices[i];
}
// Print the total
// Your code here

Hint

Use console.log(total) to show the result in the console.

Practice

1.

What does a for loop do in JavaScript?

easy

A. Changes the value of a variable once

B. Stops the program immediately

C. Repeats a block of code a set number of times

D. Creates a new variable

Solution

1. Step 1: Understand the purpose of a for loop

   A for loop is designed to repeat code multiple times based on a condition.

2. Step 2: Compare options with the for loop behavior

   Only Repeats a block of code a set number of times correctly describes repeating code multiple times.

3. Final Answer:

   Repeats a block of code a set number of times -> Option C

4. Quick Check:

   For loop = repeat code [OK]

Hint: For loops repeat code multiple times [OK]

Common Mistakes:

• Thinking for loop stops program
• Confusing variable creation with looping
• Assuming for loop runs only once

2.

Which of the following is the correct syntax for a basic for loop in JavaScript?

for (___; ___; ___) {
  // code
}

easy

A. for (i = 0; i < 5; i++)

B. for i = 0; i < 5; i++

C. for (i < 5; i = 0; i++)

D. for (i = 0; i++; i < 5)

Solution

1. Step 1: Recall the for loop syntax

   The correct syntax is: for (start; condition; change) { ... }

2. Step 2: Check each option against syntax

   for (i = 0; i < 5; i++) matches the correct syntax with initialization, condition, and increment.

3. Final Answer:

   for (i = 0; i < 5; i++) -> Option A

4. Quick Check:

   Syntax = for (init; cond; change) [OK]

Hint: For loop needs three parts inside parentheses [OK]

Common Mistakes:

• Missing parentheses around for loop parts
• Wrong order of parts inside for loop
• Using semicolons incorrectly

3.

What will be the output of this code?

let result = '';
for (let i = 1; i <= 3; i++) {
  result += i + ' ';
}
console.log(result.trim());

medium

A. "3 2 1"

B. "1 2 3"

C. "123"

D. "1 2 3 4"

Solution

1. Step 1: Understand the loop iterations

   The loop runs with i = 1, 2, 3 because i <= 3.

2. Step 2: Track the string concatenation

   Each iteration adds the number and a space to result: "1 ", then "1 2 ", then "1 2 3 ". trim() removes the last space.

3. Final Answer:

   "1 2 3" -> Option B

4. Quick Check:

   Loop 1 to 3 adds numbers with spaces [OK]

Hint: Check loop range and string building carefully [OK]

Common Mistakes:

• Ignoring the spaces added
• Forgetting trim() removes trailing space
• Assuming loop includes 4

4.

Find the error in this for loop code:

for (let i = 0; i < 5; i) {
  console.log(i);
}

medium

A. Missing curly braces around loop body

B. Incorrect variable declaration 'let i = 0'

C. Wrong loop condition 'i < 5'

D. Missing increment operator 'i++' in the loop

Solution

1. Step 1: Check the loop increment part

   The loop has 'i' instead of 'i++' which means i never changes.

2. Step 2: Understand the effect of missing increment

   Without increment, the loop runs forever or does not progress, causing an error or infinite loop.

3. Final Answer:

   Missing increment operator 'i++' in the loop -> Option D

4. Quick Check:

   Increment needed to change loop variable [OK]

Hint: Check all three parts of for loop syntax carefully [OK]

Common Mistakes:

• Forgetting to increment loop variable
• Using wrong condition syntax
• Missing braces but allowed in single line

5.

You want to create a for loop that prints only even numbers from 2 to 10 inclusive. Which code snippet does this correctly?

hard

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

B. for (let i = 0; i <= 10; i++) { if (i % 2 === 0) console.log(i); }

C. for (let i = 2; i < 10; i++) { if (i % 2 === 0) console.log(i); }

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

Solution

1. Step 1: Identify the range and condition for even numbers

   We want numbers 2, 4, 6, 8, 10 inclusive.

2. Step 2: Check each option for correctness

   for (let i = 2; i <= 10; i += 2) { console.log(i); } increments by 2 starting at 2, printing only even numbers up to 10. for (let i = 0; i <= 10; i++) { if (i % 2 === 0) console.log(i); } starts from 0 and prints 0 which is outside the 2-10 range. for (let i = 2; i < 10; i++) { if (i % 2 === 0) console.log(i); } misses 10 because it uses i < 10. for (let i = 2; i <= 10; i++) { if (i % 2 === 1) console.log(i); } prints odd numbers, which is wrong.

3. Final Answer:

   for (let i = 2; i <= 10; i += 2) { console.log(i); } -> Option A

4. Quick Check:

   Increment by 2 prints evens directly [OK]

Hint: Use i += 2 to skip odd numbers [OK]

Common Mistakes:

• Using wrong loop condition (i < 10)
• Printing odd numbers by mistake
• Not incrementing properly to skip odds