Function Expressions في JavaScript: دليلك الشامل للفهم والتطبيق 👨‍💻

سنتعمق في مفهوم مهم جداً في JavaScript وهو Function Expressions أو "تعبيرات الدوال". إذا كنت قد تعلمت سابقاً عن function declarations، فاستعد لاكتشاف طريقة أخرى أكثر مرونة لإنشاء الدوال.

ما هي Function Expression؟ 🤔

ببساطة، Function Expression هي طريقة لإنشاء دالة وتخزينها داخل متغير. تخيل أن المتغير أصبح الآن "حاملاً" للدالة بداخله، يمكنك استدعاء الدالة من خلال اسم المتغير.

// هذا مثال على Function Expression
let greet = function() {
    console.log("مرحباً بالعالم!");
};

// لاستدعاء الدالة، نستخدم اسم المتغير
greet(); // ستطبع: مرحباً بالعالم!

في المثال أعلاه:

  • قمنا بإنشاء دالة مجهولة الاسم (بدون اسم بعد function).
  • عيننا هذه الدالة للمتغير greet.
  • أصبح بمقدورنا استدعاء الدالة باستخدام greet().

الفرق الأساسي: Function Expression vs. Function Declaration

لفهم الفكرة بشكل أعمق، دعنا نقارنها بالطريقة التقليدية لكتابة الدوال (Function Declaration).

1. Function Declaration (الإعلان عن دالة)

// الإعلان عن الدالة
function sayHello() {
    console.log("Hello!");
}

// يمكن استدعاؤها في أي مكان، حتى قبل تعريفها في الكود
sayHello(); // تعمل بدون مشكلة

2. Function Expression (تعبير الدالة)

// تعبير الدالة
let sayHello = function() {
    console.log("Hello!");
};

// يجب استدعاؤها فقط بعد تعريفها
sayHello(); // تعمل بشكل صحيح هنا
// sayHello(); // إذا استدعيناها هنا (قبل السطر الذي يحددها) سيعطي خطأ!

الفرق الجوهري: الـ Hoisting (الرفع)

  • دوال Declaration يتم "رفعها" (Hoisted) إلى أعلى النطاق، لذا يمكن استدعاؤها قبل تعريفها.
  • دوال Expression لا يتم رفعها بنفس الطريقة، ويجب تعريفها قبل استدعائها.

استخدام Function Expressions مع المعاملات (Parameters)

تماماً مثل الدوال العادية، يمكننا تمرير معاملات للدوال المعرفة بـ Expression.

// دالة expression تأخذ معاملين
let calculateArea = function(width, height) {
    let area = width * height;
    return area; // إرجاع ناتج العملية الحسابية
};

// استدعاء الدالة مع تمرير القيم
let myArea = calculateArea(5, 3);
console.log("المساحة هي: " + myArea); // ستطبع: المساحة هي: 15

الدوال المجهولة (Anonymous Functions) 🎭

لاحظ أن الدالة في أمثلتنا السابقة لم يكن لها اسم بعد كلمة function. هذا النوع يسمى Anonymous Function (دالة مجهولة الهوية). الاسم الحقيقي للدالة أصبح هو اسم المتغير الذي خزنت فيه (greet, calculateArea).

متى هذا مفيد؟ عندما نريد إنشاء دالة سريعة لاستخدامها مرة واحدة، خاصة عند تمريرها كدالة ردية (Callback Function) لدالة أخرى.

// مثال على استخدام دالة مجهولة كـ callback لـ setTimeout
setTimeout(function() {
    console.log("هذه الرسالة ستظهر بعد 3 ثوانٍ!");
}, 3000);

متى نستخدم Function Expressions؟

  1. لتعيين دالة مختلفة لمتغير بناءً على شرط معين. 
    let action;

if (userRole === "admin") {
    action = function() { console.log("صلاحيات كاملة"); };
} else {
    action = function() { console.log("صلاحيات محدودة"); };
}

action(); // سيتم استدعاء الدالة المناسبة حسب الدور
  2. إنشاء دوال داخل كائنات (Objects) - الأساليب (Methods). 
    let calculator = {
    add: function(a, b) { return a + b; },
    subtract: function(a, b) { return a - b; }
};

console.log(calculator.add(10, 5)); // 15
  3. تمرير دوال كمعاملات لدوال أخرى (Callbacks) – وهو استخدام شائع جداً.

خلاصة الدرس 🏁

  • Function Expression: هي دالة مخزنة داخل متغير.
  • الفرق الرئيسي عن Declaration هو سلوك الرفع (Hoisting).
  • غالباً ما تكون دوال مجهولة (Anonymous Functions).
  • استخدامها شائع في الكائنات و الدوال الردية (Callbacks).

ماذا سنتعلم في الدرس القادم؟ 🔮

الآن وقد أصبحت تفهم كيفية تخزين الدوال في متغيرات، حان الوقت لنتعرف على مفهوم قوي ومثير يأخذ هذه الفكرة إلى مستوى آخر: Arrow Functions! في الدرس القادم، سنتعلم كيفية كتابة دوال أقصر وأنظف باستخدام السهم =>، وسنرى كيف تبسط Arrow Functions كتابة الكود بشكل كبير، خاصة مع الدوال الردية. استعد لتبسيط الكود الخاص بك!