المتغيرات في JavaScript: let و const

أي برنامج يحتاج إلى أن يتذكر أشياء: اسم المستخدم، أو عدد النقاط في لعبة، أو سعر منتج في سلة الشراء. في هذا الدرس ستتعلم كيف تحفظ هذه المعلومات داخل المتغيرات (Variables)، وما الفرق بين let و const، ولماذا ينصحك الجميع بالابتعاد عن var.

ما هو المتغير؟

المتغير صندوق له اسم، تضع بداخله قيمة لتستخدمها لاحقاً. تخيّل أن عندك صناديق في غرفتك، وعلى كل صندوق ورقة مكتوب عليها اسمه: «كتب»، «ألعاب»، «ملابس». عندما تحتاج كتاباً، لا تفتّش الغرفة كلها، بل تذهب مباشرة إلى الصندوق المكتوب عليه «كتب».

في JavaScript نصنع الصندوق هكذا:

let score = 10;
console.log(score);

الناتج

10

دعنا نفكك هذا السطر:

• let كلمة تعني «أنشئ صندوقاً جديداً».
• score هو اسم الصندوق، أي اسم المتغير.
• = تعني «ضع بداخله». وهي هنا ليست علامة «يساوي» التي تعرفها من الرياضيات، بل علامة إسناد (Assignment).
• 10 هي القيمة التي وضعناها في الصندوق.

لاحظ أننا عندما كتبنا console.log(score) بدون علامات تنصيص، عرضت JavaScript محتوى الصندوق، وليس كلمة «score».

let: متغير يمكن تغييره

المتغير الذي تنشئه بـ let يمكنك أن تغيّر قيمته في أي وقت. وعند التغيير لا تكتب let مرة أخرى، لأن الصندوق موجود بالفعل:

let score = 10;
console.log(score);
score = 25;
console.log(score);

الناتج

10
25

هذا مناسب للأشياء التي تتغير أثناء عمل البرنامج: نقاط اللاعب، أو عدد المنتجات في السلة، أو الوقت المتبقي في مؤقت.

const: متغير ثابت

أحياناً تريد قيمة لا تتغير أبداً، مثل سنة ميلادك. هنا نستخدم const، وهي اختصار لكلمة «ثابت» (Constant):

const birthYear = 2010;
console.log(birthYear);
birthYear = 2011;

الناتج

2010
TypeError: Assignment to constant variable.

عندما حاولنا تغيير القيمة، أوقفت JavaScript البرنامج وأظهرت خطأً معناه «لا يمكنك إسناد قيمة جديدة لمتغير ثابت». تخيّل const مثل صندوق مُغلق بالشمع: تضع فيه القيمة مرة واحدة عند إنشائه، ثم لا يمكن فتحه لتغييرها.

قاعدة ذهبية

استخدم const دائماً بشكل افتراضي. وإذا احتجت لاحقاً أن تغيّر القيمة، حوّلها إلى let. هذه العادة تحميك من تغيير قيم مهمة بالخطأ، وتجعل كودك أوضح لمن يقرأه.

إنشاء عدة متغيرات

يمكنك أن تخزّن في المتغيرات أنواعاً مختلفة من القيم: نصوصاً وأرقاماً وغيرها:

let playerName = "خالد";
let age = 14;
let isStudent = true;
console.log(playerName, age, isStudent);

الناتج

خالد 14 true

القيمة true تعني «صحيح». سنتعرف عليها وعلى باقي أنواع البيانات في الدرس القادم.

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

ليس أي اسم مسموحاً. هذه هي القواعد الأساسية:

• الاسم يتكون من حروف إنجليزية وأرقام والعلامتين _ و $ فقط.
• لا يبدأ برقم: 1player خطأ، و player1 صحيح.
• لا يحتوي على مسافات: my name خطأ.
• لا يكون كلمة محجوزة في اللغة مثل let أو const أو if.
• حساس لحالة الأحرف: score و Score متغيران مختلفان تماماً.

أسلوب camelCase

عندما يتكون الاسم من أكثر من كلمة، يكتب مبرمجو JavaScript الكلمة الأولى بحروف صغيرة، ويبدأون كل كلمة بعدها بحرف كبير: firstName و totalPrice و isLoggedIn. يسمى هذا الأسلوب camelCase لأن الحروف الكبيرة تشبه سنام الجمل!

اختر أسماء واضحة

الاسم x لا يخبرك بشيء، أما studentAge فيشرح نفسه. الأسماء الواضحة توفر عليك كتابة تعليقات كثيرة.

لماذا نتجنب var؟

في الكود القديم ستجد كلمة ثالثة لإنشاء المتغيرات هي var. كانت الطريقة الوحيدة قبل عام 2015، لكن فيها مشكلات جعلت المبرمجين يتركونها.

المشكلة الأولى: تسمح بإنشاء نفس المتغير مرتين دون أي تحذير.

var color = "أحمر";
var color = "أزرق";
console.log(color);

الناتج

أزرق

في برنامج كبير، قد تمسح قيمة مهمة دون أن تشعر. أما let فتمنعك فوراً بخطأ: Identifier 'color' has already been declared.

المشكلة الثانية: يمكن استخدامها قبل إنشائها.

console.log(city);
var city = "القاهرة";

الناتج

undefined

البرنامج لم يتوقف ولم يحذرك، بل أعطاك قيمة فارغة undefined. هذا يخفي الأخطاء بدلاً من أن يكشفها. لو استخدمت let لظهر لك خطأ واضح: Cannot access 'city' before initialization.

الخلاصة: let و const أكثر أماناً ووضوحاً، فاستخدمهما دائماً.

جرّب بنفسك

شغّل الكود، ثم جرّب:

1. غيّر قيمة score إلى رقم آخر في السطر الثالث.
2. أزل علامتي // من السطر الأخير لترى خطأ تغيير const.

جرّب بنفسكJavaScript

محرر الكود (JavaScript)const playerName = "خالد"; let score = 10; score = score + 5; console.log(playerName, "نقاطه:", score); // playerName = "سامي";

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• تكرار let عند التغيير: كتابة let score = 20; مرة ثانية لنفس المتغير تسبب خطأ. عند التغيير اكتب score = 20; فقط.
• محاولة تغيير const: إذا كانت القيمة ستتغير، استخدم let من البداية.
• الخطأ في حالة الأحرف: أنشأت userName ثم كتبت console.log(username)، فتظهر رسالة username is not defined. انتبه لكل حرف كبير وصغير.

اختبر نفسك

سؤال

أي كلمة تستخدمها لمتغير لن تتغير قيمته أبداً؟

varletconst

سؤال

أي اسم متغير صحيح؟

my score2ndPlacetotalPrice

الخلاصة

• المتغير صندوق له اسم نحفظ فيه قيمة، والعلامة = تعني «ضع القيمة في الصندوق».
• let لمتغير يمكن تغيير قيمته، و const لقيمة ثابتة لا تتغير.
• ابدأ دائماً بـ const، وحوّلها إلى let عند الحاجة فقط.
• الأسماء بحروف إنجليزية، لا تبدأ برقم، ولا تحتوي مسافات، وتُكتب بأسلوب camelCase.
• تجنّب var لأنها تسمح بأخطاء صامتة يصعب اكتشافها.