![]() |
| الدرس الحادي عشر: الدوال في JavaScript – كتابة كود مرن وقابل لإعادة الاستخدام |
الدرس الحادي عشر: الدوال في JavaScript – كتابة كود مرن وقابل لإعادة الاستخدام 🛠️
العنوان:
فهم الدوال (Functions) لكتابة كود منظم وفعال.
المقدمة:
الدوال (Functions) هي اللبنات الأساسية في JavaScript لكتابة كود قابل لإعادة الاستخدام. بدل ما تكرر نفس الكود في أماكن متعددة، بتقدر تجمعه في دالة، وتستدعيها لما تحتاج. زي ما بتوفر وصفة لتحضير أكلة بدل ما تشرحها كل مرة، الدوال بتوفر لك نفس السهولة والوضوح في البرمجة.
ما هي الدالة؟
الدالة عبارة عن كتلة من الكود تُنفذ عند استدعائها.
مكونات الدالة:
- اسم الدالة: يحددها لتستدعيها لاحقًا.
- المعاملات (Parameters): القيم التي ترسلها للدالة لتعمل بها.
- الجسم (Body): الكود اللي يتم تنفيذه داخل الدالة.
- القيمة المُعادة (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)); // 8console.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")); // 15console.log(calculator(10, 5, "divide")); // 2تمارين عملية:
- اكتب دالة تقبل رقم وتُرجع إذا كان فرديًا أو زوجيًا.
- عرف دالة تُحسب مجموع عناصر مصفوفة.
- اكتب دالة تعرض "مرحبًا!" عدد مرات معين يُحدد عند الاستدعاء.
وختامًا:
في الدرس ده، استعرضنا أساسيات الدوال في JavaScript، وشفنا إزاي بنقدر ننظم الكود ونخليه أكتر مرونة وقابلية لإعادة الاستخدام. في الدرس الجاي، هنتكلم عن التعامل مع الأحداث (Events) اللي هتمكنك من التفاعل مع المستخدمين بطريقة تفاعلية. جهز نفسك لاستكشاف المزيد! 🚀
