المتغيرات وأنواع البيانات في JavaScript — دليل شامل 2026
دليل عملي مفصل للمتغيرات وأنواع البيانات في JavaScript — let و const و var، وأنواع البيانات الأساسية، مع تمارين وحلول
في المقال السابق، كتبت أول برنامج JavaScript لك واستخدمت let و const بشكل بسيط. الآن حان الوقت للتعمق في المتغيرات و أنواع البيانات — وهما حجر الأساس في أي لغة برمجة.
في هذا الدليل العملي، سنأخذك خطوة بخطوة لفهم كيفية تخزين البيانات في JavaScript، والفرق بين let و const و var، وجميع أنواع البيانات الأساسية، مع تمارين وحلول.
ما هو المتغير؟
المتغير هو صندوق نخزن فيه قيمة، ونعطيه اسماً لنستدعيه لاحقاً.
تشبيه بسيط: تخيل أن لديك صناديق في المخزن، كل صندوق عليه ملصق (اسم)، وداخله شيء ما (قيمة). عندما تحتاج الشيء، تنظر إلى الملصق.
let name = "أحمد";
let age = 25;
let isStudent = true;
شرح:
let: كلمة مفتاحية لتعريف المتغير.name: اسم المتغير (ملصق الصندوق).=: علامة الإسناد (assign)."أحمد": القيمة المخزنة (ما داخل الصندوق).
لماذا نحتاج المتغيرات؟
بدون المتغيرات، سنضطر لكتابة القيم يدوياً في كل مرة:
console.log("أحمد");
console.log("أحمد");
console.log("أحمد");
مع المتغيرات:
let name = "أحمد";
console.log(name);
console.log(name);
console.log(name);
الفوائد:
- إعادة الاستخدام: اكتب القيمة مرة واحدة، استخدمها عدة مرات.
- سهولة التعديل: غيّر القيمة في مكان واحد.
- الوضوح: الكود يصبح أسهل للقراءة والفهم.
- المرونة: يمكن تغيير القيمة أثناء تشغيل البرنامج.
الطرق الثلاث لتعريف المتغيرات
في JavaScript، هناك ثلاث كلمات مفتاحية لتعريف المتغيرات: let و const و var.
1. let — المتغير القابل للتغيير
let هي الطريقة الحديثة والأكثر استخداماً. القيمة يمكن تغييرها لاحقاً.
let age = 25;
console.log(age); // 25
age = 26;
console.log(age); // 26
متى تستخدمها؟ عندما تعرف أن القيمة ستتغير.
2. const — الثابت الذي لا يتغير
const هي الطريقة المفضلة للقيم الثابتة. القيمة لا يمكن تغييرها بعد التعريف.
const country = "الأردن";
console.log(country); // الأردن
country = "مصر"; // ❌ خطأ! لا يمكن إعادة الإسناد
النتيجة:
TypeError: Assignment to constant variable.
متى تستخدمها؟ عندما تكون القيمة ثابتة (مثل: اسم الموقع، قيمة رياضية، ثابت فيزيائي).
3. var — الطريقة القديمة
var هي الطريقة القديمة (قبل 2015). لا يُنصح باستخدامها في الكود الحديث.
var city = "عمان";
console.log(city); // عمان
لماذا تجنب var؟
- نطاقها (scope) غير متوقع: تعمل خارج الكتل
{}. - يمكن إعادة تعريفها: مما يسبب أخطاء.
- سلوك غير متسق: يسبب مشاكل في الحلقات والدوال.
القاعدة الذهبية: استخدم const افتراضياً، وإذا احتجت لتغيير القيمة، استخدم let. تجنب var تماماً.
جدول مقارنة بين let و const و var
| المعيار | let | const | var |
|---|---|---|---|
| إعادة الإسناد | ✅ نعم | ❌ لا | ✅ نعم |
| إعادة التعريف | ❌ لا | ❌ لا | ✅ نعم |
| النطاق (Scope) | Block | Block | Function |
| الرفع (Hoisting) | لا (TDZ) | لا (TDZ) | نعم |
| الاستخدام الحديث | ✅ موصى به | ✅ موصى به | ❌ تجنبه |
قواعد تسمية المتغيرات
اختيار اسم جيد للمتغير مهارة مهمة. اتبع هذه القواعد:
✅ القواعد الصحيحة:
let name = "أحمد";
let userName = "أحمد";
let user_name = "أحمد";
let $price = 100;
let _count = 5;
let user2 = "محمد";
❌ القواعد الخاطئة:
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 — النصوص
النص هو سلسلة من الأحرف، تُكتب بين علامات تنصيص.
let firstName = "أحمد";
let lastName = 'محمد';
let message = `مرحباً ${firstName}`;
console.log(firstName); // أحمد
console.log(lastName); // محمد
console.log(message); // مرحباً أحمد
ملاحظة: يمكن استخدام "..." أو '...' أو `...` (backticks).
2. Number — الأرقام
الأرقام في 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
عمليات حسابية:
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.
let isStudent = true;
let isMarried = false;
let hasJob = true;
console.log(isStudent); // true
console.log(isMarried); // false
// استخدام في الشروط
if (isStudent) {
console.log("أنت طالب");
}
4. Null — القيمة الفارغة
null تعني "لا قيمة" أو "فارغ" بشكل متعمد.
let car = null;
console.log(car); // null
// لاحقاً
car = "تويوتا";
console.log(car); // تويوتا
متى تستخدمها؟ عندما تريد متغيراً فارغاً، لكنك تنوي إعطاءه قيمة لاحقاً.
5. Undefined — غير مُعرّف
undefined تعني "لم يتم إعطاء قيمة بعد".
let name;
console.log(name); // undefined
let age = undefined;
console.log(age); // undefined
الفرق بين null و undefined:
| المعيار | null | undefined |
|---|---|---|
| المعنى | فارغ بشكل متعمد | لم يُعطَ قيمة |
| النوع | object | undefined |
| الاستخدام | أنت تضعه | JavaScript تضعه تلقائياً |
6. Object — الكائنات
الكائن هو مجموعة من أزواج "مفتاح: قيمة".
let person = {
name: "أحمد",
age: 25,
city: "عمان",
isStudent: true,
};
console.log(person.name); // أحمد
console.log(person.age); // 25
console.log(person.city); // عمان
7. Array — المصفوفات
المصفوفة هي قائمة مرتبة من القيم.
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 نوع فريد يُستخدم لتعريف معرفات فريدة.
let id = Symbol("id");
console.log(typeof id); // symbol
ملاحظة: لن تحتاجها كثيراً كمبتدئ. تذكر فقط أنها موجودة.
التحقق من نوع البيانات
استخدم typeof لمعرفة نوع أي قيمة.
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، لا يمكن إصلاحه حالياً.
تحويل أنواع البيانات
يمكن تحويل نوع البيانات من نوع إلى آخر.
تحويل النص إلى رقم
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");
تحويل الرقم إلى نص
let num = 123;
let str = String(num);
console.log(str); // "123"
console.log(typeof str); // string
// طريقة أخرى
let str2 = num.toString();
تحويل إلى Boolean
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:
false0(صفر)""(نص فارغ)nullundefinedNaN(ليس رقماً)
if (0) console.log("لن يظهر");
if ("") console.log("لن يظهر");
if (null) console.log("لن يظهر");
if ("نص") console.log("سيظهر");
if (1) console.log("سيظهر");
تمارين عملية
تمرين 1: تعريف المتغيرات
عرّف متغيرات لتخزين:
- اسمك
- عمرك
- مدينتك
- هل أنت طالب؟
الحل:
const name = "أحمد";
const age = 25;
const city = "عمان";
const isStudent = true;
console.log(name, age, city, isStudent);
تمرين 2: العمليات الحسابية
اكتب برنامجاً يحسب:
- مجموع رقمين
- الفرق بينهما
- حاصل ضربهما
- ناتج قسمتهما
الحل:
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: نوع البيانات
اكتب برنامجاً يطبع نوع كل من المتغيرات التالية:
let a = "نص";
let b = 42;
let c = true;
let d = null;
let e;
الحل:
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.
الحل:
let str = "99";
let num = Number(str);
console.log(num + 1); // 100
تمرين 5: الكائن
أنشئ كائناً book يحتوي على:
- العنوان
- المؤلف
- السنة
- السعر
الحل:
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 مدن، واطبع أول مدينة وآخر مدينة.
الحل:
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.
الحل:
// خطأ:
let name = "أحمد";
let name = "محمد";
// صحيح:
let name = "أحمد";
name = "محمد"; // إعادة إسناد، وليس تعريف
🔴 المشكلة 2: Assignment to constant variable
السبب: حاولت تغيير قيمة const.
الحل: استخدم let بدلاً من const إذا كنت تريد تغيير القيمة.
// خطأ:
const age = 25;
age = 26;
// صحيح:
let age = 25;
age = 26;
🔴 المشكلة 3: NaN في العمليات الحسابية
السبب: تحاول إجراء عملية حسابية على قيمة غير رقمية.
let result = "أحمد" * 5;
console.log(result); // NaN
الحل: تأكد من أن القيم أرقام قبل العمليات.
let num = Number("أحمد"); // NaN
if (isNaN(num)) {
console.log("ليست قيمة رقمية!");
}
🔴 المشكلة 4: undefined غير متوقع
السبب: تحاول الوصول إلى خاصية غير موجودة.
const person = { name: "أحمد" };
console.log(person.age); // undefined
الحل: تحقق من وجود الخاصية قبل استخدامها.
if (person.age !== undefined) {
console.log(person.age);
} else {
console.log("العمر غير محدد");
}
جدول الأوامر الأساسية
| الأمر | الوظيفة |
|---|---|
let x = 5; | تعريف متغير قابل للتغيير |
const y = 10; | تعريف ثابت |
typeof x | إرجاع نوع المتغير |
Number("123") | تحويل نص إلى رقم |
String(123) | تحويل رقم إلى نص |
Boolean(0) | تحويل إلى منطقي |
قائمة تحقق نهائية
| المهمة | الحالة |
|---|---|
| فهم الفرق بين let و const و var | ⬜ |
| معرفة أنواع البيانات الثمانية | ⬜ |
| استخدام typeof للتحقق من النوع | ⬜ |
| تحويل الأنواع (String, Number, Boolean) | ⬜ |
| حل التمارين الستة | ⬜ |
ماذا بعد هذا المقال؟
الآن بعد أن أتقنت المتغيرات وأنواع البيانات، أنت جاهز للمقال التالي:
- الشروط (if/else) — اتخاذ القرارات في الكود.
- الحلقات (for/while) — تكرار المهام.
- الدوال (Functions) — تنظيم الكود.
الخلاصة
في هذا المقال، تعلمت:
- ✅ ما هو المتغير ولماذا نحتاجه.
- ✅ الفرق بين
letوconstوvar. - ✅ قواعد تسمية المتغيرات.
- ✅ أنواع البيانات الثمانية في JavaScript.
- ✅ الفرق بين
nullوundefined. - ✅ تحويل أنواع البيانات.
- ✅ القيم التي تُعتبر
false.
تذكر: البرمجة مهارة تُكتسب بالممارسة. لا تكتفِ بالقراءة — اكتب الكود بنفسك، وجرّب، وارتكب الأخطاء، وتعلم منها.
هل فهمت أنواع البيانات؟ شاركنا في التعليقات!
أول برنامج JavaScript لك — من الكتابة إلى التنفيذ 2026
الشروط في JavaScript — دليل شامل if/else و switch 2026
📚 مقالات ذات صلة
مشروع قائمة المهام بـ JavaScript — دليل عملي شامل 2026
مشروع عملي لبناء تطبيق قائمة مهام كامل بـ JavaScript — إضافة، حذف، تعديل، حفظ تلقائي، مع الكود الكامل والشرح
مشروع آلة حاسبة بـ JavaScript — دليل عملي شامل 2026
مشروع عملي لبناء آلة حاسبة كاملة بـ JavaScript و HTML و CSS — خطوة بخطوة مع الكود الكامل والشرح
التعامل مع DOM في JavaScript — دليل شامل 2026
دليل عملي مفصل للتعامل مع DOM في JavaScript — التحديد، التعديل، الأحداث، الإنشاء، مع تمارين وحلول