الدرس الحادي عشر: الدوال في JavaScript – كتابة كود مرن وقابل لإعادة الاستخدام

الدرس الحادي عشر: الدوال في JavaScript – كتابة كود مرن وقابل لإعادة الاستخدام
الدرس الحادي عشر: الدوال في JavaScript – كتابة كود مرن وقابل لإعادة الاستخدام

الدرس الحادي عشر: الدوال في JavaScript – كتابة كود مرن وقابل لإعادة الاستخدام 🛠️


العنوان:

فهم الدوال (Functions) لكتابة كود منظم وفعال.


المقدمة:

الدوال (Functions) هي اللبنات الأساسية في JavaScript لكتابة كود قابل لإعادة الاستخدام. بدل ما تكرر نفس الكود في أماكن متعددة، بتقدر تجمعه في دالة، وتستدعيها لما تحتاج. زي ما بتوفر وصفة لتحضير أكلة بدل ما تشرحها كل مرة، الدوال بتوفر لك نفس السهولة والوضوح في البرمجة.


ما هي الدالة؟

الدالة عبارة عن كتلة من الكود تُنفذ عند استدعائها.

مكونات الدالة:

  1. اسم الدالة: يحددها لتستدعيها لاحقًا.
  2. المعاملات (Parameters): القيم التي ترسلها للدالة لتعمل بها.
  3. الجسم (Body): الكود اللي يتم تنفيذه داخل الدالة.
  4. القيمة المُعادة (Return Value): النتيجة التي تُرجعها الدالة.

كيفية تعريف دالة:

دالة أساسية:


function greet() {
console.log("Hello, World!");
}

استدعاء الدالة:

greet(); // "Hello, World!"

الدوال ذات المعاملات:

تعريف دالة تستقبل مدخلات:


function greetUser(name) {
console.log("Hello, " + name + "!");
}

استدعاء الدالة:


greetUser("Mostafa"); // "Hello, Mostafa!"

مثال مع أكثر من معامل:


function addNumbers(a, b) {
return a + b;
}
console.log(addNumbers(5, 7)); // 12

الدوال بدون قيم مُعادة:

تنفيذ مهمة بدون إرجاع نتيجة:


function displayMessage() {
console.log("This is a simple message.");
}
displayMessage();

الدوال مع القيم المُعادة:

إرجاع نتيجة من الدالة:


function multiply(a, b) {
return a * b;
}
let result = multiply(4, 3);
console.log(result); // 12

الدوال التعبيرية (Function Expressions):

تعريف دالة كمُتغير:


let subtract = function (a, b) {
return a - b;
};
console.log(subtract(10, 5)); // 5

الدوال السهمية (Arrow Functions):

تعريف دالة بشكل مختصر:


let divide = (a, b) => a / b;
console.log(divide(10, 2)); // 5

اختصار أكثر إذا كانت الدالة تُرجع قيمة فقط:


let square = x => x * x;
console.log(square(5)); // 25

الدوال الافتراضية:

استخدام قيم افتراضية للمعاملات:


function greetUser(name = "Guest") {
console.log("Welcome, " + name + "!");
}
greetUser(); // "Welcome, Guest!"
greetUser("Sara"); // "Welcome, Sara!"

الدوال كمعاملات لدوال أخرى:

تمرير دالة كمدخل:


function calculate(a, b, operation) {
return operation(a, b);
}
let sum = (a, b) => a + b;
let product = (a, b) => a * b;
console.log(calculate(5, 3, sum)); // 8
console.log(calculate(5, 3, product)); // 15

تطبيق عملي: آلة حاسبة بسيطة باستخدام الدوال:

كود JavaScript:


function calculator(a, b, operation) {
switch (operation) {
case "add":
return a + b;
case "subtract":
return a - b;
case "multiply":
return a * b;
case "divide":
return a / b;
default:
return "Invalid operation";
}
}
console.log(calculator(10, 5, "add")); // 15
console.log(calculator(10, 5, "divide")); // 2

تمارين عملية:

  1. اكتب دالة تقبل رقم وتُرجع إذا كان فرديًا أو زوجيًا.
  2. عرف دالة تُحسب مجموع عناصر مصفوفة.
  3. اكتب دالة تعرض "مرحبًا!" عدد مرات معين يُحدد عند الاستدعاء.

وختامًا:

في الدرس ده، استعرضنا أساسيات الدوال في JavaScript، وشفنا إزاي بنقدر ننظم الكود ونخليه أكتر مرونة وقابلية لإعادة الاستخدام. في الدرس الجاي، هنتكلم عن التعامل مع الأحداث (Events) اللي هتمكنك من التفاعل مع المستخدمين بطريقة تفاعلية. جهز نفسك لاستكشاف المزيد! 🚀

تعليقات