JavaScript📅 2026-09-22⏱ 10 دقائق قراءة📜 مقال 3 من 10

المتغيرات وأنواع البيانات في 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

المعيارletconstvar
إعادة الإسناد✅ نعم❌ لا✅ نعم
إعادة التعريف❌ لا❌ لا✅ نعم
النطاق (Scope)BlockBlockFunction
الرفع (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:

المعيارnullundefined
المعنىفارغ بشكل متعمدلم يُعطَ قيمة
النوعobjectundefined
الاستخدامأنت تضعه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:

  • false
  • 0 (صفر)
  • "" (نص فارغ)
  • null
  • undefined
  • NaN (ليس رقماً)
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)⬜
حل التمارين الستة⬜

ماذا بعد هذا المقال؟

الآن بعد أن أتقنت المتغيرات وأنواع البيانات، أنت جاهز للمقال التالي:

  1. الشروط (if/else) — اتخاذ القرارات في الكود.
  2. الحلقات (for/while) — تكرار المهام.
  3. الدوال (Functions) — تنظيم الكود.

الخلاصة

في هذا المقال، تعلمت:

  • ✅ ما هو المتغير ولماذا نحتاجه.
  • ✅ الفرق بين let و const و var.
  • ✅ قواعد تسمية المتغيرات.
  • ✅ أنواع البيانات الثمانية في JavaScript.
  • ✅ الفرق بين null و undefined.
  • ✅ تحويل أنواع البيانات.
  • ✅ القيم التي تُعتبر false.

تذكر: البرمجة مهارة تُكتسب بالممارسة. لا تكتفِ بالقراءة — اكتب الكود بنفسك، وجرّب، وارتكب الأخطاء، وتعلم منها.

هل فهمت أنواع البيانات؟ شاركنا في التعليقات!

📚 مقالات ذات صلة

JavaScript

مشروع قائمة المهام بـ JavaScript — دليل عملي شامل 2026

مشروع عملي لبناء تطبيق قائمة مهام كامل بـ JavaScript — إضافة، حذف، تعديل، حفظ تلقائي، مع الكود الكامل والشرح

JavaScript

مشروع آلة حاسبة بـ JavaScript — دليل عملي شامل 2026

مشروع عملي لبناء آلة حاسبة كاملة بـ JavaScript و HTML و CSS — خطوة بخطوة مع الكود الكامل والشرح

JavaScript

التعامل مع DOM في JavaScript — دليل شامل 2026

دليل عملي مفصل للتعامل مع DOM في JavaScript — التحديد، التعديل، الأحداث، الإنشاء، مع تمارين وحلول