الحلقات في JavaScript — دليل شامل for و while 2026

في المقال السابق، تعلمت الشروط وكيف تجعل البرنامج يتخذ قرارات. لكن ماذا لو أردت تنفيذ نفس الكود عدة مرات؟ هنا تأتي الحلقات (Loops).

في هذا الدليل العملي، سنأخذك خطوة بخطوة لفهم جميع أنواع الحلقات في JavaScript — من for البسيطة إلى for...of و for...in، مع تمارين وحلول.

ما هي الحلقات؟

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

مثال من الحياة اليومية:

• طباعة الأرقام من 1 إلى 100.
• قراءة كل عنصر في قائمة.
• تكرار سؤال حتى يحصل المستخدم على الإجابة الصحيحة.

بدون الحلقات، سنضطر لكتابة:

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
// ... حتى 100

مع الحلقات:

for (let i = 1; i <= 100; i++) {
  console.log(i);
}

الفرق واضح: 3 أسطر بدلاً من 100!

لماذا نحتاج الحلقات؟

• توفير الوقت: اكتب الكود مرة واحدة، ونفّذه آلاف المرات.
• تقليل الأخطاء: لا تكرر الكود يدوياً.
• التعامل مع البيانات: مرر على قوائم ومصفوفات.
• المرونة: عدد التكرارات يمكن أن يكون ديناميكياً.

أنواع الحلقات في JavaScript

هناك 5 أنواع من الحلقات في JavaScript:

النوع	الاستخدام
for	عندما تعرف عدد التكرارات
while	عندما لا تعرف عدد التكرارات
do...while	مثل while لكن ينفذ مرة على الأقل
for...of	المرور على قيم مصفوفة
for...in	المرور على خصائص كائن

الحلقة for — الأكثر استخداماً

الصيغة الأساسية:

for (التهيئة; الشرط; الزيادة) {
  // الكود المتكرر
}

مثال:

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

النتيجة:

الرقم: 1
الرقم: 2
الرقم: 3
الرقم: 4
الرقم: 5

شرح الأجزاء الثلاثة:

1. let i = 1: التهيئة (تنفذ مرة واحدة قبل الحلقة).
2. i <= 5: الشرط (يُفحص قبل كل تكرار).
3. i++: الزيادة (تنفذ بعد كل تكرار).

تتبع خطوة بخطوة:

| التكرار | قيمة i | هل i <= 5؟ | ينفذ؟ | بعد i++ | |---------|---------|-------------|--------|----------| | 1 | 1 | ✅ | نعم | 2 | | 2 | 2 | ✅ | نعم | 3 | | 3 | 3 | ✅ | نعم | 4 | | 4 | 4 | ✅ | نعم | 5 | | 5 | 5 | ✅ | نعم | 6 | | 6 | 6 | ❌ | توقف | — |

العد التنازلي:

for (let i = 5; i >= 1; i--) {
  console.log("الرقم: " + i);
}

النتيجة:

الرقم: 5
الرقم: 4
الرقم: 3
الرقم: 2
الرقم: 1

الزيادة بأكثر من 1:

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

النتيجة:

0
2
4
6
8
10

الحلقة while — عندما لا تعرف العدد

الصيغة:

while (الشرط) {
  // الكود المتكرر
}

مثال:

let i = 1;

while (i <= 5) {
  console.log("الرقم: " + i);
  i++;
}

النتيجة: نفس نتيجة for السابقة.

⚠️ تحذير: إذا نسيت i++، ستدخل في حلقة لا نهائية (infinite loop)!

متى تستخدم while بدلاً من for؟

• عندما لا تعرف عدد التكرارات مسبقاً.
• عندما يعتمد التوقف على شرط خارجي.

مثال:

let password = "";

// (مثال نظري — في المتصفح استخدم prompt)
while (password !== "secret") {
  // اسأل المستخدم عن كلمة المرور
  // password = prompt("أدخل كلمة المرور:");
}

الحلقة do...while — تنفيذ مرة على الأقل

الصيغة:

do {
  // الكود المتكرر
} while (الشرط);

الفرق عن while: الكود ينفذ مرة واحدة على الأقل قبل فحص الشرط.

مثال:

let i = 10;

do {
  console.log("الرقم: " + i);
  i++;
} while (i <= 5);

النتيجة:

الرقم: 10

لاحظ: رغم أن الشرط i <= 5 غير صحيح من البداية، إلا أن الكود نُفّذ مرة واحدة.

الحلقة for...of — المرور على المصفوفات

الصيغة:

for (const element of array) {
  // استخدم element
}

مثال:

const fruits = ["تفاح", "موز", "برتقال"];

for (const fruit of fruits) {
  console.log(fruit);
}

النتيجة:

تفاح
موز
برتقال

ميزتها: أنظف وأسهل من for التقليدية عند المرور على مصفوفة.

مثال آخر: حساب مجموع أرقام

const numbers = [10, 20, 30, 40, 50];
let sum = 0;

for (const num of numbers) {
  sum += num;
}

console.log("المجموع: " + sum);  // 150

الحلقة for...in — المرور على خصائص الكائن

الصيغة:

for (const key in object) {
  // استخدم key و object[key]
}

مثال:

const person = {
  name: "أحمد",
  age: 25,
  city: "عمان",
};

for (const key in person) {
  console.log(key + ": " + person[key]);
}

النتيجة:

name: أحمد
age: 25
city: عمان

⚠️ تحذير: for...in مخصصة للكائنات، وليست للمصفوفات. استخدم for...of للمصفوفات.

التحكم في الحلقة: break و continue

break — الخروج من الحلقة

for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    break;  // توقف عند 5
  }
  console.log(i);
}

النتيجة:

1
2
3
4

continue — تخطي التكرار الحالي

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue;  // تخطى 3
  }
  console.log(i);
}

النتيجة:

1
2
4
5

الفرق:

• break: يخرج من الحلقة تماماً.
• continue: يتخطى التكرار الحالي، ويكمل الباقي.

الحلقات المتداخلة (Nested Loops)

يمكنك وضع حلقة داخل حلقة:

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

النتيجة:

i=1, j=1
i=1, j=2
i=1, j=3
i=2, j=1
i=2, j=2
i=2, j=3
i=3, j=1
i=3, j=2
i=3, j=3

الاستخدام: طباعة جداول، معالجة مصفوفات ثنائية الأبعاد.

⚠️ تحذير: الحلقات المتداخلة تستهلك أداءً. استخدمها فقط عند الحاجة.

الحلقات اللانهائية — تجنبها!

الحلقة اللانهائية هي حلقة لا تتوقف أبداً. تحدث عندما يكون الشرط دائماً true.

// ⚠️ لا تجرب هذا!
while (true) {
  console.log("لن تتوقف!");
}

أسبابها الشائعة:

1. نسيان i++:

let i = 1;
while (i <= 5) {
  console.log(i);
  // ❌ نسيت i++
}

2. شرط خاطئ:

for (let i = 1; i >= 1; i++) {
  // i دائماً >= 1، لن تتوقف
}

الحل: تأكد دائماً من أن الشرط سيتحول إلى false في النهاية.

تمارين عملية

تمرين 1: طباعة الأرقام من 1 إلى 10

الحل:

for (let i = 1; i <= 10; i++) {
  console.log(i);
}

تمرين 2: مجموع الأرقام من 1 إلى 100

الحل:

let sum = 0;

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

console.log("المجموع: " + sum);  // 5050

تمرين 3: طباعة الأرقام الزوجية

اطبع الأرقام الزوجية من 1 إلى 20.

الحل:

for (let i = 2; i <= 20; i += 2) {
  console.log(i);
}

أو:

for (let i = 1; i <= 20; i++) {
  if (i % 2 === 0) {
    console.log(i);
  }
}

تمرين 4: جدول الضرب

اطبع جدول ضرب الرقم 7.

الحل:

const num = 7;

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

النتيجة:

7 × 1 = 7
7 × 2 = 14
7 × 3 = 21
...
7 × 10 = 70

تمرين 5: عكس مصفوفة

اعكس مصفوفة واطبعها.

الحل:

const arr = [1, 2, 3, 4, 5];
const reversed = [];

for (let i = arr.length - 1; i >= 0; i--) {
  reversed.push(arr[i]);
}

console.log(reversed);  // [5, 4, 3, 2, 1]

تمرين 6: البحث عن عنصر

ابحث عن الرقم 7 في مصفوفة.

الحل:

const numbers = [3, 8, 1, 7, 5, 9];
let found = false;

for (const num of numbers) {
  if (num === 7) {
    found = true;
    break;
  }
}

console.log(found ? "تم العثور على 7" : "لم يتم العثور");

تمرين 7: طباعة نمط المثلث

اطبع:

*
**
***
****
*****

الحل:

for (let i = 1; i <= 5; i++) {
  let row = "";
  for (let j = 1; j <= i; j++) {
    row += "*";
  }
  console.log(row);
}

تمرين 8: مضروب الرقم (Factorial)

احسب مضروب الرقم 5 (5! = 5 × 4 × 3 × 2 × 1).

الحل:

let factorial = 1;

for (let i = 1; i <= 5; i++) {
  factorial *= i;
}

console.log("5! = " + factorial);  // 120

حل المشاكل الشائعة

🔴 المشكلة 1: حلقة لا نهائية

السبب: نسيت تحديث المتغير، أو الشرط دائماً true.

الحل: تأكد من أن المتغير يتغير في كل تكرار.

// خطأ:
let i = 1;
while (i <= 5) {
  console.log(i);
  // ❌ لا يوجد i++
}

// صحيح:
let i = 1;
while (i <= 5) {
  console.log(i);
  i++;  // ✅
}

🔴 المشكلة 2: خطأ off-by-one

السبب: استخدام < بدلاً من <= أو العكس.

// يطبع 0-4 (5 أرقام):
for (let i = 0; i < 5; i++) { }

// يطبع 1-5 (5 أرقام):
for (let i = 1; i <= 5; i++) { }

🔴 المشكلة 3: تعديل مصفوفة أثناء المرور عليها

السبب: إضافة أو حذف عناصر أثناء for...of.

الحل: انسخ المصفوفة أولاً:

const arr = [1, 2, 3];
const copy = [...arr];

for (const item of copy) {
  arr.push(item * 2);
}

🔴 المشكلة 4: for...in على مصفوفة

السبب: for...in تُرجع الفهارس كنصوص، وليس القيم.

الحل: استخدم for...of أو for التقليدية.

const arr = ["a", "b", "c"];

// ❌ خطأ:
for (const i in arr) {
  console.log(i);  // "0", "1", "2" (نصوص)
}

// ✅ صحيح:
for (const val of arr) {
  console.log(val);  // "a", "b", "c"
}

جدول الأوامر الأساسية

الأمر	الوظيفة
for (let i = 0; i < n; i++)	حلقة for التقليدية
while (شرط)	حلقة while
do...while	حلقة تنفذ مرة على الأقل
for (const x of arr)	المرور على قيم مصفوفة
for (const k in obj)	المرور على خصائص كائن
break;	الخروج من الحلقة
continue;	تخطي التكرار الحالي

قائمة تحقق نهائية

المهمة	الحالة
فهم حلقة for	⬜
فهم حلقة while	⬜
فهم do...while	⬜
استخدام for...of للمصفوفات	⬜
استخدام for...in للكائنات	⬜
استخدام break و continue	⬜
حل التمارين الثمانية	⬜

ماذا بعد هذا المقال؟

الآن بعد أن أتقنت الحلقات، أنت جاهز للمقال التالي:

1. الدوال (Functions) — تنظيم الكود وإعادة استخدامه.
2. المصفوفات والكائنات — هياكل البيانات المتقدمة.
3. DOM — التفاعل مع صفحات الويب.

الخلاصة

في هذا المقال، تعلمت:

• ✅ ما هي الحلقات ولماذا نحتاجها.
• ✅ for التقليدية.
• ✅ while و do...while.
• ✅ for...of للمصفوفات.
• ✅ for...in للكائنات.
• ✅ break و continue.
• ✅ الحلقات المتداخلة.
• ✅ تجنب الحلقات اللانهائية.

تذكر: الحلقات هي أداة قوية، لكنها تحتاج حذراً. تأكد دائماً من أن الحلقة ستتوقف في النهاية.

هل أتقنت الحلقات؟ شاركنا في التعليقات!