Functions in Javascript

1. ✅ ما هي الدالة (Function) ولماذا نستخدمها؟

الدالة هي جزء من الكود يمكن إعادة استخدامها.

تقوم الدوال بأداء مهمة محددة، ويمكن استدعاؤها في أي وقت عند الحاجة.

لماذا نستخدم الدوال؟

  • لإعادة استخدام الكود بدلاً من تكراره.
  • لتنظيم الكود وتقسيمه إلى أجزاء صغيرة مفهومة.
  • لتقليل الأخطاء وزيادة قابلية الصيانة.
✅ ما معنى DRY؟

هي مبدأ برمجي يهدف إلى:

❗️ تقليل تكرار الكود، وجعل الأجزاء المتكررة تُكتب مرة واحدة فقط، ثم يُعاد استخدامها بدلًا من نسخها مرارًا وتكرارًا.

🎯 لماذا DRY مهم؟

الفائدةالشرح
✅ سهولة التعديلإذا احتجت لتعديل جزء من الكود، تقوم بتعديله مرة واحدة فقط
✅ تقليل الأخطاءالكود المكرر أكثر عرضة للأخطاء
✅ تنظيم وهيكلية أفضليجعل الكود نظيفًا وسهل القراءة والصيانة
✅ إعادة استخدامتُعيد استخدام الدوال أو الوحدات دون كتابة نفس المنطق مرارًا

🧠 كيف نطبق DRY؟

التكرارالحل بـ
تكرار كوداستخدام دوال
تكرار عمليات على بياناتاستخدام الحلقات
تكرار منطق بأسماء مختلفةاستخدام المعاملات (parameters)
تكرار نفس الواجهة البرمجيةاستخدام كائنات أو كلاسات (OOP)

📌 مثال بسيط:

function sayHello() {
  console.log("Hello, world!");
}

sayHello(); // الناتج: Hello, world!
JavaScript
2. ✅ إنشاء دالة باستخدام 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("ياسين", "مصر", "مطور واجهات");
// الاسم: ياسين
// الدولة: مصر
// الوظيفة: مطور واجهات
JavaScript
function 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

المقارنةreturnconsole.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
JavaScript

4. ✅ المعاملات الافتراضية (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تمنع ظهور نتائج غير متوقعة في حال لم يتم تمرير المعامل
✅ تبسيط الكودتغنيك عن كتابة شروط داخل الدالة للتحقق من القيم
✅ مرونةتجعل الدالة تقبل عددًا مرنًا من المعاملات
⚠️ ملاحظات مهمة:
  1. يمكنك تحديد القيم الافتراضية لأي معامل، لكن الأفضل ترتيبها في النهاية.
  2. إذا حددت معاملًا أولًا وتركته بدون تمرير، يجب تمرير undefined إذا أردت القفز للقيم الافتراضية التالية.

مثال:

function test(a = 1, b = 2) {
  console.log(a, b);
}

test(undefined, 10); // ✅ 1 10
JavaScript