الجزء السابع – الدوال (Functions) في JavaScript – سلسلة FSWD – JS

ahmedمنذ 4 أسابيع

0 121 دقيقة واحدة

🔶 أولاً: يعني إيه Function؟

الدالة (Function) هي كتلة كود بتتنفذ لما تستدعيها.
بنستخدم الدوال علشان:

نقسم الكود لأجزاء صغيرة قابلة لإعادة الاستخدام.
ننظم الكود بشكل أوضح.
نمنع التكرار ونقلل الأخطاء.

✅ الشكل العام للدالة (Declaration)

function اسم_الدالة(المعاملات) {
  // الكود اللي يتنفذ لما نستدعي الدالة
}

✅ مثال

function sayHello() {
  console.log("أهلا بيك يا أحمد!");
}

sayHello(); // استدعاء الدالة

✳️ المعاملات (Parameters) والوسائط (Arguments)

Parameter: هو المتغير اللي بتكتبه وانت بتعرف الدالة.
Argument: هو القيمة اللي بتبعتها وانت بتستدعي الدالة.

✅ مثال

function greet(name) { // name هنا Parameter
  console.log("أهلا يا " + name);
}

greet("أحمد"); // "أحمد" هنا Argument

✅ return statement

بتستخدم return علشان ترجع قيمة من الدالة بدل ما تطبعها بس.

✅ مثال

function add(a, b) {
  return a + b;
}

let result = add(3, 4);
console.log("الناتج:", result); // 7

بعد return الكود اللي بعدها مش بيتنفذ

✳️ function expression (تخزين الدالة في متغير)

let sayHi = function() {
  console.log("هاي!");
};

sayHi(); // استدعاء

🟢 Arrow Functions (الدوال بالأسهم)

تم إضافتها في ES6، وهي طريقة مختصرة وعصرية لتعريف الدوال.

✅ الشكل

let اسم_الدالة = (المعاملات) => {
  // كود
}

✅ أمثلة مختلفة:

1. دالة بدون معاملات:

let sayHi = () => {
  console.log("أهلاً!");
};

2. دالة بمعاملات

let greet = (name) => {
  console.log("أهلاً يا " + name);
};

3. دالة ترجع قيمة (مختصرة):

let square = (n) => n * n;

console.log(square(4)); // 16

ملاحظة: لو في سطر واحد بس بيرجع قيمة، تقدر تشيل {} و return.

✅ 💯 مثال شامل لكل المفاهيم:

<!DOCTYPE html>
<html>
<head>
  <title>Functions in JavaScript</title>
</head>
<body>
  <h2>افتح الكونسول (F12) علشان تشوف النتائج</h2>

  <script>
    // 1. Function Declaration
    function sayHello() {
      console.log("أهلاً بيك!");
    }

    sayHello();

    // 2. Function with Parameters and Return
    function add(a, b) {
      return a + b;
    }

    let sum = add(10, 5);
    console.log("ناتج الجمع:", sum);

    // 3. Function Expression
    let multiply = function(x, y) {
      return x * y;
    };

    console.log("ناتج الضرب:", multiply(3, 4));

    // 4. Arrow Function (عصرية)
    let greet = (name) => {
      console.log("أهلاً يا " + name);
    };

    greet("أحمد");

    // 5. Arrow Function ترجع قيمة بشكل مختصر
    let square = (n) => n * n;

    console.log("تربيع 6 =", square(6));
  </script>
</body>
</html>

الكود ده بيشرح الأنواع المختلفة للدوال باستخدام أمثلة عملية وسهلة.