الدليل الشامل للمتغيرات في جافاسكربت

تُعد المتغيرات ( Variables ) من أهم المفاهيم الأساسية في جافاسكربت، حيث تُستخدم لتخزين البيانات و معالجتها أثناء تشغيل البرنامج. في هذا المقال، سنتعرف على المتغيرات في جافاسكربت بالتفصيل، بدءاً من تعريفها، و أنواعها، و أفضل الممارسات لاستخدامها.

ما هي المتغيرات في جافاسكربت

المتغير هو بمثابة حاوية تُخزن البيانات داخلها ليتم استخدامها لاحقًا في الكود. يمكنك التفكير فيه كصندوق يحمل قيمة معينة، والتي يمكن تغييرها أثناء تنفيذ البرنامج.

كيفية إعلان المتغيرات في جافاسكربت

في جافاسكربت، يمكننا الإعلان عن المتغيرات باستخدام الكلمات المفتاحية التالية:

• var _ قديم، لم يعد يُنصح باستخدامه.
• let _ الأكثر شيوعاً.
• const _ للقيم الثابتة.

أمثلة تبيّن كيفية استعمال الكلمات المفتاحية لتعريف المتغيرات.

var x = 10;     // لا يفضل استخدامه
let y = 20;     // متغير يمكن إعادة تعيين قيمته
const z = 3.14; // متغير ثابت لا يمكن تغيير قيمته

الفرق بين var و let و const في جافاسكربت

بشكل عام، المتغيرات المعرّفة باستخدام let أو var يمكن تغيير قيمتها بسهولة، بينما const لا يمكن إعادة تعيينها.

1. الكملة المفتاحية var

var كانت الطريقة التقليدية للإعلان عن المتغيرات في جافاسكربت قبل Es6، لكنها تحتوي على بعض المشاكل مثل نطاقها ( Scope ) غير المحدد بوضوح.

مثال على استخدام الكلمة المفتاحية var و يبيّن سلبياتها.

var x = 10;

if (true) {
    var x = 20; // و إعطائه قيمة جديدة x داخل الجملة الشرطية تم إعادة تعريف المتغير
}

console.log(x); // النتيجة: 20 لأنه تم استبدال القيمة داخل الشرط ❌

2. الكملة المفتاحية let

تم تقديم let في Es6 لحل مشاكل var فهي تتميز بأنها تحترم النطاق المحلي ( Block Scope ).

مثال على استخدام الكلمة المفتاحية let و يبيّن فائدتها.

let x = 10;

if (true) {
    let x = 20; // هذا المتغير محصور داخل القوسين فقط
    console.log(x); // النتيجة: 20 ✅
}

console.log(x); // النتيجة: 10 (القيمة الأصلية لم تتغير) ✅

3. الكملة المفتاحية const

تم تقديم const في Es6 و هي تُستخدم للإعلان عن المتغيرات الثابتة التي لا يمكن تغيير قيمتها بعد تعريفها.

مثال على استخدام الكلمة المفتاحية const و يبيّن فائدتها.

const x = 10;
x = 20; // const هنا خطأ: لا يمكن إعادة تعيين متغير معرف بـ ❌

مثال على تعديل كائن معرف بواسطة الكلمة const.

const user = {
    name: "يوسف",
    age: 16
};

user.age = 17; // مسموح، لأننا نعدل خاصية داخل الكائن و ليس إعادة تعيينه بالكامل ✅

console.log(user.age); // النتيجة: 17

قواعد تسمية المتغيرات في جافاسكربت

عند تسمية المتغيرات في جافاسكربت، يجب اتباع بعض القواعد المهمة:

• يجب أن يبدأ الإسم بحرف صغير a-z أو حرف كبير A-Z أو الرمز _ أو الرمز $.
• يمكن أن يحتوي على أرقام بعد الحرف الأول مثل myVar1.
• لا يمكن أن يكون كلمة محجوزة في جافاسكربت مثل let، const، var، function، return إلخ..
• لا يمكن أن يبدأ برقم 1name.
• لا يمكن أن يتضمن مسافات فارغة my variable.

.أمثلة على الأسماء الصحيحة و الخاطئة

let userName = "Youssef"; // صحيح ✅
let $price = 100; // صحيح ✅
let _count = 5; // صحيح ✅
let 1stValue = 10; // خطأ لأنه يبدأ برقم ❌
let my variable = "Hello";  // خطأ لأنه يحتوي مسافة فارغة ❌ 

أنواع بيانات المتغيرات في جافاسكربت

المتغيرات في جافاسكربت يمكن أن تحتوي على أنواع مختلفة من البيانات، و أهمها:

• String _ أي نص، مثال "Hello world".
• Number _ أي أعداد، مثال 42.
• Boolean _ أي قيم منطقية و التي قد تكون true أو false.
• Array _ أي مصفوفات، مثال [1, 2, 3].
• Object _ أي كائنات، مثال { name: "يوسف", age: 16 }.
• null _ أي قيمة فارغة.
• undefined _ أي متغير لم يتم تعيين قيمته.

أفضل الممارسات لاستخدام المتغيرات في جافاسكربت

لضمان كتابة كود نظيف وسهل الفهم، اتبع هذه النصائح:

• إستخدم const قدر الإمكان لتجنب التغييرات غير المقصودة.
• إستخدم let عند الحاجة إلى تغيير القيمة.
• تجنّب var لأنها قد تؤدي إلى مشاكل في النطاق.
• إستخدم أسماء متغيرات واضحة تصف المحتوى مثل userName بدلاً من x.
• إستخدم أسلوب camelCase عند كتابة أسماء المتغيرات، مثلاً أكتب totalPrice بدلاً من total_price.

ختام

المتغيرات هي أساس البرمجة في جافاسكربت، وتعلم كيفية استخدامها بشكل صحيح يمكن أن يساعدك في كتابة كود أكثر كفاءة و تنظيماً. تأكد دائماً من اختيار النوع المناسب let أو const بناءً على الحاجة، و اتبع أفضل الممارسات لجعل كودك أكثر وضوحاً و سهولة في الصيانة.