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

سوف تحتاج، بالتأكيد، في مرحلة ما من عملك على تطوير التطبيقات في لغة JavaScript للتعامل مع المعلومات. فمثلًا، بإمكانك تخيل العمل على التطبيقين التاليين:

1. متجر إلكتروني – يمكن أن تتضمن المعلومات البضائع التي تباع وسلة التسوق.
2. تطبيق محادثة فورية – يمكن أن تتضمن المعلومات، والمستخدمين، والرسائل وغيرها.

إن أردنا تخزين هذه المعلومات، نحتاج إلى شيء يُخزِّنها ويحفظها لنا، وهذا ما تمثله المتغيرات تمامًا. فمثل المتغيرات كمثل الأوعية والآنية التي تحفظ وتُخزِّن كل ما يوضع فيها.

المتغير

المتغير هو «مَخزَن مُسمَى» (named storage) للبيانات، وهذا المخزن يقع في الذاكرة. بإمكانك استخدام المتغيرات لتخزين البضائع، والزوار وغيرها من البيانات.

إن أردت إنشاء متغير جديد في لغة JavaScript، استخدم الكلمة المفتاحية let. تنشئ العبارة البرمجية التالية (أو بمعنى آخر تصرّح عن، أو تُعرِّف) متغيرًا جديدًا باسم "message":

let message;

الآن، نستطيع وضع بعض البيانات فيه باستخدام معامل الإسناد =:

let message;
message='Hello'; // 'Hello' خزِّن السلسلة النصية

بعد تنفيذ هذه الشيفرة، تُحفَظ السلسلة النصية السابقة في منطقة من الذاكرة مرتبطة بهذا المتغير. ويمكننا الوصول إليها باستخدام اسم المتغير:

let message
mesaage = 'Hello!';

alert(message); // اظهار محتوى المتغير

وللاختصار، من الممكن الدمج بين التصريح عن المتغير وإسناد قيمة معينة له في نفس السطر بالشكل التالي:

let message = 'Hello!'; // التصريح عن المتغير وإسناد قيمة له
alert(message); // Hello!

كما من الممكن أيضًا التصريح عن عدة متغيرات في نفس السطر:

let user = 'John', age = 25, message = 'Hello';

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

تبدو المتغيرات المتعددة الأسطر (المكتوبة على أسطر منفصلة) أطول قليلًا، ولكنها أسهل عند القراءة:

let user = 'John';
let age =25;
let message = 'Hello';

يصرِّح بعض المبرمجين عن عدة متغيرات بأسلوب الأسطر المتعددة بالشكل التالي:

let user = 'John',
   age = 25,
   message = 'Hello';

أو حتى من الممكن استخدام أسلوب «الفاصلة أولًا» (comma-first):

let user = 'John'
   , age = 25
   , message = 'Hello';

برمجيًا، جميع هذه الحالات متماثلة وظيفيًّا. لذلك، يعود الأمر لك لتختار الأنسب والأفضل.

ملاحظة حول استخدام var بدلًا من let: في السكربتات القديمة، من الممكن أن تلاحظ استخدام الكلمة المفتاحية var بدلًا من let للتصريح عن المتغيرات:

var message = 'Hello';

وللكلمة المفتاحية var نفس عمل let تقريبًا. فهي تصرح أيضًا عن المتغيرات ولكنها تختلف عنها قليلًا، ومن الممكن أن تعتبرها، الطريقة «التقليدية» (old-school) للتصريح عن المتغيرات.

هناك فروق دقيقة بين let و var، لكنها حاليًا غير مهمة بالنسبة لك. سندرس هذه الفروق بالتفصيل في فصل المتغير القديم.

مثال واقعي للمتغيرات

إن أردت فهم مبدأ عمل المتغيرات فهمًا جيدًا، فتخيل «صندوقًا»، وعليه لُصاقة باسم مميز. فمثلًا، بإمكانك تخيل المتغير message بصندوق مسمى بالاسم "message"، وداخل هذا الصندوق القيمة "Hello!‎"

بإمكانك وضع أي قيمة في الصندوق، كما بإمكانك تغيير هذه القيمة مرارًا وتكرارًا:

let message;
message = 'Hello!';
message = 'World!'; // value changed
alert(message);

ولكن لاحظ أنه عندما تتغير القيمة، تُحذَف البيانات السابقة من المتغير.

بإمكانك أيضًا التصريح عن متغيرين ونسخ البيانات من أحدهما إلى الآخر.

let hello = 'Hello world!';
let message;
// message إلى المتغير hello من المتغير 'Hello world' نسخ القيمة
message = hello;

// يملك المتغيران الآن البيانات نفسها
alert(hello); //Hello world!
alert(message); // Hello world!

اللغات الوظيفية

من الأمور التي تجدر ملاحظتها أيضًا أن اللغات البرمجية الوظيفية، مثل Scala أو Erlang، تمنع تغيير قيم المتغيرات بعد إسنادها إليها. أي عندما تخزن القيمة في الصندوق، في مثل تلك اللغات، فإنها تبقى فيه للأبد. وعند الحاجة إلى تخزين بيانات أخرى، تجبرك اللغة على خلق صندوق آخر (التصريح عن متغير جديد)، ولا يمكنك آنذاك إعادة استخدام الصندوق السابق ولا حتى إعادة الصندوق الحالي الذي أنشأته. هل يمكنك تخيل كومة الصناديق التي ستتراكم بعد فترة من الزمن؟!

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

تسمية المتغيرات

هنالك شرطان لأسماء المتغيرات في JavaScript:

1. يجب ألا يحتوي اسم المتغير إلا على حروف، و أرقام، و الرمزين $ و _ فقط.
2. يمنع استخدام رقم في أول حرف من الاسم، أي يجب ألا يبدأ اسم المتغير برقم.

أمثلة عن التسمية الصحيحة للمتغيرات:

let userName;
let test123;

عندما يتألف الاسم من عدة كلمات، يستخدم عادةً أسلوب «سنام الجمل» (camelCase). حيث تكتب الكلمات متتالية دون أي فاصل، وتبدأ كل كلمة بحرف كبير: myVeryLongName.

الأمر المميز الآخر هو أنه من الممكن استخدام رمز الدولار $ والشرطة التحتية _ في أسماء المتغيرات. وهما عبارة عن رمزين عاديين، كأي حرف آخر، وليس لهما معنًى خاص.

أمثلة عن بعض الأسماء المسموحة:

let $=1; // "$" التصريح عن متغير اسمه
let _=2; // "_" والتصريح عن متغير آخر اسمه

alert($ + _); // 3

وأمثلة عن بعض أسماء المتغيرات المكتوبة خطأً:

let 1a; // لا يمكن بدء اسم المتغير برقم
let my-name; //  لا يسمح باستعمال الشرطة '-' في أسماء المتغيرات

ملاحظة: حالة الأحرف مهمة
فالمتغير الذي اسمه apple مختلفٌ تمامًا عن المتغير الذي اسمه AppLE.

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

let имя = '…';
let 我 = '…';
let رسالة = '…';

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

الأسماء المحجوزة

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

مثلًا، الكلمات التالية: let، و class، و return، و function محجوزة. والشيفرة البرمجية التالية سينتج عنها خطأ في الصياغة:

let let = 5; // "let" خطأ! لا يمكن تسمية المتغير بالاسم
let return = 5; // أيضًا "return" خطأ! لا يمكن تسمية المتغير بالاسم

الإسناد بعيدًا عن الوضع الصارم

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

// هنا "use strict" انتبه إلى عدم استخدام الموجه
num = 5; // إن لم يكن موجودًا "num" سيُنشَأ المتغير
alert(num); // 5

ولكن أبقِ في ذهنك أنها طريقة سيئة، وسينتج عنها خطأ عند عملك ضمن الوضع الصارم (strict mode):

"use strict"
num = 5; // error: num is not defined

الثوابت

للتصريح عن ثابت، وهو المتغير الذي لا تتبدل قيمته، استخدم const بدلًا من let:

const myBirthday = '18.04.1982';

المتغيرات التي يُصرَّح عنها باستخدام const تُسمَّى «الثوابت» ولا يمكن أن تتغير قيمتها؛ وأي محاولة للقيام بذلك ينتج عنها خطأ عند تنفيذ الشيفرة:

const myBirthday = '18.0401982';
myBirthday = '01.01.2001'; // خطأ! لا يمكن إعادة إسناد قيمة لثابت

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

متى تستخدم الأحرف الكبيرة في تسمية الثوابت؟

هنالك عرف منتشر في استخدام الثوابت كأسماء مستعارة أو مرادفات للقيم صعبة الحفظ أو القيم العددية الثابتة المعروفة قبل التنفيذ. تسمى مثل هذه الثوابت باستخدام الأحرف الكبيرة والشرطة السفلية (_). كما في هذا المثال:

const COLOR_RED = "#F00";
const COLOR_GREEN = '#0F0";
const COLOR_BLUE = '#00F";
const COLOR_ORANGE = '#FF7F00";

// .. عندما نريد انتقاء لون
let color = COLOR_ORANGE;
alert(color); // #FF7F00

والفائدة من ذلك:

• حفظ وتَذكُّر COLOR_ORANGE أسهل بكثير من "‎#FF7F00".
• احتمال ارتكاب خطأ بكتابة "‎#FF7F00" أكبر بكثير من كتابة COLOR_ORANGE.
• قراءة الاسم COLOR_ORANGE في الشيفرة البرمجية له معنًى جلي خلافًا لقراءة ‎#FF7F00.

ربما تتساءل الآن وأنت في حيرة، متى تستخدم الأحرف الكبيرة لتسمية الثوابت ومتى نسميها بالشكل الاعتيادي؟ حسنًا، سنوضح ذلك الآن.

عندما تصرِّح عن ثابت، فهذا يعني أن قيمة هذا المتغير لن تتبدل أبدًا. ولكن ميز بين نوعين من الثوابت: الأول هو الثوابت التي تكون قيمتها معروفة قبل التنفيذ (كما في المثال السابق، فالقيمة الست عشرية للون الأحمر معروفة سابقًا وثابتة). أما النوع الثاني، فهو الثوابت التي تحسب قيمتها أثناء عمل السكربت، وخلال التنفيذ، ولكنها لا تتغير بعد إسناد قيمة لها.

مثال على ذلك:

const pageLoadTime = /* الوقت الذي تستغرقه الصفحة للتحميل */;

قيمة الثابت pageLoadTime تكون غير معروفة قبل تحميل الصفحة، لذلك يتم تسمية الثابت بشكل عادي. ولكنه ثابت لأنَّ قيمته لا تتغير بعد إسنادها له.

بمعنًى آخر، الثوابت المسماة بأحرف كبيرة تُستخدَم فقط كمرادفات للقيم صعبة الكتابة في الشيفرة البرمجية (hard-coded).

تسمية الأشياء تسميةً صحيحةً

بما أننا نتكلم عن المتغيرات، لابدّ أن نذكر أمرًا مهمًّا للغاية متعلق بتسمية المتغيرات. أرجوك أن تختار أسماء منطقية للمتغيرات، وأن تأخذ الوقت الكافي للتفكير بالأسماء المناسبة لها.

لا تُعدُّ مهمة تسمية المتغيرات مهمةً بسيطةً، فهي واحدة من المهارات الأكثر أهمية وتعقيدًا في البرمجة. و بإمكانك بنظرة سريعة على أسماء المتغيرات المستخدمة في الشيفرة البرمجية معرفة مدى خبرة المطور الذي كتبه.

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

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

وإليك بعض النصائح الجيدة لاتباعها في تسمية المتغيرات:

• استخدم أسماء يمكن للآخرين قرائتها وفهمها مثل userName أو shoppingCart.
• ابتعد عن الاختصارات أو الأسماء القصيرة مثل a، أو b، أو c إلا إذا كان العمل واضحًا لك بشكل جيد.
• اجعل أسماء المتغيرات تصف محتواها ولكن لا تبالغ كثيرًا، بل حاول أن تكون مختصرة أيضًا. وكمثال عن الأسماء السيئة data و value. مثل هذه الأسماء لا تعبر عن أي شيء. ومن الممكن استخدامها فقط إذا كان سياق الشيفرة البرمجية، يوضح بشكل بديهي واستثنائي، أي بيانات أو قيم يشير إليها المتغير.
• اتفق على شروط معينة ضمن فريقك أو حتى مع نفسك في تسمية المتغيرات. فإذا كان اسم زائر الموقع هو user، فإن اسم المتغيرات المرتبطة به تكون أسماؤها currentUser أو newUser عوضًا عن currentVisitor أو NewManInTown.

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

هل تعيد استخدام المتغير أم تخلق متغيرًا جديدًا؟

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

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

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

الخلاصة

بإمكاننا التصريح عن المتغيرات لتخزين البيانات باستخدام الكلمات المفتاحية var، أو let، أو const.

• let: تستخدم للتصريح عن المتغيرات في النسخة الحالية. كما يجب استخدام الوضع الصارم (strict mode) لاستخدام let في V8.
• var: هي الطريقة التقليدية للتصريح عن المتغيرات. عادةً، لا نستخدم هذه الطريقة على الإطلاق، ولكن سنتعرف على الفروقات الدقيقة بينها وبين let في مقال إفادة var القديمة وهذا أمر ضروري في حال اضطررت لاستخدامها.
• const: مثل let، ولكن قيمة المتغير لا يمكن تعديلها. كما يجب تسمية المتغيرات بطريقة تسمح لنا بفهم القيم المسندة إليها بسهولة.

تمارين

1. العمل مع المتغيرات

الأهمية: 2

1. صرّح عن المتغيرين: admin و name.
2. أسند القيمة "John" إلى المتغير name.
3. انسخ قيمة name إلى المتغير admin.
4. اعرض قيمة المتغير admin باستخدام التنبيه alert (يجب أن يكون الخرج "John").

الحل:

let admin, name; // يمكننا التصريح عن متغيرين في الوقت نفسه
name = "Mohammad";
admin= name;
alert (admin); // "Mohammad"

2. اختيار الأسماء المناسبة

الأهمية: 3

1. أنشئ متغيرًا وليكن اسمه كوكبنا (our planet). كيف يمكنك تسمية هذا المتغير؟
2. أنشئ متغيرًا لتخزين اسم الزائر الحالي للموقع. كيف بإمكانك اختيار اسم هذا المتغير؟

الحل:

let ourPlanetName = "Earth";

let currnetUserName = "John";

3. الثوابت بالأحرف الكبيرة؟

الأهمية: 4

تفحص الشيفرة البرمجية التالية:

const birthday = '18.04.1982';
const age = someCode(birthday);

هنا لدينا الثابت birthday الذي يحوي تاريخًا والثابت age الذي سيُحسَب من birthday عن طريق الشيفرة البرمجية someCode (لم يتم كتابتها للاختصار، ولأن هذه التفاصيل غير مهمة الآن).

هل يكون صحيحًا استخدام الأحرف الكبيرة لتسمية الثابت birthday أو الثابت age أو كلاهما؟

const BIRTHDAY   = '18.04.1982'; // هل يُكتَب اسم المتغير بالأحرف الكبيرة؟
const AGE = someCode(BIRTHDAY); // هل يُكتَب اسم المتغير بالأحرف الكبيرة؟

الحل:

ترجمة -وبتصرف- للفصل Variables من كتاب The JavaScript Language

انظر أيضًا

• المقال التالي: أنواع البيانات
• المقال السابق: الوضع الصارم: النمط الحديث لكتابة الشيفرات
• كامل مقالات دليل تعلم جافاسكربت