المتغيرات في لغة JavaScript

يا هلا والله بالجميع! اليوم بنشرح موضوع أساسي ومهم جداً في الجافاسكريبت: المتغيرات. لا تشيل هم، الموضوع سهل وبسيط.

وش يعني متغير (Variable)؟

بكل بساطة، المتغير هو زي "صندوق" أو "مكان" في الذاكرة تخزن فيه بيانات. ممكن تكون أرقام، نصوص، أشياء ثانية. تقدر تغير اللي داخل الصندوق هذا متى ما بغيت. يعني اسمه متغير لأنه قيمته تتغير.

أنواع المتغيرات في JavaScript

عندنا 3 طرق أساسية لتعريف المتغيرات في الجافاسكريبت: var، let، و const. كل وحده لها سالفه، وركز معي عشان تعرف متى تستخدم كل وحده.

1. المتغير var (القديم الطيب)

هذا يا طويل العمر والسلامة هو الطريقة القديمة اللي كنا نستخدمها قبل ES6 (إصدار 2015). له كم ميزة وعيب لازم تعرفها:

• Scope (النطاق): نطاقه يا يكون global (عالمي) أو function-scoped (خاص بالدالة). يعني لو عرفت متغير var داخل دالة، ما تقدر توصل له من برا الدالة. ولو عرفته برا الدوال، بيكون متاح في كل مكان.
• إعادة التعريف والتعديل: تقدر تعيد تعريف نفس المتغير بنفس الاسم في نفس النطاق، وهذا ممكن يسوي لك مشاكل. وتقدر تعدل قيمته طبعاً.
• Hoisting (الرفع): هذي حركة غريبة شوي. المتغيرات اللي تعرفها بـ var يتم "رفعها" لأعلى نطاقها قبل تنفيذ الكود. يعني تقدر تستخدم المتغير قبل ما تعرفه، بس قيمته بتكون undefined الين يوصل سطر التعريف.

ملاحظة: غالباً ما راح تستخدم var كثير الحين، لأن let و const أفضل وأكثر أماناً.

شوف هالمثال عشان تتوضح الصورة:

var name = "أحمد";
console.log(name); // أحمد

var name = "سارة"; // عادي نعيد تعريفها
console.log(name); // سارة

function greet() {
    var message = "أهلاً وسهلاً!";
    console.log(message);
}
greet(); // أهلاً وسهلاً!
// console.log(message); // بيعطيك خطأ لأن message مو معرفة برا الدالة

console.log(city); // undefined (لأنها مرفوعة لكن ما لها قيمة لسا)
var city = "الرياض";
console.log(city); // الرياض

2. المتغير let (الرائع الجديد)

هذا يا شباب هو اللي نستخدمه بكثرة الحين. جاء مع ES6 وحل أغلب مشاكل var. ركز على الفرق:

• Scope (النطاق): نطاقه block-scoped (خاص بالكتلة). وش يعني كتلة؟ يعني أي شي داخل أقواس { }، زي جملة if، for loop، أو حتى كتلة عادية. المتغير اللي تعرفه بـ let داخل كتلة، ما تقدر توصل له من برا الكتلة.
• إعادة التعريف والتعديل: ما تقدر تعيد تعريف نفس المتغير بنفس الاسم في نفس النطاق. بس تقدر تعدل قيمته عادي.
• Hoisting (الرفع): هو صحيح يتم رفعه، بس يدخل في شي اسمه "Temporal Dead Zone" (منطقة الموت المؤقتة). يعني لو حاولت تستخدمه قبل ما تعرفه، بيعطيك خطأ على طول.

نصيحة: إذا تحتاج متغير قيمته تتغير، استخدم let.

مثال على let:

let age = 30;
console.log(age); // 30

age = 31; // عادي نعدل قيمته
console.log(age); // 31

// let age = 32; // بيعطيك خطأ: 'age' has already been declared

if (true) {
    let price = 100;
    console.log(price); // 100
}
// console.log(price); // بيعطيك خطأ: price is not defined (لأنها block-scoped)

// console.log(country); // بيعطيك خطأ: Cannot access 'country' before initialization
let country = "السعودية";
console.log(country); // السعودية

3. المتغير const (الثابت ما يتغير)

هذا يا جماعة للقيم اللي ما تتغير أبداً. اسمه const اختصار لـ constant (ثابت). له نفس مميزات let من ناحية الـ scope والـ hoisting، بس فيه فرق جوهري:

• Scope (النطاق): نفس let، block-scoped.
• إعادة التعريف والتعديل: ما تقدر لا تعيد تعريف المتغير ولا تعدل قيمته بعد ما تعطيه قيمة أولية. لازم تعطيه قيمة أولية وقت التعريف.
• Hoisting (الرفع): نفس let، يدخل في Temporal Dead Zone.

مهم: إذا كان المتغير عبارة عن كائن (object) أو مصفوفة (array)، فـ const يضمن إن مرجع الكائن/المصفوفة ما يتغير، بس تقدر تغير محتويات الكائن/المصفوفة نفسها.

مثال على const:

const PI = 3.14;
console.log(PI); // 3.14

// PI = 3.14159; // بيعطيك خطأ: Assignment to constant variable.
// const PI = 3.14159; // بيعطيك خطأ: 'PI' has already been declared

const user = {
    name: "علي",
    age: 25
};
console.log(user); // { name: 'علي', age: 25 }

user.age = 26; // عادي نغير محتويات الكائن
console.log(user); // { name: 'علي', age: 26 }

// user = { name: "فهد", age: 30 }; // بيعطيك خطأ: Assignment to constant variable. (لأنك تحاول تغير مرجع الكائن بالكامل)

متى تستخدم أي واحد فيهم؟

هذي القاعدة الذهبية اللي تمشي عليها:

1. ابدأ بـ const : استخدمه لكل متغير ما تتوقع إن قيمته بتتغير. هذا يخلي الكود حقك أوضح وأقل عرضة للأخطاء.
2. إذا احتاجت القيمة تتغير، استخدم let : لو اكتشفت إن المتغير لازم قيمته تتعدل في المستقبل، حوّله لـ let.
3. ابتعد عن var قدر الإمكان : ما لم تكن مضطراً للتعامل مع كود قديم جداً، لا تستخدمه.

وبكذا نكون غطينا أساسيات المتغيرات في الجافاسكريبت. الموضوع بسيط بس فهم الفروقات هذي بيخليك تكتب كود أنظف وأكثر احترافية. بالتوفيق يا وحوش!

← السابقالفهرسالتالي →