مقدمة الدوال في JavaScript للمبتدئين: لماذا نستخدم Functions وكيف تنظّم الكود؟
تخيّل أنك كتبت نفس الكود في 5 أماكن مختلفة. كل مرة تغيّر سطراً واحداً يجب أن تعدله في كل مكان. هنا تظهر قوة Functions في JavaScript.
إذا كنت تبحث عن ما هي الدوال في JavaScript أو لماذا نستخدم function أو كيف تمنع تكرار الكود، فهذا الدرس يعطيك الصورة العملية قبل البدء في كتابة الدوال بالتفصيل.
ما هي Function في JavaScript؟
الدالة هي كتلة كود لها اسم. بدلاً من كتابة نفس الأوامر كل مرة، تكتبها مرة واحدة داخل function ثم تستدعيها عند الحاجة.
قاعدة مهمة: Function = كود قابل لإعادة الاستخدام. مرة واحدة كتابة، مرات كثيرة تشغيل.
لماذا نستخدم الدوال؟
- تقليل التكرار (DRY: Don't Repeat Yourself).
- تنظيم الكود في أجزاء صغيرة وواضحة.
- تسهيل الصيانة والتعديل لاحقاً.
- إعادة استخدام نفس المنطق في أماكن مختلفة.
1) مثال بسيط: بدون دالة vs مع دالة
// بدون دالة (تكرار)
console.log('Welcome, Sara');
console.log('Welcome, Ali');
// مع دالة
function greet(name) {
console.log('Welcome, ' + name);
}
greet('Sara');
greet('Ali');
ماذا يفعل هذا الكود؟ يقارن بين كتابة متكررة وكتابة منظمة بدالة قابلة لإعادة الاستخدام.
النتيجة المتوقعة: نفس المخرجات لكن بكود أنظف وأسهل تعديل.
خطأ شائع: تعريف الدالة ثم نسيان استدعائها، فلا يظهر أي شيء.
2) الفرق بين تعريف الدالة واستدعائها
function sayHi() {
console.log('Hi!');
}
// هذا تعريف فقط
// لا يوجد تنفيذ حتى الآن
sayHi(); // هذا هو الاستدعاء
ماذا يفعل هذا الكود؟ يوضح أن تعريف function لا يعني تنفيذها مباشرة.
النتيجة المتوقعة: الطباعة تحدث فقط عند sayHi().
خطأ شائع: توقع التنفيذ بمجرد كتابة function دون استدعاء.
3) مثال على قيمة تُعاد من الدالة (return)
function add(a, b) {
return a + b;
}
let result = add(10, 5);
console.log(result); // 15
ماذا يفعل هذا الكود؟ الدالة تحسب نتيجة وتعيدها لاستخدامها لاحقاً.
النتيجة المتوقعة: تخزين 15 في result ثم طباعتها.
خطأ شائع: نسيان return ثم الحصول على undefined.
Story قصيرة: كيف اختصر المبتدئ 30 سطراً إلى 6؟
مبتدئ كان يكرر كود طباعة رسالة التنبيه في كل صفحة. عندما غيّر النص، اضطر لتعديله في 7 أماكن. بعد إنشاء دالة واحدة واستدعائها، صار التعديل في مكان واحد فقط.
النتيجة في المتصفح (Console concept)
function showBanner() {
console.log('New offer available');
}
showBanner();
showBanner();
Checklist سريعة قبل إنشاء أي Function
- هل هذا الكود يتكرر أكثر من مرة؟
- هل اسم الدالة يعبّر بوضوح عن مهمتها؟
- هل تحتاج الدالة مدخلات (parameters)؟
- هل تحتاج الدالة إرجاع قيمة عبر
return؟
روابط المتابعة بعد هذا الدرس
الخطوة التالية مباشرة: إنشاء واستدعاء الدوال في JavaScript ثم المعاملات Parameters في الدوال.
الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)
ما هي الدالة Function في JavaScript؟
هي كتلة كود قابلة لإعادة الاستخدام تُنفذ عند استدعائها.
لماذا نستخدم Functions في JavaScript؟
لتقليل التكرار، تنظيم المشروع، وتسهيل الصيانة والتعديل.
ما الفرق بين تعريف الدالة واستدعائها؟
التعريف يكتب منطق الدالة، والاستدعاء يشغّل هذا المنطق فعلياً.
متى أستخدم return داخل الدالة؟
عندما تريد أن تعيد الدالة قيمة لتستخدمها في متغير أو عملية أخرى.
كيف أختار اسم دالة جيد؟
اختر اسماً فعلّيًا واضحاً يصف ما تفعله الدالة مثل calculateTotal أو showMessage.
للمتابعة مباشرة: ابدأ بدرس إنشاء واستدعاء الدوال في JavaScript ثم انتقل إلى المعاملات Parameters في الدوال.
sayWelcome تستقبل اسماً وتطبع رسالة ترحيب،
ثم استدعها لثلاثة أسماء مختلفة.