🟡 Control Flow · Lesson 17

for Loops

Why Loops Exist

// Without a loop — tedious and unmaintainable:
console.log(1);
console.log(2);
console.log(3);
// ...imagine doing this 1000 times!

// With a loop:
for (let i = 1; i <= 1000; i++) {
    console.log(i);
}

A loop repeats a block of code multiple times — it's how computers do repetitive work without you writing the same line over and over. Any time you need to process every item in a list, count from one number to another, or repeat something until a condition changes, you reach for a loop. Together with if statements, loops are the two pillars of programming logic: if makes decisions, loops handle repetition. Almost every real program uses both heavily.

The for Loop — three parts in one line

for (let i = 1; i <= 5; i++) {
    console.log(i);
}
// Output: 1, 2, 3, 4, 5

/*  for ( START      ; CONDITION ; STEP )
         let i = 1   ; i <= 5    ; i++       */

The for loop packs three things into its parentheses, separated by semicolons. (1) Start: let i = 1 creates a counter, run ONCE at the beginning. (2) Condition: i <= 5 is checked before EVERY pass — if true, the loop body runs; if false, the loop ends. (3) Step: i++ runs after each pass, moving the counter forward. So it reads: "start at 1, keep going while i is 5 or less, adding 1 each time." The variable i (short for "index") is the traditional name. Understand these three parts and every for loop becomes readable.

Looping Through Arrays — the main use

let students = ["Aman", "Priya", "Ravi"];

for (let i = 0; i < students.length; i++) {
    console.log(students[i]);
}
// Output: Aman, Priya, Ravi

The single most common use of a for loop is walking through an array. Look closely at the pattern: start at i = 0 (because indexes start at zero — remember strings?), and continue while i < array.length — note that's LESS THAN, not <=. Why? An array of 3 items has indexes 0, 1, 2 — so the last valid index is length - 1. Using <= would try to read index 3, which doesn't exist (giving undefined). This i = 0; i < arr.length; i++ pattern is worth memorising — you'll write it hundreds of times.

for...of and for...in — the modern shortcuts

let students = ["Aman", "Priya", "Ravi"];

// for...of — gives you each VALUE directly (cleaner!)
for (let name of students) {
    console.log(name);            // Aman, Priya, Ravi
}

// for...in — gives you each KEY/INDEX (use with objects)
let student = { name: "Aman", age: 20 };
for (let key in student) {
    console.log(key, student[key]);   // name Aman, age 20
}

Modern JavaScript offers two cleaner loops. for...of loops over the VALUES of an array — no counter, no [i], no off-by-one risk. When you just need each item, for...of is clearer and safer than a classic for loop. for...in loops over the KEYS (property names) of an object, which is exactly what you want for objects. The rule of thumb: for...of for arrays, for...in for objects. Mixing them up (using for...in on an array) gives you indexes as STRINGS and can behave oddly — a classic mistake.

Nested Loops — a loop inside a loop

for (let i = 1; i <= 3; i++) {
    for (let j = 1; j <= 3; j++) {
        console.log(i, j);
    }
}
// 1 1, 1 2, 1 3, 2 1, 2 2, 2 3, 3 1, 3 2, 3 3

// Classic: a multiplication table
for (let i = 1; i <= 10; i++) {
    console.log(`5 x ${i} = ${5 * i}`);
}

You can put a loop inside another loop. The INNER loop runs completely for EACH pass of the outer loop — so a 3×3 nested loop runs 9 times total. Nested loops handle grids, tables, and comparing every item against every other item. Note the different counter names (i then j) — using the same name would break things. Be aware nested loops multiply the work: two loops over 1000 items each means a million iterations. Useful, but use them thoughtfully.

Exam Corner

Q: What are the three parts of a for loop? Start (initialisation), condition, and step (increment).

Q: Write the standard loop to go through an array. for (let i = 0; i < arr.length; i++)

Q: Why use < arr.length and not <= ? Because indexes end at length - 1; <= would read one past the end.

Q: Difference between for...of and for...in? for...of gives values (arrays); for...in gives keys (objects).

Q: In a nested loop, how many times does the inner loop run? Fully, once for every single pass of the outer loop.

Loops क्यों हैं

// Loop ke bina — thakau aur na sambhalne layak:
console.log(1);
console.log(2);
console.log(3);
// ...socho ise 1000 baar karna!

// Loop ke saath:
for (let i = 1; i <= 1000; i++) {
    console.log(i);
}

Loop code का block कई बार दोहराता है — यही तरीका है जिससे computers दोहराव वाला काम करते हैं बिना आपके वही line बार-बार लिखे. जब भी आपको list के हर item को process करना हो, एक number से दूसरे तक गिनना हो, या condition बदलने तक कुछ दोहराना हो, आप loop लेते हैं. if statements के साथ, loops programming logic के दो स्तंभ हैं: if फैसले करता है, loops दोहराव संभालते हैं. लगभग हर असली program दोनों भारी मात्रा में use करता है.

for Loop — एक line में तीन हिस्से

for (let i = 1; i <= 5; i++) {
    console.log(i);
}
// Output: 1, 2, 3, 4, 5

/*  for ( START      ; CONDITION ; STEP )
         let i = 1   ; i <= 5    ; i++       */

for loop अपने parentheses में तीन चीज़ें semicolons से अलग करके पैक करता है. (1) Start: let i = 1 counter बनाता है, शुरुआत में EK BAAR चलता है. (2) Condition: i <= 5 HAR pass से पहले जांचा जाता है — true तो loop body चलता है; false तो loop खत्म. (3) Step: i++ हर pass के बाद चलता है, counter आगे बढ़ाते. तो यह पढ़ता है: "1 से शुरू करो, जब तक i 5 या कम है चलते रहो, हर बार 1 जोड़ते." Variable i ("index" का संक्षेप) पारंपरिक नाम है. ये तीन हिस्से समझिए और हर for loop readable बन जाता है.

Arrays पर Loop — मुख्य इस्तेमाल

let students = ["Aman", "Priya", "Ravi"];

for (let i = 0; i < students.length; i++) {
    console.log(students[i]);
}
// Output: Aman, Priya, Ravi

For loop का सबसे common इस्तेमाल array पर चलना है. Pattern ध्यान से देखिए: i = 0 से शुरू (क्योंकि indexes शून्य से शुरू होते — strings याद है?), और i < array.length तक जारी — ध्यान वह LESS THAN है, <= नहीं. क्यों? 3 items की array के indexes 0, 1, 2 हैं — तो आखिरी valid index length - 1 है. <= use करने से index 3 पढ़ने की कोशिश होगी, जो मौजूद नहीं (undefined देते). यह i = 0; i < arr.length; i++ pattern याद रखने लायक है — आप इसे सैकड़ों बार लिखेंगे.

for...of और for...in — आधुनिक shortcuts

let students = ["Aman", "Priya", "Ravi"];

// for...of — har VALUE seedhe deta hai (saaf!)
for (let name of students) {
    console.log(name);            // Aman, Priya, Ravi
}

// for...in — har KEY/INDEX deta hai (objects ke saath)
let student = { name: "Aman", age: 20 };
for (let key in student) {
    console.log(key, student[key]);   // name Aman, age 20
}

Modern JavaScript दो साफ loops देता है. for...of array की VALUES पर loop करता है — कोई counter नहीं, कोई [i] नहीं, कोई off-by-one जोखिम नहीं. जब आपको बस हर item चाहिए, for...of classic for loop से साफ और सुरक्षित है. for...in object की KEYS (property names) पर loop करता है, जो objects के लिए ठीक वही है जो आप चाहते हैं. Thumb rule: arrays के लिए for...of, objects के लिए for...in. इन्हें मिलाना (array पर for...in) indexes को STRINGS के रूप में देता है और अजीब व्यवहार कर सकता है — classic गलती.

Nested Loops — loop के अंदर loop

for (let i = 1; i <= 3; i++) {
    for (let j = 1; j <= 3; j++) {
        console.log(i, j);
    }
}
// 1 1, 1 2, 1 3, 2 1, 2 2, 2 3, 3 1, 3 2, 3 3

// Classic: pahada (multiplication table)
for (let i = 1; i <= 10; i++) {
    console.log(`5 x ${i} = ${5 * i}`);
}

आप एक loop को दूसरे loop के अंदर रख सकते हैं. ANDAR वाला loop बाहरी loop के HAR pass के लिए पूरा चलता है — तो 3×3 nested loop कुल 9 बार चलता है. Nested loops grids, tables, और हर item की हर दूसरे से तुलना संभालते हैं. अलग counter नाम (i फिर j) ध्यान दीजिए — वही नाम use करना चीज़ें तोड़ देगा. सावधान nested loops काम गुणा करते हैं: 1000 items पर दो loops मतलब दस लाख iterations. उपयोगी, पर सोच-समझकर use कीजिए.

Exam Corner

Q: for loop के तीन हिस्से क्या हैं? Start (initialisation), condition, और step (increment).

Q: Array पर चलने का standard loop लिखिए. for (let i = 0; i < arr.length; i++)

Q: < arr.length क्यों, <= क्यों नहीं? क्योंकि indexes length - 1 पर खत्म होते; <= अंत से एक आगे पढ़ेगा.

Q: for...of और for...in में अंतर? for...of values देता (arrays); for...in keys देता (objects).

Q: Nested loop में अंदरूनी loop कितनी बार चलता है? पूरा, बाहरी loop के हर एक pass के लिए एक बार.

← Back to JavaScript Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.