Lesson 13 / الدرس 13

The for loop / حلقة for

The same three parts as a while loop, gathered onto one line so they cannot be forgotten. This is the loop you will write most, and the one whose shape is worth knowing by heart.

الأجزاء الثلاثة نفسها من حلقة while، مجموعة في سطر واحد فلا تُنسى. وهذه هي الحلقة التي ستكتبها أكثر، والتي يستحق شكلها الحفظ.

for (let i = 0; i < 5; i++) {
      └───┬───┘  └──┬─┘  └┬┘
          │         │     └ 3. after every round
          │         └────── 2. checked before every round
          └──────────────── 1. once, at the start
  console.log(i);
}

This prints 0 1 2 3 4 — five rounds, starting at zero.

The three parts of lesson 12 are all present and all on one line, which is why the for loop is harder to write an infinite version of by accident. Run the demonstration to see the order the three parts actually execute in.

وأجزاء الدرس 12 الثلاثة كلها حاضرة وكلها في سطر واحد، ولهذا يصعب كتابة صيغة لانهائية من حلقة for بالصدفة. شغّل العرض لترى الترتيب الفعلي لتنفيذ الأجزاء الثلاثة.

Why it starts at zero

Almost every for loop you will see starts at 0 rather than 1, and it is not arbitrary: lists in JavaScript are numbered from 0, as lesson 15 will show. Starting the counter at 0 means i lines up with the positions in a list, and i < length is exactly the right condition. Fighting that convention makes every loop over a list slightly wrong.

وكل حلقة for ستراها تقريبًا تبدأ من 0 لا 1، وليس ذلك اعتباطًا: فالقوائم في JavaScript مرقّمة من 0 كما سيبيّن الدرس 15. وبدء العدّاد من 0 يعني أن i يتوافق مع المواضع في القائمة، وi < length هو الشرط الصحيح بالضبط. ومصارعة ذلك العرف تجعل كل حلقة على قائمة خاطئة قليلًا.

The shapes you will write

To do this	Write
Five rounds, 0 to 4	for (let i = 0; i < 5; i++)
Five rounds, 1 to 5	for (let i = 1; i <= 5; i++)
Count down	for (let i = 5; i > 0; i--)
Every second one	for (let i = 0; i < 10; i += 2)
Through a list	for (const item of items)

The last row is a different loop and usually the better one for a list: it gives you each item directly, with no counter to get wrong. Lesson 15 uses it constantly. Reach for a counter only when you genuinely need the position.

ولا تغيّر العدّاد داخل متن الحلقة إضافةً إلى ترويستها. فالحلقة التي تقول i++ في ترويستها وفيها أيضًا i = i + 1 في موضع بالداخل تتخطى كل دورة ثانية، وتفعل ذلك بصمت — فيكون المخرَج نصف ما توقعت ولا شيء يدل على السبب. وإن وجب تخطي دورة، فاستخدم continue الذي يغطيه الدرس التالي.

Loops nest, and a nested loop runs its whole inner loop for every single round of the outer one. Two loops of ten is a hundred rounds; two of a thousand is a million. That is fine for a multiplication table and worth thinking about the moment the numbers come from real data — it is the difference between a page that responds and one that does not.

وسمِّ العدّاد بما يعدّه حين تكون الحلقة أكثر من بضعة أسطر. فـi مقبول ومفهوم عالميًا لحلقة قصيرة، لكن في المعششة يمنع for (let row = 0; …) وfor (let col = 0; …) أشيع عيب في الحلقات المعششة: استخدام العدّاد الخطأ بالداخل.

Try it live / جرّب بنفسك

<h1>Multiplication table</h1>
<table id="table"></table>
<p id="count"></p>

<script>
  let html = '';
  let rounds = 0;

  for (let row = 1; row <= 9; row++) {
    html += '<tr>';
    for (let col = 1; col <= 9; col++) {
      rounds = rounds + 1;
      html += '<td>' + (row * col) + '</td>';
    }
    html += '</tr>';
  }

  document.getElementById('table').innerHTML = html;
  document.getElementById('count').textContent = 'inner body ran ' + rounds + ' times';
</script>
<style>
  table { border-collapse: collapse; }
  td { border: 1px solid #cbd5e1; padding: .35rem .6rem; text-align: right; }
</style>

Preview / المعاينة

Check yourself / اختبر نفسك

1. In for (let i = 0; i < 5; i++), when does i++ run?

في for (let i = 0; i < 5; i++)، متى تعمل i++؟

2. Why do for loops usually start at 0?

لماذا تبدأ حلقات for من 0 عادةً؟

3. Two nested loops of 1000 rounds each. How many times does the inner body run?

Your task / مهمتك

Print a multiplication table from 1 to 9 as a real HTML table, using two nested loops with counters named for what they count. Then use a single loop with % to print only the numbers between 1 and 100 that are divisible by both 3 and 5. Finally, count how many times the inner body of your nested loop ran, and print that number.

اطبع جدول ضرب من 1 إلى 9 جدولَ HTML حقيقيًا، بحلقتين معششتين وعدّادين مسمّيين بما يعدّان. ثم استخدم حلقة واحدة مع % لطباعة الأرقام بين 1 و100 القابلة للقسمة على 3 و5 معًا. وأخيرًا عُدّ كم مرة عمل المتن الداخلي لحلقتك المعششة، واطبع ذلك الرقم.

A real table, built by two nested loops جدول حقيقي مبني بحلقتين معششتين
Counters named for what they count عدّادان مسمّيان بما يعدّان
The divisible-by-both list, using % قائمة القابل للقسمة على الاثنين، بـ%
The inner-body count printed عدد تنفيذ المتن الداخلي مطبوع