إنشاء واستدعاء الدوال في JavaScript: من تعريف function إلى تشغيلها بثقة

بعد أن فهمت ما هي الدوال، جاء وقت التطبيق: كيف نكتب الدالة فعلياً؟ وكيف نشغّلها في المكان الذي نريده؟

إذا كنت تبحث عن كيفية إنشاء دالة في JavaScript أو كيف أستدعي function أو الفرق بين declaration وexpression، فهذا الدرس يشرحها خطوة بخطوة.

الخطوة 1: تعريف الدالة (Function Declaration)

نكتب الكلمة function ثم اسم الدالة ثم أقواس () ثم نضع الكود داخل { }.

function sayWelcome() {
  console.log('مرحباً بك في عالم JavaScript!');
}

ماذا يفعل هذا الكود؟ يعرّف دالة باسم sayWelcome تحتوي رسالة ترحيب.

النتيجة المتوقعة: لا يظهر شيء بعد، لأنها مجرد تعريف.

خطأ شائع: الاعتقاد أن الدالة تعمل فور تعريفها بدون استدعاء.

الخطوة 2: استدعاء الدالة (Calling Function)

لتشغيل الدالة، نكتب اسمها متبوعاً بـ ().

sayWelcome();

ماذا يفعل هذا الكود؟ يشغّل الدالة التي عرفناها سابقاً.

النتيجة المتوقعة: طباعة رسالة الترحيب في Console.

خطأ شائع: نسيان الأقواس () عند الاستدعاء.

استدعاء الدالة أكثر من مرة

sayWelcome();
sayWelcome();
sayWelcome();

ماذا يفعل هذا الكود؟ يعيد تنفيذ نفس منطق الدالة كل مرة تستدعيها.

النتيجة المتوقعة: نفس الرسالة تظهر 3 مرات.

خطأ شائع: نسخ نفس كود الرسالة يدوياً بدل إعادة استخدام الدالة.

Function Declaration vs Function Expression

// Function Declaration
function greetA() {
  console.log('Hello from declaration');
}

// Function Expression
const greetB = function () {
  console.log('Hello from expression');
};

greetA();
greetB();

ماذا يفعل هذا الكود؟ يعرض طريقتين شائعتين لإنشاء الدوال.

النتيجة المتوقعة: كلا الدالتين تعملان وتطبعان رسائل مختلفة.

خطأ شائع: نسيان الفاصلة المنقوطة بعد function expression.

ملاحظة مهمة عن الترتيب

sayHi(); // works with declaration

function sayHi() {
  console.log('Hi');
}

// sayHello(); // Error if called before initialization
const sayHello = function () {
  console.log('Hello');
};

ماذا يفعل هذا الكود؟ يوضح أن declaration أكثر مرونة في ترتيب الكتابة مقارنةً بـ expression.

النتيجة المتوقعة: الاستدعاء قبل declaration يعمل غالباً، بينما expression قبل تعريفها يسبب خطأ.

خطأ شائع: افتراض أن كل أنواع الدوال تتصرف بنفس طريقة hoisting.

Story قصيرة: لماذا لم تعمل الدالة؟

مبتدئ كتب const run = function () { ... } ثم استدعاها قبل هذا السطر. ظهر خطأ وتوقف التنفيذ. عندما نقل الاستدعاء بعد التعريف، اشتغل الكود مباشرة.

function showDate() {
  console.log('Today is a good day to code');
}

showDate();

Checklist سريعة قبل تشغيل أي Function

• هل كتبت اسم الدالة بشكل واضح ومعبر؟
• هل أغلقت الأقواس () و{} بشكل صحيح؟
• هل استدعيت الدالة بعد تعريفها (خصوصاً مع expression)؟
• هل جرّبت تشغيل الدالة أكثر من مرة للتأكد من إعادة الاستخدام؟

روابط المتابعة بعد هذا الدرس

الخطوة التالية مباشرة: المعاملات Parameters في الدوال ثم مقدمة المصفوفات Arrays في JavaScript.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

كيف أنشئ دالة في JavaScript؟

اكتب function ثم اسم الدالة ثم () ثم الكود داخل {}.

كيف أستدعي الدالة؟

بكتابة اسمها مع الأقواس مثل myFunction().

ما الفرق بين declaration و expression؟

declaration تعرّف الدالة مباشرة، بينما expression تخزن الدالة داخل متغير.

هل يمكن استدعاء الدالة أكثر من مرة؟

نعم، وهذا هو الهدف الأساسي من الدوال: إعادة استخدام نفس المنطق.

ما أول خطوة بعد تعلم إنشاء الدوال؟

تعلم parameters وreturn حتى تصبح الدالة مرنة وقابلة للاستخدام في سيناريوهات متعددة.

للمتابعة مباشرة: ابدأ بدرس المعاملات Parameters في الدوال ثم انتقل إلى مقدمة المصفوفات Arrays في JavaScript.