الدرس 2: المتغيرات والأنواع

📦 ما هي المتغيرات ولماذا نحتاجها؟

المتغير (Variable) هو حاوية (Container) لتخزين قيمة معينة في ذاكرة الكمبيوتر. تخيله كصندوق له اسم مكتوب عليه، وبداخله قيمة يمكنك استخدامها أو تغييرها لاحقاً.

بدون متغيرات، لن تستطيع:

📝 تخزين اسم المستخدم بعد تسجيل الدخول
🛒 حفظ سعر المنتجات في عربة التسوق
🎮 تتبع نقاط اللاعب في لعبة
📊 جمع البيانات من نموذج ومعالجتها

💡 مثال من الحياة اليومية:

تخيل إنك بتشتري من سوبر ماركت. كل منتج له سعر (متغير) وكمية (متغير تاني). عند الخروج، الكاشير يجمع كل الأسعار (المتغيرات) ويحسب الإجمالي. هذا بالضبط ما تفعله المتغيرات في البرمجة!

🔑 الفرق بين let, const, و var

JavaScript توفر ثلاث طرق لإنشاء متغيرات. كل واحدة لها استخدامها الخاص وسلوكها المختلف. فهم الفرق بينهم ضروري لكتابة كود نظيف وخالٍ من الأخطاء.

1. let — المتغير القابل للتغيير

تُستخدم let لإنشاء متغير يمكن تغيير قيمته لاحقاً. هذا هو الخيار الافتراضي في معظم الحالات.

// إنشاء متغير باستخدام let
let userName = "أحمد";
console.log(userName);  // "أحمد"

// تغيير القيمة — مسموح تماماً
userName = "محمد";
console.log(userName);  // "محمد"

// let تدعم Block Scope (نطاق الكتلة)
if (true) {
    let age = 25;
    console.log(age);  // 25 — يعمل هنا
}
// console.log(age);  // ✗ خطأ! age غير معرف خارج if
            

2. const — الثابت الذي لا يتغير

تُستخدم const للقيم التي لن تتغير أبداً أثناء تنفيذ البرنامج. مثال: قيمة PI، رقم API، إعدادات التطبيق.

// إنشاء ثابت باستخدام const
const PI = 3.14159;
const API_URL = "https://api.example.com";
const MAX_USERS = 100;

// محاولة التغيير — ستُنتج خطأ
// PI = 3.15;  // ✗ TypeError: Assignment to constant variable

// ملاحظة مهمة: const تحمي المرجع فقط، لكن ليس محتوى الكائن
const user = { name: "أحمد", age: 25 };
user.age = 26;  // ✓ مسموح — تغيير خاصية
// user = {};  // ✗ خطأ — لا يمكن تغيير المرجع
            

3. var — القديم الذي يجب تجنبه

var هو الطريقة القديمة لإنشاء متغيرات (منذ إصدار JavaScript عام 1995). لها مشاكل خطيرة في Hoisting و Function Scope تجعل الكود صعب التنبؤ به.

// مشكلة Hoisting مع var
console.log(x);  // undefined — لا خطأ!
var x = 10;

// مشكلة Function Scope — المتغير يتسرب خارج if
if (true) {
    var leaked = "سأظهر خارج if!";
}
console.log(leaked);  // "سأظهر خارج if!" — مشكلة!
            

⚠️ القاعدة الذهبية:

استخدم const افتراضياً. إذا احتجت تغيير القيمة، استخدم let. تجنب var تماماً في أي كود جديد.

الخاصية	var	let	const
إعادة التعيين	✓ نعم	✓ نعم	✗ لا
إعادة الإعلان	✓ نعم	✗ لا	✗ لا
Block Scope	✗ لا	✓ نعم	✓ نعم
Hoisting	⚠️ نعم (undefined)	✓ نعم (TDZ)	✓ نعم (TDZ)
متى تستخدم	❌ تجنبها	متغيرات متغيرة	ثوابت ومراجع ثابتة

🎯 أنواع البيانات في JavaScript

JavaScript هي لغة dynamically typed — أي أنك لا تحتاج لتحديد نوع المتغير عند إنشائه. المتصفح يكتشف النوع تلقائياً. لكن فهم الأنواع ضروري لتجنب الأخطاء.

1. String — النصوص

تُستخدم لتخزين النصوص. يمكن كتابتها بين علامات تنصيص مفردة ('), مزدوجة ("), أو backticks (`).

let firstName = "أحمد";
let lastName = 'علي';
let fullName = `الاسم الكامل: ${firstName} ${lastName}`;
console.log(fullName);  // "الاسم الكامل: أحمد علي"
            

2. Number — الأرقام

JavaScript لا تميز بين الأعداد الصحيحة (Integer) والعشرية (Float). كلاهما نوع Number.

let age = 25;           // عدد صحيح
let price = 19.99;      // عدد عشري
let bigNumber = 1e10;   // 10,000,000,000
let infinity = Infinity;  // قيمة خاصة
let notANumber = NaN;   // Not a Number
            

3. Boolean — القيم المنطقية

نوع بسيط يأخذ قيمتين فقط: true (صح) أو false (خطأ). يُستخدم في جمل الشرط.

let isLoggedIn = true;
let hasPermission = false;
let isAdult = age >= 18;  // true أو false حسب قيمة age
            

4. Undefined — غير معرف

قيمة تلقائية للمتغيرات التي أُعلنت لكن لم تُسند إليها قيمة.

let username;
console.log(username);  // undefined

let data = null;
console.log(data);      // null — فارغ عمداً
            

5. Object — الكائنات

تُستخدم لتخزين مجموعة من البيانات المترابطة (Key-Value pairs).

let user = {
    name: "سارة",
    age: 28,
    email: "sara@example.com",
    isAdmin: false
};

console.log(user.name);   // "سارة"
console.log(user["age"]); // 28
            

6. Array — المصفوفات

قائمة مرتبة من القيم. يمكن أن تحتوي على أنواع مختلفة.

let colors = ["أحمر", "أخضر", "أزرق"];
let mixed = ["نص", 42, true, { name: "علي" }];

console.log(colors[0]);  // "أحمر"
console.log(colors.length);  // 3
            

النوع	الوصف	مثال	typeof
String	نصوص	`"Hello"`	`"string"`
Number	أرقام (صحيحة وعشرية)	`42, 3.14`	`"number"`
Boolean	صح/خطأ	`true, false`	`"boolean"`
Undefined	غير معرف	`undefined`	`"undefined"`
Null	قيمة فارغة عمداً	`null`	`"object"` (bug تاريخي)
Object	كائن	`{name: "Ali"}`	`"object"`
Array	مصفوفة (نوع خاص من Object)	`[1, 2, 3]`	`"object"`

🔍 التحقق من نوع البيانات باستخدام typeof

المشغل typeof يُستخدم لمعرفة نوع أي قيمة. هذا مفيد جداً عند التحقق من صحة البيانات المدخلة.

// أمثلة على typeof
typeof "Hello";     // "string"
typeof 42;          // "number"
typeof true;       // "boolean"
typeof {};          // "object"
typeof [];          // "object" (مصفوفة هي نوع object)
typeof null;       // "object" — bug تاريخي في JavaScript!
typeof undefined;  // "undefined"

// التحقق من نوع المصفوفة
Array.isArray([1, 2, 3]);  // true
Array.isArray("hello");    // false
            

⚠️ فخ typeof:

typeof null يرجع "object" وهذا خطأ معروف في JavaScript منذ عام 1995 ولم يُصلح للحفاظ على التوافق مع الإصدارات القديمة. لذا استخدم === null للتحقق من null.

✅ قواعد تسمية المتغيرات الاحترافية

تسمية المتغيرات بشكل صحيح تجعل الكود قابلاً للقراءة والصيانة. اتبع هذه القواعد:

القواعد الأساسية:

✅ ابدأ بحرف أو _ أو $: name, _private, $element
✅ يمكن استخدام أرقام بعد الحرف الأول: user1, item2
✅ حساس لحالة الأحرف: name ≠ Name ≠ NAME
❌ لا مسافات: user name خطأ
❌ لا كلمات محجوزة: let, const, if, function

التسميات الاحترافية (Naming Conventions):

// camelCase — الأكثر شيوعاً في JavaScript
let userName = "أحمد";
let totalPrice = 199.99;
let isActive = true;

// snake_case — شائع في Python، لكن يُستخدم أحياناً
let user_name = "أحمد";

// UPPER_SNAKE_CASE — للثوابت
const MAX_RETRY_COUNT = 3;
const API_BASE_URL = "https://api.example.com";

// PascalCase — للفئات (Classes)
class UserProfile { }
class ShoppingCart { }
            

✅ نصائح للتسمية الواضحة:

استخدم أسماء وصفية: totalPrice أفضل من tp أو x
استخدم أفعال للدوال: getUser(), calculateTotal(), isValid()
تجنب الأسماء المختصرة غير المعروفة: cnt بدلاً من count سيء
كن متسقاً — اختر convention واحداً واستخدمه في كل المشروع

🔄 تحويل أنواع البيانات

أحياناً تحتاج لتحويل نوع بيانات من نوع لآخر. JavaScript توفر عدة طرق لهذا:

التحويل الضمني (Implicit) — احذره!

// Concatenation بدلاً من جمع
let result = "5" + 3;   // "53" (string) — لا يجمع!
let result2 = "5" - 3;  // 2 (number) — يطرح!
            

التحويل الصريح (Explicit) — الأفضل دائماً

// String → Number
let num = Number("42");      // 42
let num2 = parseInt("42px");  // 42
let num3 = parseFloat("3.14"); // 3.14

// Number → String
let str = String(42);        // "42"
let str2 = (42).toString();  // "42"

// إلى Boolean
let bool = Boolean(1);   // true
let bool2 = Boolean(0);  // false
let bool3 = Boolean("");  // false
            

⚠️ أخطاء شائعة في استخدام المتغيرات

الخطأ	النتيجة	الحل
استخدام متغير قبل إعلانه	ReferenceError	أعلن المتغير أولاً بـ let/const
نسيان const للقيم الثابتة	تغيير قيمة عن طريق الخطأ	استخدم const افتراضياً
"5" + 3 = "53"	نتيجة غير متوقعة	حوّل الصراحة: Number("5") + 3
typeof [] = "object"	لا يميز Array عن Object	استخدم Array.isArray()

🏆 أفضل الممارسات في التعامل مع المتغيرات

📌 استخدم const افتراضياً: 90% من المتغيرات لا تحتاج للتغيير
📌 أعلن المتغيرات في أعلى النطاق: يُحسّن القراءة
📌 تجنب var: يسبب مشاكل Hoisting و Scope
📌 استخدم أسماء وصفية: الكود يُقرأ أكثر مما يُكتب
📌 تحقق من الأنواع: خاصة مع بيانات المستخدم
📌 لا تترك undefined: أعطِ قيمة افتراضية عند الإعلان

🚀 الخطوة التالية: العمليات الحسابية والمنطقية

في الدرس الثالث، ستتعلم:

➕ العمليات الحسابية: +, -, *, /, %, **
🔍 عمليات المقارنة: ==, ===, !=, >, <
🔗 العمليات المنطقية: &&, ||, !
📝 جمل الشرط: if, else if, else

📚 مصادر إضافية:

📦 المتغيرات وأنواع البيانات في JavaScript: الدليل الكامل

📋 محتويات الدرس