Higher Order Functions – Map

💡 ما هي الدوال العليا (Higher-Order Functions)؟

الدالة العليا هي دالة:

1. تأخذ دالة أخرى كوسيط.
2. أو تُرجع دالة كقيمة.

map هي مثال شهير لدالة عليا، لأنها تأخذ دالة وتطبّقها على عناصر مصفوفة.

🧭 ما هي دالة map؟

دالة map:

• تُستخدم لتكرار كل عنصر في مصفوفة.
• تُرجع مصفوفة جديدة تحتوي على ناتج تطبيق دالة معينة على كل عنصر في المصفوفة الأصلية.
• لا تغيّر المصفوفة الأصلية (Non-mutating).

📦 الصيغة العامة

const newArray = array.map(function(element, index, array) {
  // return new value for element
});

أو باستخدام Arrow Function:

const newArray = array.map((element, index, array) => {
  return newValue;
});

element: العنصر الحالي.

index: فهرس العنصر الحالي.

array: المصفوفة الأصلية.

🎯 مثال بسيط

const numbers = [1, 2, 3];
const newNumbers = numbers.map(num => num + 1);

✅ المهمة: زيادة كل رقم في مصفوفة بـ 1

const numbers = [1, 2, 3, 4];
const incremented = numbers.map(num => num + 1);

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

🧰 استخدامات عملية واقعية

1. تعديل بيانات

✅ تحويل أسماء إلى أحرف كبيرة:

const names = ["ahmed", "salma", "omar"];
const upperNames = names.map(name => name.toUpperCase());

console.log(upperNames); // ["AHMED", "SALMA", "OMAR"]

✅ تحويل أعمار إلى جمل شرطية: “قاصر” أو “بالغ”

const ages = [12, 19, 17, 24, 15];

const ageStatus = ages.map(age => age >= 18 ? "بالغ" : "قاصر");

console.log(ageStatus); // ["قاصر", "بالغ", "قاصر", "بالغ", "قاصر"]

1. ✅ إذا كان الرقم زوجياً اضربه ×2، وإذا كان فردياً أضف 1 ثم اضرب ×3

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

const result = numbers.map(num => {
  if (num % 2 === 0) {
    return num * 2;
  } else {
    return (num + 1) * 3;
  }
});

console.log(result); // [6, 4, 12, 8, 18]

✅ إذا كان الرقم أكبر من 10، احسب مجموع الأرقام الفردية من 1 له

const arr = [5, 12, 7, 15];

const sums = arr.map(num => {
  let sum = 0;
  for (let i = 1; i <= num; i++) {
    if (i % 2 !== 0) sum += i;
  }
  return sum;
});

console.log(sums); // [9, 36, 16, 64]

3. ✅ لكل رقم، إذا كان مضاعفًا لـ 3 أرجعه كنص “Fizz”، وإذا كان مضاعفًا لـ 5 “Buzz”، وإذا كلاهما “FizzBuzz”، غير ذلك أرجع الرقم نفسه

const numbers = [3, 5, 15, 7, 9, 10];

const fizzBuzz = numbers.map(num => {
  if (num % 3 === 0 && num % 5 === 0) return "FizzBuzz";
  else if (num % 3 === 0) return "Fizz";
  else if (num % 5 === 0) return "Buzz";
  else return num;
});

console.log(fizzBuzz); // ["Fizz", "Buzz", "FizzBuzz", 7, "Fizz", "Buzz"]

2. إنشاء عناصر واجهة المستخدم (UI)

مثال باستخدام React:

const products = ["Phone", "Laptop", "Tablet"];

const ProductList = () => {
  return (
    <ul>
      {products.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

⚖️ الفرق بين map و forEach

✅ متى تستخدم map؟

• عند الحاجة إلى مصفوفة جديدة مبنية على تحويل كل عنصر.
• عند عدم الحاجة إلى تغيير المصفوفة الأصلية.
• عند عرض بيانات بصيغة جديدة (مثل واجهة المستخدم، تعديل تنسيق، إلخ).

⚠️ ملاحظات مهمة

• map لا تغير المصفوفة الأصلية.
• تأكد أن return موجود في جسم الدالة.
• يمكن دمج map مع filter و reduce لصناعة معالجة معقدة.

💬 ملخص سريع

✅ ملاحظات إضافية مهمة عن map

1. map لا تُعد الأفضل عندما لا تحتاج إلى إنشاء مصفوفة جديدة. في هذه الحالة استخدم forEach.
2. الدالة التي تمرر إلى map يجب أن تُرجع قيمة، وإلا فإن المصفوفة الجديدة ستحوي عناصر undefined.
3. يمكن استخدام map مع filter أو reduce لإنشاء سلاسل معالجة معقدة.
4. map تحافظ على نفس عدد العناصر (لكنها قد تكون مختلفة في المحتوى).
5. map تعمل فقط على المصفوفات — لا تعمل على الكائنات (Objects) إلا بعد تحويلها إلى مصفوفة.