حلقة for في JavaScript للمبتدئين: كرّر الأوامر بذكاء مع أمثلة عملية كثيرة

تخيّل أنك تريد طباعة رسالة 100 مرة. كتابة نفس السطر 100 مرة ليست منطقية. هنا تأتي for loop في JavaScript لتكرار الأوامر بشكل ذكي ومنظم.

إذا كنت تبحث عن شرح for loop للمبتدئين أو متى أستخدم الحلقة for أو كيف أستخدم break وcontinue داخل for، فهذا الدرس يشرحها خطوة بخطوة.

ما هي for loop في JavaScript؟

هي حلقة تكرارية تُستخدم عندما تريد تنفيذ نفس الكود عدة مرات. غالباً نستخدمها مع عدّاد مثل i يزيد في كل دورة.

قاعدة بسيطة: for = بداية + شرط استمرار + تغيير بعد كل دورة.

1) البنية الأساسية لحلقة for

for (البداية; الشرط; التغيير) {
  // الكود الذي سيتكرر
}

ماذا يفعل هذا الكود؟ يحدد نقطة البداية، ومتى تتوقف الحلقة، وكيف يتغير العداد.

النتيجة المتوقعة: الحلقة تعمل عدداً محدداً من المرات حسب الشرط.

خطأ شائع: نسيان جزء التغيير فيؤدي إلى حلقة لا نهائية.

2) مثال أساسي: طباعة الأرقام من 1 إلى 5

for (let i = 1; i <= 5; i++) {
  console.log('الرقم هو: ' + i);
}

ماذا يفعل هذا الكود؟ يبدأ من 1 ويزيد العداد حتى 5 ثم يتوقف.

النتيجة المتوقعة: طباعة 1، 2، 3، 4، 5.

خطأ شائع: كتابة i <= 5 بالخطأ كـ i < 5 ثم فقدان الرقم الأخير.

3) مثال عملي: حساب مجموع الأرقام

let sum = 0;

for (let i = 1; i <= 4; i++) {
  sum = sum + i;
}

console.log(sum); // 10

ماذا يفعل هذا الكود؟ يجمع الأرقام من 1 إلى 4 داخل متغير sum.

النتيجة المتوقعة: القيمة النهائية 10.

خطأ شائع: نسيان تهيئة sum بـ 0 قبل الحلقة.

4) التكرار على مصفوفة باستخدام for

let fruits = ['Apple', 'Banana', 'Orange'];

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

ماذا يفعل هذا الكود؟ يمر على عناصر المصفوفة واحداً واحداً عبر الفهرس i.

النتيجة المتوقعة: طباعة كل عنصر في سطر منفصل.

خطأ شائع: استخدام i <= fruits.length مما يسبب قيمة undefined في آخر دورة.

5) استخدام break و continue داخل for

for (let i = 1; i <= 6; i++) {
  if (i === 3) {
    continue; // تخطّي الرقم 3
  }

  if (i === 5) {
    break; // إيقاف الحلقة بالكامل
  }

  console.log(i);
}

ماذا يفعل هذا الكود؟ يتخطى دورة معينة ثم يوقف الحلقة عند شرط آخر.

النتيجة المتوقعة: يطبع 1، 2، 4 فقط.

خطأ شائع: الخلط بين break (إيقاف كامل) وcontinue (تخطي دورة واحدة).

Story قصيرة: لماذا تجمّد المتصفح؟

مبتدئ كتب الحلقة هكذا: for (let i = 0; i < 10;) ونسي i++. النتيجة كانت حلقة لا تنتهي. بعد إضافة التغيير في الجزء الثالث، عاد التنفيذ طبيعيًا.

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

Checklist سريعة قبل تشغيل أي for loop

• هل البداية صحيحة (initialization)؟
• هل الشرط واضح ويؤدي للتوقف؟
• هل التغيير يحدث في كل دورة؟
• هل حدود الحلقة صحيحة (خاصة مع المصفوفات)؟

روابط المتابعة بعد هذا الدرس

الخطوة التالية مباشرة: حلقة while في JavaScript ثم حلقة do while في JavaScript.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

ما هي for loop في JavaScript؟

هي حلقة تكرارية تنفذ الكود عدة مرات مع عداد واضح وشروط توقف محددة.

متى أستخدم for بدل while؟

استخدم for عندما تعرف عدد التكرارات أو عندما يكون العداد واضحاً من البداية.

ما الفرق بين break و continue؟

break توقف الحلقة كاملة، بينما continue تتخطى دورة واحدة فقط.

كيف أتجنب الحلقة اللانهائية؟

تأكد أن شرط الحلقة سيتحول إلى false مع الوقت عبر جزء التغيير.

كيف أكرر على المصفوفة بشكل صحيح؟

استخدم i < array.length وليس i <= array.length لتجنب الخروج عن الحدود.

للمتابعة مباشرة: ابدأ بدرس حلقة while في JavaScript ثم انتقل إلى حلقة do while في JavaScript.