JavaScript
المتغيرات وأنواع البيانات في JavaScript — دليل شامل 2026
📅 2026-09-22⏱ 10 دقائق قراءة
في المقال السابق، كتبت أول برنامج JavaScript لك واستخدمت `let` و `const` بشكل بسيط. الآن حان الوقت للتعمق في **المتغيرات** و **أنواع البيانات** — وهما حجر الأساس في أي لغة برمجة.
في هذا الدليل العملي، سنأخذك خطوة بخطوة لفهم كيفية تخزين البيانات في JavaScript، والفرق بين `let` و `const` و `var`، وجميع أنواع البيانات الأساسية، مع تمارين وحلول.
## ما هو المتغير؟
المتغير هو **صندوق** نخزن فيه قيمة، ونعطيه اسماً لنستدعيه لاحقاً.
**تشبيه بسيط:** تخيل أن لديك صناديق في المخزن، كل صندوق عليه ملصق (اسم)، وداخله شيء ما (قيمة). عندما تحتاج الشيء، تنظر إلى الملصق.
```javascript
let name = "أحمد";
let age = 25;
let isStudent = true;
```
**شرح:**
- **`let`:** كلمة مفتاحية لتعريف المتغير.
- **`name`:** اسم المتغير (ملصق الصندوق).
- **`=`:** علامة الإسناد (assign).
- **`"أحمد"`:** القيمة المخزنة (ما داخل الصندوق).
## لماذا نحتاج المتغيرات؟
بدون المتغيرات، سنضطر لكتابة القيم يدوياً في كل مرة:
```javascript
console.log("أحمد");
console.log("أحمد");
console.log("أحمد");
```
مع المتغيرات:
```javascript
let name = "أحمد";
console.log(name);
console.log(name);
console.log(name);
```
**الفوائد:**
- **إعادة الاستخدام:** اكتب القيمة مرة واحدة، استخدمها عدة مرات.
- **سهولة التعديل:** غيّر القيمة في مكان واحد.
- **الوضوح:** الكود يصبح أسهل للقراءة والفهم.
- **المرونة:** يمكن تغيير القيمة أثناء تشغيل البرنامج.
## الطرق الثلاث لتعريف المتغيرات
في JavaScript، هناك ثلاث كلمات مفتاحية لتعريف المتغيرات: `let` و `const` و `var`.
### 1. `let` — المتغير القابل للتغيير
`let` هي الطريقة الحديثة والأكثر استخداماً. القيمة **يمكن** تغييرها لاحقاً.
```javascript
let age = 25;
console.log(age); // 25
age = 26;
console.log(age); // 26
```
**متى تستخدمها؟** عندما تعرف أن القيمة ستتغير.
### 2. `const` — الثابت الذي لا يتغير
`const` هي الطريقة المفضلة للقيم الثابتة. القيمة **لا يمكن** تغييرها بعد التعريف.
```javascript
const country = "الأردن";
console.log(country); // الأردن
country = "مصر"; // ❌ خطأ! لا يمكن إعادة الإسناد
```
**النتيجة:**
```bash
TypeError: Assignment to constant variable.
```
**متى تستخدمها؟** عندما تكون القيمة ثابتة (مثل: اسم الموقع، قيمة رياضية، ثابت فيزيائي).
### 3. `var` — الطريقة القديمة
`var` هي الطريقة القديمة (قبل 2015). **لا يُنصح باستخدامها** في الكود الحديث.
```javascript
var city = "عمان";
console.log(city); // عمان
```
**لماذا تجنب `var`؟**
- **نطاقها (scope) غير متوقع:** تعمل خارج الكتل `{}`.
- **يمكن إعادة تعريفها:** مما يسبب أخطاء.
- **سلوك غير متسق:** يسبب مشاكل في الحلقات والدوال.
**القاعدة الذهبية:** استخدم `const` افتراضياً، وإذا احتجت لتغيير القيمة، استخدم `let`. **تجنب `var` تماماً.**
## جدول مقارنة بين let و const و var
<table>
<thead>
<tr>
<th>المعيار</th>
<th>let</th>
<th>const</th>
<th>var</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>إعادة الإسناد</strong></td>
<td>✅ نعم</td>
<td>❌ لا</td>
<td>✅ نعم</td>
</tr>
<tr>
<td><strong>إعادة التعريف</strong></td>
<td>❌ لا</td>
<td>❌ لا</td>
<td>✅ نعم</td>
</tr>
<tr>
<td><strong>النطاق (Scope)</strong></td>
<td>Block</td>
<td>Block</td>
<td>Function</td>
</tr>
<tr>
<td><strong>الرفع (Hoisting)</strong></td>
<td>لا (TDZ)</td>
<td>لا (TDZ)</td>
<td>نعم</td>
</tr>
<tr>
<td><strong>الاستخدام الحديث</strong></td>
<td>✅ موصى به</td>
<td>✅ موصى به</td>
<td>❌ تجنبه</td>
</tr>
</tbody>
</table>
## قواعد تسمية المتغيرات
اختيار اسم جيد للمتغير مهارة مهمة. اتبع هذه القواعد:
### ✅ القواعد الصحيحة:
```javascript
let name = "أحمد";
let userName = "أحمد";
let user_name = "أحمد";
let $price = 100;
let _count = 5;
let user2 = "محمد";
```
### ❌ القواعد الخاطئة:
```javascript
let 2user = "أحمد"; // لا يبدأ برقم
let user-name = "أحمد"; // لا يحتوي على شرطة
let user name = "أحمد"; // لا يحتوي على مسافة
let class = "A"; // كلمة محجوزة
let let = 5; // كلمة محجوزة
```
### 📝 أفضل الممارسات:
- **استخدم `camelCase`:** `userName` بدلاً من `user_name` أو `UserName`.
- **أسماء وصفية:** `userAge` أفضل من `x` أو `a`.
- **تجنب الأسماء المختصرة:** إلا إذا كانت واضحة (`i` في الحلقات مقبولة).
- **اللغة الإنجليزية:** استخدم أسماء إنجليزية لسهولة المشاركة.
## أنواع البيانات في JavaScript
JavaScript لغة **ديناميكية**، مما يعني أن نوع المتغير يُحدد تلقائياً حسب القيمة. هناك **8 أنواع** أساسية:
### 1. String — النصوص
النص هو سلسلة من الأحرف، تُكتب بين علامات تنصيص.
```javascript
let firstName = "أحمد";
let lastName = 'محمد';
let message = `مرحباً ${firstName}`;
console.log(firstName); // أحمد
console.log(lastName); // محمد
console.log(message); // مرحباً أحمد
```
**ملاحظة:** يمكن استخدام `"..."` أو `'...'` أو `` `...` `` (backticks).
### 2. Number — الأرقام
الأرقام في JavaScript تشمل الصحيحة والعشرية.
```javascript
let age = 25;
let price = 99.99;
let temperature = -5;
let bigNumber = 1000000;
console.log(age); // 25
console.log(price); // 99.99
console.log(temperature); // -5
```
**عمليات حسابية:**
```javascript
let a = 10;
let b = 3;
console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.3333...
console.log(a % b); // 1 (الباقي)
console.log(a ** b); // 1000 (10^3)
```
### 3. Boolean — القيم المنطقية
Boolean له قيمتان فقط: `true` أو `false`.
```javascript
let isStudent = true;
let isMarried = false;
let hasJob = true;
console.log(isStudent); // true
console.log(isMarried); // false
// استخدام في الشروط
if (isStudent) {
console.log("أنت طالب");
}
```
### 4. Null — القيمة الفارغة
`null` تعني "لا قيمة" أو "فارغ" بشكل متعمد.
```javascript
let car = null;
console.log(car); // null
// لاحقاً
car = "تويوتا";
console.log(car); // تويوتا
```
**متى تستخدمها؟** عندما تريد متغيراً فارغاً، لكنك تنوي إعطاءه قيمة لاحقاً.
### 5. Undefined — غير مُعرّف
`undefined` تعني "لم يتم إعطاء قيمة بعد".
```javascript
let name;
console.log(name); // undefined
let age = undefined;
console.log(age); // undefined
```
**الفرق بين null و undefined:**
<table>
<thead>
<tr>
<th>المعيار</th>
<th>null</th>
<th>undefined</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>المعنى</strong></td>
<td>فارغ بشكل متعمد</td>
<td>لم يُعطَ قيمة</td>
</tr>
<tr>
<td><strong>النوع</strong></td>
<td>object</td>
<td>undefined</td>
</tr>
<tr>
<td><strong>الاستخدام</strong></td>
<td>أنت تضعه</td>
<td>JavaScript تضعه تلقائياً</td>
</tr>
</tbody>
</table>
### 6. Object — الكائنات
الكائن هو مجموعة من أزواج "مفتاح: قيمة".
```javascript
let person = {
name: "أحمد",
age: 25,
city: "عمان",
isStudent: true,
};
console.log(person.name); // أحمد
console.log(person.age); // 25
console.log(person.city); // عمان
```
### 7. Array — المصفوفات
المصفوفة هي قائمة مرتبة من القيم.
```javascript
let fruits = ["تفاح", "موز", "برتقال"];
let numbers = [1, 2, 3, 4, 5];
let mixed = ["أحمد", 25, true, null];
console.log(fruits[0]); // تفاح
console.log(fruits[1]); // موز
console.log(fruits.length); // 3
```
### 8. Symbol — الرموز (متقدم)
`Symbol` نوع فريد يُستخدم لتعريف معرفات فريدة.
```javascript
let id = Symbol("id");
console.log(typeof id); // symbol
```
**ملاحظة:** لن تحتاجها كثيراً كمبتدئ. تذكر فقط أنها موجودة.
## التحقق من نوع البيانات
استخدم `typeof` لمعرفة نوع أي قيمة.
```javascript
console.log(typeof "أحمد"); // string
console.log(typeof 25); // number
console.log(typeof true); // boolean
console.log(typeof undefined); // undefined
console.log(typeof null); // object ⚠️ (هذا خطأ معروف في JavaScript)
console.log(typeof {}); // object
console.log(typeof []); // object ⚠️
console.log(typeof function(){}); // function
```
**⚠️ ملاحظة:** `typeof null` يُرجع `"object"` — وهذا خطأ تاريخي في JavaScript، لا يمكن إصلاحه حالياً.
## تحويل أنواع البيانات
يمكن تحويل نوع البيانات من نوع إلى آخر.
### تحويل النص إلى رقم
```javascript
let str = "123";
let num = Number(str);
console.log(num); // 123
console.log(typeof num); // number
// طرق أخرى
let num2 = parseInt("123");
let num3 = parseFloat("99.99");
```
### تحويل الرقم إلى نص
```javascript
let num = 123;
let str = String(num);
console.log(str); // "123"
console.log(typeof str); // string
// طريقة أخرى
let str2 = num.toString();
```
### تحويل إلى Boolean
```javascript
console.log(Boolean(1)); // true
console.log(Boolean(0)); // false
console.log(Boolean("")); // false
console.log(Boolean("نص")); // true
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
```
## القيم التي تُعتبر false
هناك 6 قيم في JavaScript تُعتبر `false` عند تحويلها إلى Boolean:
- `false`
- `0` (صفر)
- `""` (نص فارغ)
- `null`
- `undefined`
- `NaN` (ليس رقماً)
```javascript
if (0) console.log("لن يظهر");
if ("") console.log("لن يظهر");
if (null) console.log("لن يظهر");
if ("نص") console.log("سيظهر");
if (1) console.log("سيظهر");
```
## تمارين عملية
### تمرين 1: تعريف المتغيرات
عرّف متغيرات لتخزين:
- اسمك
- عمرك
- مدينتك
- هل أنت طالب؟
**الحل:**
```javascript
const name = "أحمد";
const age = 25;
const city = "عمان";
const isStudent = true;
console.log(name, age, city, isStudent);
```
### تمرين 2: العمليات الحسابية
اكتب برنامجاً يحسب:
- مجموع رقمين
- الفرق بينهما
- حاصل ضربهما
- ناتج قسمتهما
**الحل:**
```javascript
const num1 = 20;
const num2 = 5;
console.log("المجموع:", num1 + num2); // 25
console.log("الفرق:", num1 - num2); // 15
console.log("الضرب:", num1 * num2); // 100
console.log("القسمة:", num1 / num2); // 4
```
### تمرين 3: نوع البيانات
اكتب برنامجاً يطبع نوع كل من المتغيرات التالية:
```javascript
let a = "نص";
let b = 42;
let c = true;
let d = null;
let e;
```
**الحل:**
```javascript
let a = "نص";
let b = 42;
let c = true;
let d = null;
let e;
console.log(typeof a); // string
console.log(typeof b); // number
console.log(typeof c); // boolean
console.log(typeof d); // object
console.log(typeof e); // undefined
```
### تمرين 4: تحويل الأنواع
حوّل النص `"99"` إلى رقم، ثم أضف إليه `1`.
**الحل:**
```javascript
let str = "99";
let num = Number(str);
console.log(num + 1); // 100
```
### تمرين 5: الكائن
أنشئ كائناً `book` يحتوي على:
- العنوان
- المؤلف
- السنة
- السعر
**الحل:**
```javascript
const book = {
title: "تعلم JavaScript",
author: "أحمد محمد",
year: 2026,
price: 49.99,
};
console.log(book.title); // تعلم JavaScript
console.log(book.author); // أحمد محمد
console.log(book.year); // 2026
console.log(book.price); // 49.99
```
### تمرين 6: المصفوفة
أنشئ مصفوفة بأسماء 5 مدن، واطبع أول مدينة وآخر مدينة.
**الحل:**
```javascript
const cities = ["عمان", "القاهرة", "الرياض", "دبي", "بيروت"];
console.log(cities[0]); // عمان
console.log(cities[cities.length - 1]); // بيروت
console.log(cities.length); // 5
```
## حل المشاكل الشائعة
### 🔴 المشكلة 1: `Cannot redeclare block-scoped variable`
**السبب:** حاولت تعريف متغير بنفس الاسم مرتين باستخدام `let` أو `const`.
**الحل:**
```javascript
// خطأ:
let name = "أحمد";
let name = "محمد";
// صحيح:
let name = "أحمد";
name = "محمد"; // إعادة إسناد، وليس تعريف
```
### 🔴 المشكلة 2: `Assignment to constant variable`
**السبب:** حاولت تغيير قيمة `const`.
**الحل:** استخدم `let` بدلاً من `const` إذا كنت تريد تغيير القيمة.
```javascript
// خطأ:
const age = 25;
age = 26;
// صحيح:
let age = 25;
age = 26;
```
### 🔴 المشكلة 3: `NaN` في العمليات الحسابية
**السبب:** تحاول إجراء عملية حسابية على قيمة غير رقمية.
```javascript
let result = "أحمد" * 5;
console.log(result); // NaN
```
**الحل:** تأكد من أن القيم أرقام قبل العمليات.
```javascript
let num = Number("أحمد"); // NaN
if (isNaN(num)) {
console.log("ليست قيمة رقمية!");
}
```
### 🔴 المشكلة 4: `undefined` غير متوقع
**السبب:** تحاول الوصول إلى خاصية غير موجودة.
```javascript
const person = { name: "أحمد" };
console.log(person.age); // undefined
```
**الحل:** تحقق من وجود الخاصية قبل استخدامها.
```javascript
if (person.age !== undefined) {
console.log(person.age);
} else {
console.log("العمر غير محدد");
}
```
## جدول الأوامر الأساسية
<table>
<thead>
<tr>
<th>الأمر</th>
<th>الوظيفة</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>let x = 5;</code></td>
<td>تعريف متغير قابل للتغيير</td>
</tr>
<tr>
<td><code>const y = 10;</code></td>
<td>تعريف ثابت</td>
</tr>
<tr>
<td><code>typeof x</code></td>
<td>إرجاع نوع المتغير</td>
</tr>
<tr>
<td><code>Number("123")</code></td>
<td>تحويل نص إلى رقم</td>
</tr>
<tr>
<td><code>String(123)</code></td>
<td>تحويل رقم إلى نص</td>
</tr>
<tr>
<td><code>Boolean(0)</code></td>
<td>تحويل إلى منطقي</td>
</tr>
</tbody>
</table>
## قائمة تحقق نهائية
<table>
<thead>
<tr>
<th>المهمة</th>
<th>الحالة</th>
</tr>
</thead>
<tbody>
<tr>
<td>فهم الفرق بين let و const و var</td>
<td>⬜</td>
</tr>
<tr>
<td>معرفة أنواع البيانات الثمانية</td>
<td>⬜</td>
</tr>
<tr>
<td>استخدام typeof للتحقق من النوع</td>
<td>⬜</td>
</tr>
<tr>
<td>تحويل الأنواع (String, Number, Boolean)</td>
<td>⬜</td>
</tr>
<tr>
<td>حل التمارين الستة</td>
<td>⬜</td>
</tr>
</tbody>
</table>
## ماذا بعد هذا المقال؟
الآن بعد أن أتقنت المتغيرات وأنواع البيانات، أنت جاهز للمقال التالي:
1. **الشروط (if/else)** — اتخاذ القرارات في الكود.
2. **الحلقات (for/while)** — تكرار المهام.
3. **الدوال (Functions)** — تنظيم الكود.
## الخلاصة
في هذا المقال، تعلمت:
- ✅ ما هو المتغير ولماذا نحتاجه.
- ✅ الفرق بين `let` و `const` و `var`.
- ✅ قواعد تسمية المتغيرات.
- ✅ أنواع البيانات الثمانية في JavaScript.
- ✅ الفرق بين `null` و `undefined`.
- ✅ تحويل أنواع البيانات.
- ✅ القيم التي تُعتبر `false`.
**تذكر:** البرمجة مهارة تُكتسب بالممارسة. لا تكتفِ بالقراءة — اكتب الكود بنفسك، وجرّب، وارتكب الأخطاء، وتعلم منها.
**هل فهمت أنواع البيانات؟ شاركنا في التعليقات!**