JavaScript Loops (for, for...in, for...of)

In this guide, we'll look at loops that allow you to automate repetitive operations in JavaScript.
Starting with the classic for loop, you'll learn step by step how to use for...in with objects and for...of with arrays.

🎯 What You Will Learn in This Guide

• Structure and logic of the for cycle
• Loop expressions: start, condition, end statement
• List object properties with for...in
• Rotating arrays and strings with for...of
• Common mistakes and correct practices

---

1️⃣ for Cycle Basics

The for loop repeats the block of code as long as a certain condition is met.

🧩 Syntax

for (başlangıç; koşul; son_ifade) {
  // Tekrarlanacak kod
}

Component Task Initialization Initializes the counter variable. (let i = 0) Condition Controls whether the loop will run or not. (i < 4) Final Expression Updates the counter value in each round. (i++)

🧠 A Simple Example

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

Output:

0
1
2
3

i starts at 0, increases as long as it is less than 4, and is written to the screen at each step.

---

2️⃣ Optional Emoticons

Not all statements are mandatory; JavaScript provides flexibility.

Home Away

let i = 0;
for (; i < 4; i++) console.log(i);

Unconditional Loop (with break)

Kodu kopyala
let i = 0;
for (; ; i++) {
  if (i > 3) break;
  console.log(i);
}

Without Including All Expressions

let i = 0;
for (; ;) {
  if (i > 3) break;
  console.log(i);
  i++;
}

If you don't add break, the loop continues forever — browser freezes, code burns.🔥

---

3️⃣ Using Loops with Arrays

let baliklar = ["kalkan", "somon", "turna"];

for (let i = 0; i < baliklar.length; i++) {
  console.log(baliklar[i]);
}

Output:

Kodu kopyala
kalkan
somon
turna

baliklar.length dynamically retrieves the length of the array, so the loop automatically adapts according to the number of elements.

---

4️⃣ for...in Loop (Object Properties)

It is used to navigate keys (property names) in objects.

const gemi = {
  isim: "Poseidon",
  tip: "Yolcu",
  uzunluk: 150
};

for (let ozellik in gemi) {
 console.log(`${ozellik}: ${gemi[ozellik]}`);
}

Output:

Kodu kopyala
isim: Poseidon
tip: Yolcu
uzunluk: 150

for...in just returns the keys. Object[key] is used to access the value.

---

5️⃣ for...of Loop (Array and Strings)

It works on structures such as arrays, strings, Map and Set. for...in returns keys, for...of returns values.

let meyveler = ["elma", "armut", "kiraz"];

for (let meyve of meyveler) {
  console.log(meyve);
}

Output:

elma
armut
kiraz

Getting Index + Value at the Same Time

for (let [index, meyve] of meyveler.entries()) {
  console.log(`İndeks ${index}: ${meyve}`);
}

Output:

İndeks 0: elma
İndeks 1: armut
İndeks 2: kiraz

Returning a String

let kelime = "genixnode";
for (let karakter of kelime) console.log(karakter);

Output:

r
a
b
i
s
u

---

💬 Frequently Asked Questions (FAQ)

1. What is the difference between for...in and for...of?

for...in returns object keys. for...of directly returns values ​​in iterable structures such as arrays and strings.

2. Why should let be used instead of var?

let has block scope and does not extend outside the loop. The var function is scoped, so it is error prone.

3. What is an infinite loop and how to prevent it?

If the condition is always true, the loop continues forever. There must be a break or condition update in every loop.

4. When to use for instead of while?

If the number of repetitions is certain, for is preferred, while for condition-based operations (for example, until the end of the file).

5. How can I improve cycle performance?

For long strings, for...of is generally faster and more readable. Additionally, unnecessary console.log() calls should be avoided.

---

🏁 Conclusion

JavaScript loops (for, for...in, for...of) eliminate code repetition, enable easy data navigation and improve performance.

By using the right structure in the right place, you can make your code readable, modern and fast.

🚀 Try these techniques on the GenixNode Platform, test and publish your JavaScript projects on a powerful infrastructure!