Anonymous Function

الدالة المجهولة: هي دالة لا تحتوي على اسم عند تعريفها. تُكتب غالبًا كـ:

function() {
  // كود الدالة
}
JavaScript

لا يمكنك استدعاؤها مباشرة بهذا الشكل، بل يجب أن:

  • تُخزن في متغير.
  • تُمرر كوسيط داخل دالة أخرى (كـ callback).
  • تُستخدم مباشرة في مكان واحد (مثل IIFE أو event handlers).
✅ أنواع واستخدامات الدوال المجهولة
1. ✅ كـ Function Expression
const greet = function() {
  console.log("مرحباً!");
};

greet(); // مرحباً!
JavaScript

هنا الدالة لا تملك اسمًا (ليست function greet())، بل تم تخزينها في متغير.

2. ✅ كـ Callback Function (أشهر استخدام)

📌 مثال مع setTimeout:

setTimeout(function() {
  console.log("مرحبًا بعد 2 ثانية");
}, 2000);
JavaScript

📌 مثال مع Array.forEach():

let names = ["أحمد", "منى", "خالد"];

names.forEach(function(name) {
  console.log("مرحبًا " + name);
});
JavaScript

4. ✅ الدوال السهمية المجهولة

نفس الشيء لكن بطريقة أقصر:

setTimeout(() => {
  console.log("هذا من دالة سهمية مجهولة");
}, 1000);
JavaScript
⭐️ فوائد الدوال المجهولة
الفائدةالتوضيح
تقليل التكرارلا تحتاج لتعريف اسم دالة لكل استخدام بسيط.
عزل الكودمثل IIFE لمنع تداخل المتغيرات في النطاق العام.
تسهيل التعامل مع الأحداثفي onclick, setTimeout, وغيرها.
قوة مع البرمجة الوظيفيةتستخدم في map, filter, reduce
⚠️ ملاحظات مهمة
  • لا يمكن استدعاء دالة مجهولة قبل تعريفها (لأنها ليست hoisted).
  • يصعب تتبع الأخطاء في الكونسول إذا كانت الدالة بدون اسم (لذلك أحيانًا نستخدم دوال مُسماة داخل تعبير).

📌 مثال على دالة مسماة داخل تعبير:

const sum = function add(a, b) {
  return a + b;
};
JavaScript

الآن لو حصل خطأ، ستُعرض كلمة add في الرسائل لتسهيل التتبع.

من أشهر استخدامات الدوال المجهولة (Anonymous Functions) هو ربط الأحداث (Events) خاصة في المتصفحات مثل:

🎯 الأماكن الشائعة لاستخدام الدوال المجهولة:

element.addEventListener("click", function() {
  // كود تنفيذ عند الضغط
});
JavaScript
✅ مثال عملي: زر يطبع رسالة عند الضغط
📄 HTML:
////////////////////////////////Html code
<button id="btn">اضغط هنا</button>
//////////////////////Javascript code
document.getElementById("btn").addEventListener("click", function() {
  alert("تم الضغط على الزر!");
});
JavaScript

✅ الشرح:

  • function() { ... } ← دالة مجهولة (ليس لها اسم).
  • يتم تنفيذها فقط عند الضغط على الزر.
  • لم نحتج لتعريفها مسبقًا؛ كتبناها مباشرة داخل addEventListener.

🧠 لماذا نستخدم الدالة المجهولة هنا؟

السببالفائدة
📌 الدالة قصيرة ومخصصة للاستخدام مرة واحدة فقط
📌 لا حاجة لإعطائها اسمًا لأننا لن نستخدمها في مكان آخر
📌 تبقي الكود منظمًا داخل الحدث مباشرة

🎯 الأماكن الشائعة لاستخدام الدوال المجهولة:

المكانالمثال
توقيتsetTimeout(function(){}, 1000)
تكرار على مصفوفةarray.forEach(function(item){})
رد نداءfetch(...).then(function(response){})
الحدثelement.addEventListener("click", function(){})
دالة فورية(function(){})();

✅ ما هي الدالة السهمية (Arrow Function)؟

الدالة السهمية هي طريقة مختصرة لتعريف الدوال، تم تقديمها في ES6 عام 2015.
بديل أخف وأقصر للدالة التقليدية، وغالبًا تستخدم في المهام البسيطة.

هي طريقة مختصرة لتعريف الدوال (functions) في JavaScript، وتكتب باستخدام => بدلاً من الكلمة المفتاحية function.

📌 الشكل الكامل:
const functionName = (parameters) => {
  // الكود هنا
};
JavaScript

مثال:

const sayHello = () => {
  console.log("مرحبًا!");
};

sayHello(); // مرحبًا!
JavaScript

✅ الاستخدام مع المعاملات:

معامل واحد فقط (بدون أقواس):

const greet = name => {
  console.log("أهلاً، " + name);
};

greet("ياسين"); // أهلاً، ياسين
JavaScript
2. أكثر من معامل (يجب استخدام الأقواس):
const add = (a, b) => {
  return a + b;
};

console.log(add(3, 4)); // 7
JavaScript

✅ الإرجاع الضمني (Implicit Return)

إذا كانت الدالة تحتوي على سطر واحد فقط يُرجع قيمة، يمكنك حذف {} و return:

const multiply = (a, b) => a * b;

console.log(multiply(3, 5)); // 15
JavaScript

✅ أين تُستخدم الدوال السهمية بكثرة؟

الدوال السهمية تُستخدم بكثرة في JavaScript، خصوصًا في البرمجة الحديثة، لما توفره من اختصار في الكتابة وسلوكها المختلف في التعامل مع this.

إليك أهم الأماكن التي تُستخدم فيها:

✅ أكثر استخدامات الدوال السهمية شيوعًا
المجالالاستخدام
🔁 التكرار على المصفوفاتmap, filter, forEach, reduce
const nums = [1, 2, 3];  
const doubled = nums.map(n => n * 2);  
console.log(doubled); // [2, 4, 6]
JavaScript

📆 التوابع الزمنية | setTimeout, setInterval |

setTimeout(() => console.log("بعد 3 ثواني"), 3000);
JavaScript

| 🧠 الـ Callback Functions | تمرير دوال بشكل مؤقت |

document.addEventListener("click", () => {
  console.log("تم النقر");
});
JavaScript

🧱 الدوال القصيرة التي ترجع قيمة | بدون return ولا أقواس |

const square = x => x * x;
console.log(square(4)); // 16
JavaScript

في الوعود (Promises) | then, catch, finally |

fetch("https://api.example.com")
  .then(res => res.json())
  .then(data => console.log(data));
JavaScript

📐 مع الكائنات في React وغيره | ربط event handlers بدون this |

const Button = () => {
  const handleClick = () => console.log("تم الضغط");
  return <button onClick={handleClick}>اضغط</button>;
};
JavaScript