JavaScript
الدوال في JavaScript — دليل شامل Functions 2026
📅 2026-09-25⏱ 8 دقائق قراءة
في المقال السابق، تعلمت الحلقات وكيف تكرر المهام. لكن ماذا لو أردت تنفيذ **نفس المهمة** في أماكن مختلفة من البرنامج؟ هنا تأتي **الدوال (Functions)** — وهي حجر الأساس في تنظيم الكود.
في هذا الدليل العملي، سنأخذك خطوة بخطوة لفهم الدوال في JavaScript — من التعريف البسيط إلى الدوال السهمية، مع تمارين وحلول.
## ما هي الدالة؟
الدالة هي **كتلة من الكود** لها اسم، تؤدي مهمة محددة، ويمكن استدعاؤها عدة مرات.
**تشبيه بسيط:** تخيل أن الدالة هي "آلة" — تدخل فيها مدخلات (معاملات)، وتخرج منها نتيجة.
**مثال:**
```javascript
function greet() {
console.log("مرحباً بالعالم!");
}
greet(); // استدعاء الدالة
greet(); // استدعاء مرة أخرى
```
**النتيجة:**
```bash
مرحباً بالعالم!
مرحباً بالعالم!
```
**شرح:**
- **`function`:** كلمة مفتاحية لتعريف الدالة.
- **`greet`:** اسم الدالة.
- **`()`:** قوسان للمعاملات (فارغة هنا).
- **`{ ... }`:** جسم الدالة (الكود الذي ينفذ).
- **`greet();`:** استدعاء الدالة.
## لماذا نحتاج الدوال؟
- **إعادة الاستخدام:** اكتب مرة، استخدم عدة مرات.
- **التنظيم:** قسم البرنامج إلى أجزاء صغيرة.
- **سهولة الصيانة:** عدّل في مكان واحد.
- **الوضوح:** الكود يصبح أسهل للقراءة.
- **الاختبار:** يمكن اختبار كل دالة على حدة.
### مثال: بدون دوال vs مع دوال
**بدون دوال:**
```javascript
console.log("مرحباً أحمد");
console.log("مرحباً محمد");
console.log("مرحباً علي");
console.log("مرحباً فاطمة");
```
**مع دوال:**
```javascript
function greet(name) {
console.log("مرحباً " + name);
}
greet("أحمد");
greet("محمد");
greet("علي");
greet("فاطمة");
```
## المعاملات (Parameters)
المعاملات هي **مدخلات** الدالة. تُمرر بين القوسين `()`.
```javascript
function greet(name) {
console.log("مرحباً " + name);
}
greet("أحمد"); // مرحباً أحمد
greet("محمد"); // مرحباً محمد
```
**شرح:**
- **`name`:** معامل (parameter) — متغير داخل الدالة.
- **`"أحمد"`:** قيمة (argument) — ما تمرره عند الاستدعاء.
### عدة معاملات:
```javascript
function introduce(name, age) {
console.log("اسمي " + name + " وعمري " + age);
}
introduce("أحمد", 25);
```
**النتيجة:**
```bash
اسمي أحمد وعمري 25
```
### قيم افتراضية للمعاملات:
```javascript
function greet(name = "زائر") {
console.log("مرحباً " + name);
}
greet(); // مرحباً زائر
greet("أحمد"); // مرحباً أحمد
```
## القيم المرجعة (Return)
الدالة يمكن أن **تُرجع** قيمة باستخدام `return`.
```javascript
function add(a, b) {
return a + b;
}
const result = add(5, 3);
console.log(result); // 8
```
**الفرق بين `console.log` و `return`:**
- **`console.log`:** تطبع في الطرفية (للعرض فقط).
- **`return`:** تُرجع قيمة يمكن استخدامها في الكود.
```javascript
// بدون return:
function add1(a, b) {
console.log(a + b);
}
const x = add1(5, 3); // يطبع 8، لكن x = undefined
// مع return:
function add2(a, b) {
return a + b;
}
const y = add2(5, 3); // y = 8
```
**⚠️ مهم:** بعد `return`، تتوقف الدالة عن التنفيذ.
```javascript
function test() {
return "أول";
console.log("هذا لن ينفذ"); // ❌ لا يظهر
}
console.log(test()); // "أول"
```
## أنواع الدوال
### 1. Function Declaration — التعريف التقليدي
```javascript
function greet(name) {
return "مرحباً " + name;
}
```
**ميزتها:** يمكن استدعاؤها قبل تعريفها (hoisting).
### 2. Function Expression — تعبير دالة
```javascript
const greet = function(name) {
return "مرحباً " + name;
};
```
**الفرق:** لا يمكن استدعاؤها قبل التعريف.
### 3. Arrow Function — الدالة السهمية
طريقة حديثة ومختصرة:
```javascript
const greet = (name) => {
return "مرحباً " + name;
};
// أو أقصر (إذا كان سطراً واحداً):
const greet = (name) => "مرحباً " + name;
```
**ميزاتها:**
- أقصر.
- لا تحتاج `function`.
- إذا كان السطر واحداً، يمكن حذف `{}` و `return`.
**مثال:**
```javascript
const add = (a, b) => a + b;
console.log(add(5, 3)); // 8
```
### 4. دالة بدون معاملات:
```javascript
const greet = () => "مرحباً!";
console.log(greet()); // مرحباً!
```
## جدول مقارنة بين أنواع الدوال
<table>
<thead>
<tr>
<th>النوع</th>
<th>الصيغة</th>
<th>الاستخدام</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Declaration</strong></td>
<td><code>function name() {}</code></td>
<td>الطريقة التقليدية</td>
</tr>
<tr>
<td><strong>Expression</strong></td>
<td><code>const name = function() {}</code></td>
<td>عند تمرير دالة كقيمة</td>
</tr>
<tr>
<td><strong>Arrow</strong></td>
<td><code>const name = () => {}</code></td>
<td>الطريقة الحديثة</td>
</tr>
</tbody>
</table>
## نطاق المتغيرات (Scope)
المتغيرات داخل الدالة **لا يمكن** الوصول إليها من خارجها.
```javascript
function test() {
const message = "داخل الدالة";
console.log(message); // يعمل
}
test();
console.log(message); // ❌ خطأ: message is not defined
```
**الفرق:**
- **المتغيرات المحلية (Local):** داخل الدالة فقط.
- **المتغيرات العامة (Global):** خارج أي دالة.
```javascript
const global = "عام";
function test() {
const local = "محلي";
console.log(global); // ✅ يعمل
console.log(local); // ✅ يعمل
}
test();
console.log(global); // ✅ يعمل
console.log(local); // ❌ خطأ
```
## الدوال المُرجَعة (Callbacks)
يمكن تمرير دالة كمعامل لدالة أخرى:
```javascript
function greet(name, callback) {
console.log("مرحباً " + name);
callback();
}
function sayGoodbye() {
console.log("إلى اللقاء!");
}
greet("أحمد", sayGoodbye);
```
**النتيجة:**
```bash
مرحباً أحمد
إلى اللقاء!
```
**الاستخدام:** شائع جداً في JavaScript (مثل `map`, `filter`, `setTimeout`).
## الدوال المجهولة (Anonymous Functions)
دالة بدون اسم، تُستخدم كقيمة:
```javascript
const greet = function(name) {
return "مرحباً " + name;
};
console.log(greet("أحمد")); // مرحباً أحمد
```
**أو مع `setTimeout`:**
```javascript
setTimeout(function() {
console.log("بعد ثانيتين");
}, 2000);
```
## الدوال العودية (Recursion)
الدالة التي تستدعي نفسها:
```javascript
function factorial(n) {
if (n === 0 || n === 1) {
return 1;
}
return n * factorial(n - 1);
}
console.log(factorial(5)); // 120
```
**شرح:**
- `factorial(5)` = 5 × `factorial(4)`
- `factorial(4)` = 4 × `factorial(3)`
- ...
- `factorial(1)` = 1
**⚠️ تحذير:** تأكد من وجود **حالة توقف** (base case)، وإلا ستحدث حلقة لا نهائية.
## تمرير المعاملات: by Value vs by Reference
**بالقيمة (Value):** للمتغيرات البسيطة (رقم، نص، منطقي).
```javascript
function changeValue(x) {
x = 100;
}
let num = 5;
changeValue(num);
console.log(num); // 5 (لم يتغير)
```
**بالمرجع (Reference):** للكائنات والمصفوفات.
```javascript
function changeArray(arr) {
arr.push(4);
}
let numbers = [1, 2, 3];
changeArray(numbers);
console.log(numbers); // [1, 2, 3, 4] (تغير!)
```
## تمارين عملية
### تمرين 1: دالة الترحيب
اكتب دالة تأخذ اسماً وترجع "مرحباً [الاسم]".
**الحل:**
```javascript
function greet(name) {
return "مرحباً " + name;
}
console.log(greet("أحمد")); // مرحباً أحمد
```
### تمرين 2: دالة المجموع
اكتب دالة تأخذ رقمين وترجع مجموعهما.
**الحل:**
```javascript
const add = (a, b) => a + b;
console.log(add(5, 3)); // 8
console.log(add(10, 20)); // 30
```
### تمرين 3: دالة الأكبر
اكتب دالة تأخذ رقمين وترجع الأكبر.
**الحل:**
```javascript
function max(a, b) {
return a > b ? a : b;
}
console.log(max(5, 10)); // 10
console.log(max(20, 8)); // 20
```
### تمرين 4: دالة الزوجي
اكتب دالة تتحقق إذا كان الرقم زوجياً.
**الحل:**
```javascript
const isEven = (num) => num % 2 === 0;
console.log(isEven(4)); // true
console.log(isEven(7)); // false
```
### تمرين 5: دالة المساحة
اكتب دالة تحسب مساحة مستطيل.
**الحل:**
```javascript
function area(width, height) {
return width * height;
}
console.log(area(5, 10)); // 50
```
### تمرين 6: دالة المتوسط
اكتب دالة تأخذ مصفوفة أرقام وترجع متوسطها.
**الحل:**
```javascript
function average(numbers) {
let sum = 0;
for (const num of numbers) {
sum += num;
}
return sum / numbers.length;
}
console.log(average([10, 20, 30, 40])); // 25
```
### تمرين 7: دالة العكس
اكتب دالة تعكس نصاً.
**الحل:**
```javascript
function reverseString(str) {
return str.split("").reverse().join("");
}
console.log(reverseString("أحمد")); // دمحأ
```
### تمرين 8: دالة Factorial
اكتب دالة تحسب مضروب رقم (بشكل عودي).
**الحل:**
```javascript
function factorial(n) {
if (n <= 1) return 1;
return n * factorial(n - 1);
}
console.log(factorial(5)); // 120
```
## حل المشاكل الشائعة
### 🔴 المشكلة 1: `undefined` كنتيجة
**السبب:** نسيت `return`.
```javascript
// خطأ:
function add(a, b) {
a + b; // لا return
}
console.log(add(5, 3)); // undefined
// صحيح:
function add(a, b) {
return a + b;
}
console.log(add(5, 3)); // 8
```
### 🔴 المشكلة 2: `is not a function`
**السبب:** استدعاء متغير كدالة، لكنه ليس دالة.
```javascript
const x = 5;
x(); // ❌ x is not a function
```
### 🔴 المشكلة 3: `this` في Arrow Functions
**السبب:** Arrow Functions لا تملك `this` خاصاً بها.
```javascript
// خطأ:
const obj = {
name: "أحمد",
greet: () => {
console.log(this.name); // undefined
}
};
// صحيح:
const obj = {
name: "أحمد",
greet: function() {
console.log(this.name); // أحمد
}
};
```
### 🔴 المشكلة 4: نسيان استدعاء الدالة
**السبب:** كتابة اسم الدالة بدون `()`.
```javascript
function greet() {
console.log("مرحباً");
}
greet; // ❌ لا ينفذ
greet(); // ✅ ينفذ
```
## جدول الأوامر الأساسية
<table>
<thead>
<tr>
<th>الأمر</th>
<th>الوظيفة</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>function name() {}</code></td>
<td>تعريف دالة</td>
</tr>
<tr>
<td><code>const name = () => {}</code></td>
<td>دالة سهمية</td>
</tr>
<tr>
<td><code>return value;</code></td>
<td>إرجاع قيمة</td>
</tr>
<tr>
<td><code>name(args);</code></td>
<td>استدعاء دالة</td>
</tr>
<tr>
<td><code>function(a, b = 5) {}</code></td>
<td>قيمة افتراضية</td>
</tr>
</tbody>
</table>
## قائمة تحقق نهائية
<table>
<thead>
<tr>
<th>المهمة</th>
<th>الحالة</th>
</tr>
</thead>
<tbody>
<tr>
<td>فهم تعريف الدوال واستدعاؤها</td>
<td>⬜</td>
</tr>
<tr>
<td>استخدام المعاملات والقيم المرجعة</td>
<td>⬜</td>
</tr>
<tr>
<td>الفرق بين Function Declaration و Expression</td>
<td>⬜</td>
</tr>
<tr>
<td>استخدام Arrow Functions</td>
<td>⬜</td>
</tr>
<tr>
<td>فهم النطاق (Scope)</td>
<td>⬜</td>
</tr>
<tr>
<td>استخدام Callbacks</td>
<td>⬜</td>
</tr>
<tr>
<td>حل التمارين الثمانية</td>
<td>⬜</td>
</tr>
</tbody>
</table>
## ماذا بعد هذا المقال؟
الآن بعد أن أتقنت الدوال، أنت جاهز للمقال التالي:
1. **المصفوفات والكائنات** — هياكل البيانات.
2. **DOM** — التفاعل مع صفحات الويب.
3. **المشاريع العملية** — بناء تطبيقات حقيقية.
## الخلاصة
في هذا المقال، تعلمت:
- ✅ ما هي الدوال ولماذا نحتاجها.
- ✅ المعاملات (Parameters) والقيم المرجعة (Return).
- ✅ أنواع الدوال: Declaration, Expression, Arrow.
- ✅ النطاق (Scope) — محلي وعام.
- ✅ الدوال المُرجَعة (Callbacks).
- ✅ الدوال المجهولة والعودية.
- ✅ تمرير المعاملات: by Value vs by Reference.
**تذكر:** الدوال هي أدواتك الأساسية لتنظيم الكود. كلما أتقنتها، كلما أصبح كودك أنظف وأسهل صيانة.
**هل أتقنت الدوال؟ شاركنا في التعليقات!**