Higher Order Functions – forEach 

ما هي forEach في JavaScript؟

forEach هي دالة عليا (Higher-Order Function) تُستخدم لتنفيذ وظيفة أو كود معين على كل عنصر في المصفوفة.

📌 لكنها لا ترجع قيمة (أي لا تُرجع مصفوفة أو ناتج مثل map أو filter).

📦 الصيغة:

array.forEach(function(element, index, array) {
  // كود يتم تنفيذه على كل عنصر
});
///////////////////////// السهم
array.forEach((element, index, array) => {
  // كود التنفيذ
});

📌 المعاملات:

🔁 الفرق بينها وبين map

🧪 أمثلة عملية ومشروحة

✅ طباعة كل عنصر في المصفوفة

const names = ["Ali", "Sara", "Omar"];

names.forEach((name) => {
  console.log(name);
});
// الناتج:
// Ali
// Sara
// Omar

✅ طباعة كل عنصر مع رقمه (الفهرس)

const items = ["Book", "Pen", "Notebook"];

items.forEach((item, index) => {
  console.log(`Item ${index + 1}: ${item}`);
});
// Item 1: Book
// Item 2: Pen
// Item 3: Notebook

✅ جمع كل الأرقام (باستخدام متغير خارجي)

const numbers = [1, 2, 3, 4, 5];
let sum = 0;

numbers.forEach(num => {
  sum += num;
});

console.log(sum); // 15

❗لاحظ أن forEach لا ترجع القيمة، لذلك استخدمنا متغير خارجي لتجميع القيم.

✅ إنشاء مصفوفة جديدة يدويًا (بدون map)

const nums = [1, 2, 3];
const doubled = [];

nums.forEach(num => {
  doubled.push(num * 2);
});

console.log(doubled); // [2, 4, 6]

نريد تغيير لون جميع العناصر التي تحمل الكلاس .box إلى الأحمر.

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

///////////////////////////////////////

const boxes = document.querySelectorAll('.box');

boxes.forEach(function(box) {
  box.style.color = 'red';
});

لاحظ أننا نستطيع القيام بذلك بـ map مباشرة، لكن forEach أداة يدوية أكثر.

⚠️ ملاحظات مهمة جدًا:

1. forEach لا تُستخدم للتعديلات التي تحتاج إلى قيمة ناتجة.
   • إذا كنت تحتاج نتيجة → استخدم map أو reduce.
2. لا يمكن كسر التكرار باستخدام break أو return مثل الحلقات التقليدية.
   • إذا كنت تريد الخروج مبكرًا → استخدم for أو some.
3. يمكن استخدامها لأغراض جانبية مثل:
   • الطباعة.
   • حفظ القيم في مصفوفة خارجية.
   • تعديل الكائنات داخل المصفوفة.

📌 متى أستخدم forEach بدل map؟

💡 تمرين سريع:

استخدم forEach لطباعة فقط الأرقام الفردية من مصفوفة:

const numbers = [1, 2, 3, 4, 5, 6];

numbers.forEach(num => {
  if (num % 2 !== 0) {
    console.log(num);
  }
});
// 1
// 3
// 5

📊 جدول مقارنة شامل:

📝 أمثلة عملية مبسطة:

🧠 نصيحة ختامية:

• ✨ forEach: عندما تريد تنفيذ كود جانبي (log, push, تعديل).
• 🔄 map: عندما تحتاج إنشاء مصفوفة معدّلة.
• 🧹 filter: عندما تحتاج تصفية البيانات.
• 🧮 reduce: عندما تريد حساب/تحويل/تجميع المصفوفة لقيمة واحدة (رقم، كائن، نص…).