JavaScript Notes

JavaScript For Loop Tutorial – Complete Guide with Examples

Master the JavaScript for loop with initialization, condition, increment, loop variations, for...in, for...of, nested loops, performance tips, and interview questions with outputs.

What is the For Loop?

The for loop is the most commonly used loop in JavaScript for executing a block of code a specific number of times. It combines initialization, condition checking, and updating in a single line, making it ideal for iterating over arrays, counting operations, and any scenario where you know (or can calculate) how many times the loop should run.

Syntax

javascript example

for (initialization; condition; update) {
  // Code to repeat
}

Three parts in parentheses:

Initialization – runs once before the loop starts (usually declares counter)
Condition – checked before each iteration; loop continues while true
Update – runs after each iteration (usually increments/decrements counter)

Execution Flow

Example

┌─────────────────────────────────────────┐ │ for (let i = 0; i < 5; i++) { ... } │ └─────────────────────────────────────────┘ Step 1: let i = 0 (initialization - runs ONCE) Step 2: i < 5? → true (condition check) Step 3: Execute body (run code block) Step 4: i++ (update: i becomes 1) Step 5: i < 5? → true (condition check again) Step 6: Execute body (run code block) ... repeats until condition is false ...

Visual Diagram

Example

┌─────────────────┐ │ Initialization │ ← Runs ONCE │ let i = 0 │ └────────┬────────┘ ▼ ┌─────────────────┐ FALSE │ Condition │──────────────► EXIT LOOP │ i < 5? │ └────────┬────────┘ │ TRUE ▼ ┌─────────────────┐ │ Loop Body │ │ { code here } │ └────────┬────────┘ ▼ ┌─────────────────┐ │ Update │ │ i++ │ └────────┬────────┘ │ └──► Back to Condition

Basic For Loop Examples

Example 1: Counting 1 to 5

Example

for (let i = 1; i <= 5; i++) { console.log("Count:", i); }

Output

Count: 1
Count: 2
Count: 3
Count: 4
Count: 5

Example 2: Counting Down

javascript example

for (let i = 10; i >= 1; i--) {
  console.log(i);
}
console.log("Liftoff! 🚀");

Output

10
9
8
7
6
5
4
3
2
1
Liftoff! 🚀

Example 3: Increment by 2 (Even Numbers)

javascript example

console.log("Even numbers from 2 to 20:");
for (let i = 2; i <= 20; i += 2) {
  process.stdout.write(i + " ");
}
console.log("");

Output

Even numbers from 2 to 20:
2 4 6 8 10 12 14 16 18 20

Example 4: Sum of Numbers

Example

let sum = 0; for (let i = 1; i <= 100; i++) { sum += i; } console.log("Sum of 1 to 100:", sum);

Output

Sum of 1 to 100: 5050

Iterating Over Arrays

Basic Array Iteration

Example

let fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]; for (let i = 0; i < fruits.length; i++) { console.log(`${i + 1}. ${fruits[i]}`); }

Output

1. Apple
2. Banana
3. Cherry
4. Date
5. Elderberry

Finding an Element

Example

Output

Found 56 at index 4

Finding Maximum Value

Example

Output

Highest score: 95 at index 4

Iterating Over Strings

Example

Output

Characters in reverse:
tpircSavaJ
Vowels in "JavaScript": 3

For Loop Variations

Omitting Parts of the For Loop

Example

// Omitting initialization (variable declared outside) let j = 0; for (; j < 3; j++) { console.log("j =", j); } console.log("---"); // Omitting update (done inside body) for (let k = 0; k < 5; ) { console.log("k =", k); k += 2; // Update inside body } console.log("---"); // Omitting condition (infinite loop with break) for (let m = 0; ; m++) { if (m >= 3) break; console.log("m =", m); }

Output

j = 0
j = 1
j = 2
---
k = 0
k = 2
k = 4
---
m = 0
m = 1
m = 2

Multiple Variables in For Loop

Example

// Two counters moving in opposite directions for (let left = 0, right = 4; left < right; left++, right--) { console.log(`left=${left}, right=${right}`); }

Output

left=0, right=4
left=1, right=3

For...in Loop (Object Properties)

The for...in loop iterates over the enumerable property keys of an object.

Example

let person = { name: "Alice", age: 28, city: "Mumbai", profession: "Developer" }; for (let key in person) { console.log(`${key}: ${person[key]}`); }

Output

name: Alice
age: 28
city: Mumbai
profession: Developer

For...in with Arrays (Not Recommended)

Example

let colors = ["red", "green", "blue"]; // Works but NOT recommended for arrays for (let index in colors) { console.log(`Type of index: ${typeof index}, value: ${colors[index]}`); }

Output

Type of index: string, value: red
Type of index: string, value: green
Type of index: string, value: blue

Warning: for...in gives string indices and may include inherited properties. Use for...of or regular for loop for arrays.

For...of Loop (Iterable Values)

The for...of loop iterates over values of iterable objects (arrays, strings, maps, sets).

Example

let languages = ["JavaScript", "Python", "Go", "Rust"]; for (let lang of languages) { console.log(`Learning: ${lang}`); }

Output

Learning: JavaScript
Learning: Python
Learning: Go
Learning: Rust

For...of with Strings

javascript example

let greeting = "Hello!";

for (let char of greeting) {
  console.log(char);
}

Output

H
e
l
l
o
!

For...of with entries() (Index + Value)

Example

let items = ["laptop", "phone", "tablet"]; for (let [index, item] of items.entries()) { console.log(`${index}: ${item}`); }

Output

0: laptop
1: phone
2: tablet

Practical Examples

Multiplication Table

Example

let num = 7; console.log(`Multiplication Table of ${num}:`); for (let i = 1; i <= 10; i++) { console.log(`${num} × ${i} = ${num * i}`); }

Output

Multiplication Table of 7:
7 × 1 = 7
7 × 2 = 14
7 × 3 = 21
7 × 4 = 28
7 × 5 = 35
7 × 6 = 42
7 × 7 = 49
7 × 8 = 56
7 × 9 = 63
7 × 10 = 70

Fibonacci Sequence

Example

let n = 10; let fib = [0, 1]; for (let i = 2; i < n; i++) { fib[i] = fib[i - 1] + fib[i - 2]; } console.log(`First ${n} Fibonacci numbers:`); console.log(fib.join(", "));

Output

First 10 Fibonacci numbers:
0, 1, 1, 2, 3, 5, 8, 13, 21, 34

Array Filtering

Example

let ages = [14, 22, 18, 30, 12, 25, 17, 19]; let adults = []; for (let i = 0; i < ages.length; i++) { if (ages[i] >= 18) { adults.push(ages[i]); } } console.log("All ages:", ages); console.log("Adults (>=18):", adults); console.log("Count:", adults.length);

Output

All ages: [14, 22, 18, 30, 12, 25, 17, 19]
Adults (>=18): [22, 18, 30, 25, 19]
Count: 5

Reverse an Array

Example

let original = [1, 2, 3, 4, 5]; let reversed = []; for (let i = original.length - 1; i >= 0; i--) { reversed.push(original[i]); } console.log("Original:", original); console.log("Reversed:", reversed);

Output

Original: [1, 2, 3, 4, 5]
Reversed: [5, 4, 3, 2, 1]

Palindrome Check

Example

Output

madam: true
hello: false
racecar: true
JavaScript: false

Performance Tips

Cache Array Length

Example

let bigArray = new Array(1000).fill(0); // Faster: length cached in variable let len = bigArray.length; for (let i = 0; i < len; i++) { bigArray[i] = i * 2; } console.log("First 5:", bigArray.slice(0, 5)); console.log("Last 5:", bigArray.slice(-5));

Output

First 5: [0, 2, 4, 6, 8]
Last 5: [1990, 1992, 1994, 1996, 1998]

Prefer let Over var

Example

// var: function-scoped (leaks outside loop) for (var a = 0; a < 3; a++) { } console.log("var after loop:", a); // Still accessible! // let: block-scoped (contained to loop) for (let b = 0; b < 3; b++) { } // console.log(b); // ReferenceError: b is not defined console.log("let is properly scoped");

Output

var after loop: 3
let is properly scoped

❌ Common Mistakes

Mistake 1: Off-by-One Errors

Example

let arr = [10, 20, 30, 40, 50]; // ❌ WRONG: <= causes index out of bounds (prints undefined at arr[5]) // for (let i = 0; i <= arr.length; i++) { console.log(arr[i]); } // ✅ CORRECT: Use < for array bounds for (let i = 0; i < arr.length; i++) { console.log(arr[i]); }

Output

Mistake 2: Infinite Loop — Wrong Condition Direction

Example

// ❌ DANGEROUS: i always >= 0, never exits // for (let i = 0; i >= 0; i++) { ... } // ✅ CORRECT: Condition must eventually be false for (let i = 0; i < 5; i++) { console.log("Safe iteration:", i); }

Output

Safe iteration: 0
Safe iteration: 1
Safe iteration: 2
Safe iteration: 3
Safe iteration: 4

Mistake 3: Closure Issue with var in Loops

Example

// ❌ Problem with var — all functions share the same i var funcs = []; for (var i = 0; i < 3; i++) { funcs.push(function() { return i; }); } console.log("var result:", funcs[0](), funcs[1](), funcs[2]()); // ✅ Solution with let — each iteration has its own j let funcs2 = []; for (let j = 0; j < 3; j++) { funcs2.push(function() { return j; }); } console.log("let result:", funcs2[0](), funcs2[1](), funcs2[2]());

Output

var result: 3 3 3
let result: 0 1 2

🎤 Interview Questions

Q1. What are the three parts of a for loop? > (1) Initialization — runs once before loop starts, (2) Condition — checked before each iteration; loop runs while true, (3) Update — runs after each iteration. All three are optional (you can omit any with just the semicolons).

Q2. What is the difference between for...in and for...of? > for...in iterates over property keys of an object (returns strings). for...of iterates over values of iterables (arrays, strings, maps, sets). Use for...of for arrays and for...in for object properties.

Q3. Why should you use let instead of var in for loops? > let is block-scoped — the loop variable is contained to the loop block. var is function-scoped — it leaks outside the loop. This also affects closures: with var, all functions created in a loop share the same variable; with let, each iteration has its own copy.

Q4. What is the output when i = 3 triggers continue?

Example

for (let i = 0; i < 5; i++) { if (i === 3) continue; console.log(i); }

0, 1, 2, 4 — continue skips the current iteration (i=3) and jumps to i++, then checks i < 5.

Q5. Can you omit parts of the for loop? > Yes! All three parts are optional: for (;;) creates an infinite loop. Initialize outside, update inside, or use break for condition — all valid patterns.

Q6. What is the time complexity of a nested for loop? > O(n²) for two nested loops both running n times. The inner loop executes n times for each of the n outer iterations, totaling n × n = n² iterations.

Q7. Find the factorial using a for loop.

Example

function factorial(n) { let result = 1; for (let i = 2; i <= n; i++) result *= i; return result; } console.log("5! =", factorial(5)); // 120

Output

5! = 120

Q8. What is the closure issue with var in loops? > Variables declared with var are function-scoped and hoisted. In a loop, all closures created share the same var variable. By the time they execute, the variable has the final loop value. Use let to create a new binding per iteration.

🔑 Key Takeaways

Concept	Detail
Best for	Known number of iterations
Three parts	Initialization, Condition, Update
Use `let`	Block-scoped, no closure issues
`for...of`	Iterate values of iterables (arrays, strings)
`for...in`	Iterate keys of objects (not recommended for arrays)
Off-by-one	Use `i < arr.length`, NOT `i <= arr.length`
Performance	Cache `arr.length` in a variable for large loops

💡 Remember: The for loop is your go-to when you know exactly how many times to repeat something. Master it and you can iterate over any data structure with precision!

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript For Loop Tutorial – Complete Guide with Examples.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, control, flow, for

Continue learning this concept

Control FlowJavaScript Do-While Loop Tutorial – Complete Guide with ExamplesMaster the JavaScript do-while loop with syntax, guaranteed first execution, menu systems, input validation, comparison with while loop, and interview questions with outputs.Control FlowJavaScript While Loop Tutorial – Complete Guide with ExamplesMaster the JavaScript while loop with syntax, execution flow, use cases, infinite loop prevention, practical programs, and interview questions for complete understanding.Control FlowJavaScript Break Statement Tutorial – Complete Guide with ExamplesMaster the JavaScript break statement with clear examples, ASCII flow diagrams, real-world analogies, common mistakes, and interview Q&A. Perfect for beginners.Control FlowJavaScript Break and Continue Statements – Complete Guide with ExamplesMaster JavaScript break and continue statements with ASCII flowcharts, labeled loops, real-world programs, common mistakes, and 12 interview Q&As. Perfect for beginners.Control FlowJavaScript Continue Statement Tutorial – Skip Iterations with ExamplesLearn the JavaScript continue statement with clear examples, flow diagrams, real-world analogies, common mistakes, and interview Q&A. Skip loop iterations like a pro!Control FlowJavaScript Do While Loop Tutorial – Execute at Least Once with ExamplesLearn the JavaScript do-while loop with clear syntax, flow diagrams, real-world analogies, menu programs, validation patterns, common mistakes, and interview Q&A.

PreviousJavaScript Do-While Loop Tutorial – Complete Guide with Examples NextJavaScript If Statement Tutorial – Conditional Logic with Examples