1. ✅ ما هي الدالة (Function) ولماذا نستخدمها؟
الدالة هي جزء من الكود يمكن إعادة استخدامها.
تقوم الدوال بأداء مهمة محددة، ويمكن استدعاؤها في أي وقت عند الحاجة.
✅ لماذا نستخدم الدوال؟
- لإعادة استخدام الكود بدلاً من تكراره.
- لتنظيم الكود وتقسيمه إلى أجزاء صغيرة مفهومة.
- لتقليل الأخطاء وزيادة قابلية الصيانة.
✅ ما معنى DRY؟
هي مبدأ برمجي يهدف إلى:
❗️ تقليل تكرار الكود، وجعل الأجزاء المتكررة تُكتب مرة واحدة فقط، ثم يُعاد استخدامها بدلًا من نسخها مرارًا وتكرارًا.
🎯 لماذا DRY مهم؟
الفائدة الشرح ✅ سهولة التعديل إذا احتجت لتعديل جزء من الكود، تقوم بتعديله مرة واحدة فقط ✅ تقليل الأخطاء الكود المكرر أكثر عرضة للأخطاء ✅ تنظيم وهيكلية أفضل يجعل الكود نظيفًا وسهل القراءة والصيانة ✅ إعادة استخدام تُعيد استخدام الدوال أو الوحدات دون كتابة نفس المنطق مرارًا
🧠 كيف نطبق DRY؟
التكرار | الحل بـ |
---|---|
تكرار كود | استخدام دوال |
تكرار عمليات على بيانات | استخدام الحلقات |
تكرار منطق بأسماء مختلفة | استخدام المعاملات (parameters) |
تكرار نفس الواجهة البرمجية | استخدام كائنات أو كلاسات (OOP) |
📌 مثال بسيط:
function sayHello() {
console.log("Hello, world!");
}
sayHello(); // الناتج: Hello, world!
JavaScript2. ✅ إنشاء دالة باستخدام function
واستدعاؤها
📌 الصيغة العامة:
function functionName() {
// code to execute
}
JavaScript📌 مثال عملي:
function sayHello() {
console.log("مرحبا بك في دورتنا!");
}
sayHello(); // الناتج: مرحبا بك في دورتنا!
JavaScript- لايمكن أن تعمل الدالة بدون استدعاء
- يمكنك استدعاء الدالة في أي مكان بعد تعريفها.
3. ✅ المعاملات (Parameters) والقيم المعادة (Return Values)
✅ المعاملات (Parameters)
هي القيم التي تُمرر للدالة لتعمل بناءً عليها.
function greet(name) {
console.log("مرحبا " + name);
}
greet("yasin"); // مرحبا ياسين
JavaScript- دالة ترحيب مع الاسم والعمر
function greet(name, age) {
console.log("مرحبًا " + name + "! عمرك هو " + age + " سنة.");
}
greet("ياسين", 25);
// مرحبًا ياسين! عمرك هو 25 سنة.
JavaScriptدالة تعرض معلومات المستخدم (اسم، دولة، وظيفة)
function showUserInfo(name, country, job) {
console.log("الاسم: " + name);
console.log("الدولة: " + country);
console.log("الوظيفة: " + job);
}
showUserInfo("ياسين", "مصر", "مطور واجهات");
// الاسم: ياسين
// الدولة: مصر
// الوظيفة: مطور واجهات
JavaScriptfunction printYears(startYear, endYear) {
for (let year = startYear; year <= endYear; year++) {
console.log(year);
}
}
JavaScript✅ إرجاع القيم باستخدام return
✅ ما معنى return
في الدوال؟
📌 التعريف:
return
تُستخدم في الدوال لإرجاع قيمة إلى المكان الذي تم استدعاء الدالة منه.
- عند تنفيذ
return
:- تُنهي الدالة فورًا.
- تعيد القيمة المحددة إلى السطر الذي استدعى الدالة.
- يمكن حفظ النتيجة في متغير لاستخدامها لاحقًا.
🟢 مثال 1: دالة تُرجع ناتج جمع رقمين
function add(a, b) {
return a + b;
}
let result = add(3, 4);
console.log(result); // 7
JavaScript✅ الشرح:
- الدالة
add
تقوم بجمع الرقمين. return a + b
ترجع الناتج.- نحفظ الناتج في
result
ونعرضه.
🟢 مثال 2: دالة تُرجع رسالة ترحيب
function greet(name) {
return "مرحبًا " + name + "!";
}
let message = greet("ياسين");
console.log(message); // مرحبًا ياسين!
JavaScript✅ الشرح:
greet
تُرجع جملة ترحيبية كنص.return
أعادت الجملة، وتم تخزينها فيmessage
.
⚠️ ملاحظات مهمة:
- أي كود بعد
return
لن يُنفذ. - إذا لم تكتب
return
في الدالة، فإنها ترجع تلقائيًاundefined
.
function test() {
return "تم";
console.log("لن يظهر هذا"); // ❌ لن يُنفذ
}
JavaScriptملاحظة: بعد
return
يتوقف تنفيذ باقي الكود داخل الدالة.
✅ الفرق بين return
و console.log
المقارنة | return | console.log |
---|---|---|
✅ الوظيفة الأساسية | تُرجع قيمة من الدالة | تطبع شيء على الشاشة (للمطور) |
🎯 الهدف | استخدام الناتج في مكان آخر | فقط للعرض والتجربة |
📦 القيمة المعادة | ترجع نتيجة يمكن تخزينها | لا ترجع شيء (undefined) |
⛔️ هل تنهي الدالة؟ | نعم، تنهي التنفيذ بعده مباشرة | لا، تكمل الدالة كالمعتاد |
🧪 متى تُستخدم؟ | عند الحاجة لاستخدام النتيجة | أثناء الاختبار أو تصحيح الأخطاء (debug) |
🧠 مثال عملي يوضح الفرق:
function add(a, b) {
console.log("ناتج الجمع هو: " + (a + b));
return a + b;
}
let result = add(3, 5);
console.log("تم حفظ الناتج في المتغير: " + result);
// الناتج في الكونسول:
// ناتج الجمع هو: 8
// تم حفظ الناتج في المتغير: 8
JavaScript✅ الشرح:
console.log
: طبع النتيجة لمجرد عرضها للمطور.return
: أعاد القيمة إلى السطر الذي استدعى الدالة (وسمح بتخزينها في متغير).
❌ لو استخدمت فقط console.log
بدون return
:
function add(a, b) {
console.log(a + b);
}
let result = add(3, 5);
console.log(result); // undefined
JavaScript❗️ الناتج سيكون
undefined
لأن الدالة لم تُرجع شيئًا باستخدامreturn
.
✅ خلاصة:
الحالة | استخدم |
---|---|
تريد طباعة القيمة لرؤيتها؟ | console.log |
تريد استخدام النتيجة لاحقًا؟ | return |
🟢 المثال 1: دالة تحسب مساحة مستطيل
function calcArea(length, width) {
return length * width;
}
let area = calcArea(5, 3);
console.log("المساحة:", area); // المساحة: 15
JavaScript✅ الشرح:
- الدالة تأخذ الطول والعرض.
- تستخدم
return
لإرجاع الناتج. - تم تخزين الناتج في متغير
area
.
🟢 المثال 2: دالة تتحقق هل الرقم زوجي أم لا
function isEven(num) {
return num % 2 === 0;
}
console.log(isEven(4)); // true
console.log(isEven(7)); // false
JavaScript✅ الشرح:
- الدالة تُرجع
true
أوfalse
. - لاحظ أنها لم تطبع شيئًا، فقط تُرجع قيمة يمكن استخدامها في شرط أو if.
🟢 المثال 3: دالة تُرجع أول حرف من الاسم بعد تحويله إلى حرف كبير
function getInitial(name) {
return name.charAt(0).toUpperCase();
}
let initial = getInitial("yasin");
console.log("الحرف الأول:", initial); // الحرف الأول: Y
JavaScript✅ الشرح:
- تأخذ اسمًا.
- تستخرج أول حرف وتجعله كبيرًا.
- ثم تُرجعه ليُستخدم أو يُطبع لاحقًا.
🧠 ملاحظة إضافية:
يمكنك أيضًا تمرير القيمة المُرجعة من دالة إلى دالة أخرى:
function double(x) {
return x * 2;
}
function triple(x) {
return x * 3;
}
let result = double(triple(2)); // = double(6) = 12
console.log(result); // 12
JavaScript4. ✅ المعاملات الافتراضية (Default Parameters)
📌 ما هي Default Parameters؟
هي ميزة تسمح لك بتحديد قيمة افتراضية للمعامل (parameter) في الدالة، تُستخدم إذا لم يتم تمرير قيمة لهذا المعامل أثناء استدعاء الدالة.
🧠 لماذا نحتاجها؟
أحيانًا يتم استدعاء الدالة بدون تمرير كل المعاملات، ولتجنب الحصول على undefined
أو كتابة تحقق يدوي (if
)، نستخدم قيمة افتراضية تلقائية.
✅ الصيغة:
function functionName(parameter = defaultValue) {
// الكود هنا
}
JavaScript🟢 مثال 1: دالة ترحيب مع اسم افتراضي
function greet(name = "زائر") {
console.log("مرحبًا " + name);
}
greet("ياسين"); // مرحبًا ياسين
greet(); // مرحبًا زائر
JavaScript✅ الشرح:
- عند عدم تمرير
name
، يتم استخدام القيمة"زائر"
. - هذا يمنع ظهور
undefined
.
🟢 مثال 2: دالة حساب مجموع مع قيمة افتراضية
function sum(a, b = 0) {
return a + b;
}
console.log(sum(5, 3)); // 8
console.log(sum(5)); // 5 (لأن b = 0)
JavaScript✅ الشرح:
- إذا لم تمرر قيمة لـ
b
، فستكون 0.
🟢 مثال 3: دالة تعرض معلومات المنتج
function showProduct(name, price = "غير محدد", available = true) {
console.log("اسم المنتج:", name);
console.log("السعر:", price);
console.log("متوفر:", available ? "نعم" : "لا");
}
showProduct("هاتف");
// اسم المنتج: هاتف
// السعر: غير محدد
// متوفر: نعم
JavaScript🎯 فوائد Default Parameters:
الفائدة | الشرح |
---|---|
✅ حماية من undefined | تمنع ظهور نتائج غير متوقعة في حال لم يتم تمرير المعامل |
✅ تبسيط الكود | تغنيك عن كتابة شروط داخل الدالة للتحقق من القيم |
✅ مرونة | تجعل الدالة تقبل عددًا مرنًا من المعاملات |
⚠️ ملاحظات مهمة:
- يمكنك تحديد القيم الافتراضية لأي معامل، لكن الأفضل ترتيبها في النهاية.
- إذا حددت معاملًا أولًا وتركته بدون تمرير، يجب تمرير
undefined
إذا أردت القفز للقيم الافتراضية التالية.
مثال:
function test(a = 1, b = 2) {
console.log(a, b);
}
test(undefined, 10); // ✅ 1 10
JavaScript