الجافاسكربت قد شارفت على إحتلال عالم الانترنت و العالم الرقمي، بقد تدخلت في كل المجالات و سيطرت على بعضها الآخر، و صار إستخدامها في منصات محددة مثل الويب إجباري، و إلتمست جزءا من عالم صناعة تطبيقات الويب عبر إطاراتها الـ Hybrid و لا ننسى إستخدامها أيضا في تطوير تطبيقات سطح المكتب عبر إطارات اخرى مثل Electron، و مع تقدم الجافاسكربت (Javascript)، تتقدم أيضا طريقة كتابة الكود، في هذا المقال سنطلعك على طريقة كتابة كود جافاسكربت يحترم قواعد الـ ES6 او ECMAScript 6 التي تجلب لنا مميزات عديدة.
تجلب جافا سكريبت ES6 تركيبة جديدة وميزات رائعة لجعل الكود البرمجي أكثر حداثة و قابلية للقراءة، حيث تسمح لك بكتابة كود أقل يقوم بالعديد من الوظائف، فالـ ES6 تقدم لنا العديد من الميزات الرائعة مثل : arrow functions, template strings, class destruction, Modules… والكثير، فدعونا نلقي نظرة.
const و let
دعونا نبدأ بـ const وهي عبارة عن كلمة أساسية جديدة في ES6 للإعلان عن المتغيرات، و إن كنت تتسائل عن الفرق بين const و var التي عهدناها، فإن عبارة const و بمجرد إستخدامها لا يمكن إعادة تعيين المتغير بمعنى آخر، إنه متغير غير قابل للتغيير إلا عندما يستخدم مع الكائنات.
هذا مفيد حقًا لاستهداف المحددات، فعلى سبيل المثال عندما نريد توفير زر واحد يُطلق حدثا واحداً، أو عندما نريد تحديد عنصر HTML في JavaScript فعليك تحديد المتغير الذي سيحفظ تلك القيمة عن طريق const، لأنها أكثر حفظاً لقيمة المتغير، في حين إستخدامك لـ var فيمكن التعديل على قيمة عنصر الـ HTML التي جلبتها و بالتالي قد تصادف بعض المشاكل.
من الأفضل دائمًا استخدام const عندما لا ترغب في إعادة تعيين المتغير .
في التعليمات البرمجية المذكورة أعلاه، لن تستطيع تغيير قيمة MyBtn المحددة بالـ const ولا التعديل على محتواه، و إن حاولت ذلك فالنتيجة ستكون خاطئة.
حسنا، ماذا لو أردنا تحديد متغير يمكن تغيير قيمته في الكود البرمجي ؟ هل يوجد طريقة أخرى غير Const ؟ الجواب ببساطة هو إستخدم Let، إذ تسمح لك بتحديد متغير يحمل أي قيمة تريد و يمكن التعديل على قيمته في أي وقت تريد أيضا، كمثال لذلك، التعليمات التالية ( أسفله ) إذ قمنا بتحديد قيمة متغير بإستخدام Let سيحمل إسم Said، ثم بعدها سنقوم بالتعديل على تلك القيمة الى Rick، و إظهار النتيجة سيُرجع قيمة Rick لأن تغييره تم أثناء كتابة الكود.
Arrow functions
الـ Arrow functions رائعة حقًا و تجعل كودك أكثر قابلية للقراءة وأكثر تنظيمًا، و تجعل الكود البرمجي الخاص بك أكثر حداثة و تسيطر عليه الإحترافية و ليس العشوائية، حتى تدرك جيدا الفرق بين النمطين، دعونا نبدأ بالـ Functions في النمط العادي الذي إعتدنا عليه في الجافاسكربت :
يمكنك أن ترى الإبتذال في الكود أعلاه، و كيف ان النسخة السابقة توفر لنا إمكانية كتابة كود جيد نسبيا لكن بعيد قليلا عن الإحترافية خصوصا اننا في عصر الجافاسكربت و عصر الإطارات القوية، فما رأيك ان نحول الكود أعلاه الى كود أكثر إحترافية و تنظيما و قابلية للقراءة :
كما ترى، فإن Arrow functions تبدو أكثر قابلية للقراءة ونظيفة، لن تحتاج إلى استخدام الطريقة القديمة بعد الآن، و يمكنك الإعتماد عليها كليا في تحديد أزيد من Function و إستخدامها كلها بتنظيم معين من أجل الحصول على شفرة برمجية في الأخير أكثر تنظيما و نظافة، فلا تنسى قواعد الـ Best Practice في البرمجة التي تسمح لنا بمشاطرة الكود البرمجي مع الآخرين .
أيضا، يمكنك استخدام وظيفة السهم مع map ، filter و reduce built-in functions، و هي ترشيحات أخرى يمكن كتابتها و التعامل معها بنفس الطريقة التي تعاملنا بها مع الـ Functions، إليك مثال أقرب الى ذلك :
تبدو وظيفة map مع الـ Arrow functions أكثر وضوحًا وقابلية للقراءة من نفسها في الـ ES5. مع ES6 يمكنك كتابة رمز أقصر وأذكى، يمكنك استخدام الشيء نفسه مع عامل filter و reduce، مما يجعل الشفرة البرمجية الخاصة بك أكثر سهولة في القراءة و أكثر إحترافية، قد لا ترى ذلك الآن في هذا الكود، لكن بتعاملك مع مشروع برمجي كبير ستجد ان الـ ES6 أكثر عملية و تنظيما.
Template Literals
القوالب الحرفية أو سلاسل القوالب هي خاصية جد رائعة في ES6 أيضا توجب ذكرها في هذا المقال، لا يتعين علينا استخدام عامل الجمع (+) لسلسلة السلاسل ( او Concatenation )، أو عندما نريد استخدام متغير داخل سلسلة، إذ صار بإمكاننا تضمين المتغير مباشرة لتكملة السلسلة حتى تظهر السلسلة كاملة بشكل صحيح دون أي إرتباك للعين المجردة، لنأخذ فكرة أقرب، إليك الطريقة القديمة في جمع السلاسل في نسخة الـ ES5 :
يمكنك ان تلاحظ أن الإرتباط بين السلاسل من أجل إدخال المتغيرات أمر مربك قليلا و يُظهر الكود بطريقة سيئة نسبيا، فدعونا نجرب الـ ES6 لنطلع على الشفرة في هذه الحالة، و نستخرج الفرق بينهما :
بسيط جدا أليس كذلك ؟ إنه فرق كبير بين البنية القديمة في ES5 و ES6. عند اللعب باستخدام السلاسل، تبدو السلسلة الحرفية في ES6 أكثر تنظيمًا من ES5 و إن كانت القيم العائدة كثيرة في السلسلة فلن تجد أي مشكلة إطلاقا في تضمينها جميعها بطريقة سلسلة و سهلة، إنها الـ ES6 يا حبيبي.
Default parameters
أثناء إشتغالي على شفرة كود PHP، عادة ما أستخدم القيم الافتراضية للمتغيرات في الدوال، هذه الخاصية تسمح لك بتحديد القيمة للمتغير مقدما، لذلك، عندما تنسى إعطاء القيمة للمتغير، لن يعرض خطأ غير معروف (Undifined) لأن القيمة محددة بالفعل في الإعداد الافتراضي للدالة، لذلك عندما تقوم بتشغيل الدالة باستخدام متغير فارغ، فسوف تأخذ القيمة الافتراضية t ، ولن تقوم بإرجاع خطأ، و هذا بالتحديد ما يحدث لنا في الجافاسكربت حين نتحقق من الكونسول و نجد ان الكونسول مليئ بأخطاء Undifined.
لاحظ المثال التالي :
ترجع الدالة أعلاه undefined ، لأننا نسينا إعطاء قيمة للمتغير الثاني.
ولكن إذا استخدمنا Default parameters ، فلن تعرض undefined ، وستستخدم القيمة الإفتراضية عندما ننسى تعيينها.
كما ترى ، تقوم الدالة بإرجاع قيمة على الرغم من أننا لم نعين المتغير الثاني. الآن مع Default parameters يمكننا التعامل مع الخطأ مقدمًا، و هو ما يجب على المبرمج حسبانه أثناء التعامل مع كود برمجي في الجافاسكربت.
الى هنا نكون قد إنتهينا من الجزء الاول من هذا المقال الذي نريك فيه أفضل الطرق لكتابة كود الجافا سكريبت الخاص بك بطرق احدث وسهل في القراءة لمشاركته مع اصدقائك المبرمجين. ونضرب لك لقاء في جزء ثاني حيث سوف نشرح بعض التقنيات المتقدمة للتعامل مع الكائنات وتقسيم الكود الخاص بك لأجزاء تقوم بإستدعائها عند الضرورة بإستخدام Import و Export اللتان تعتبران من أبرز الوضائف التي جاءت بها ES6