من افضل الطرق ل نحو كتابة شفرة برمجية بإستخدام الـ Javascript ES6
الجافاسكربت قد شارفت على إحتلال عالم الانترنت و العالم الرقمي، بقد تدخلت في كل المجالات و سيطرت على بعضها الآخر، و صار إستخدامها في منصات محددة مثل الويب إجباري، و إلتمست جزءا من عالم صناعة تطبيقات الويب عبر إطاراتها الـ Hybrid و لا ننسى إستخدامها أيضا في تطوير تطبيقات سطح المكتب عبر إطارات اخرى مثل Electron، و مع تقدم الجافاسكربت (Javascript)، تتقدم أيضا طريقة كتابة الكود، في هذا المقال سنطلعك على طريقة كتابة كود جافاسكربت يحترم قواعد الـ ES6 او ECMAScript 6 التي تجلب لنا مميزات عديدة.
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 )، أو عندما نريد استخدام متغير داخل سلسلة، إذ صار بإمكاننا تضمين المتغير مباشرة لتكملة السلسلة حتى تظهر السلسلة كاملة بشكل صحيح دون أي إرتباك للعين المجردة، لنأخذ فكرة أقرب
Default parameters
أثناء إشتغالي على شفرة كود PHP، عادة ما أستخدم القيم الافتراضية للمتغيرات في الدوال، هذه الخاصية تسمح لك بتحديد القيمة للمتغير مقدما، لذلك، عندما تنسى إعطاء القيمة للمتغير، لن يعرض خطأ غير معروف (Undifined) لأن القيمة محددة بالفعل في الإعداد الافتراضي للدالة، لذلك عندما تقوم بتشغيل الدالة باستخدام متغير فارغ، فسوف تأخذ القيمة الافتراضية t ، ولن تقوم بإرجاع خطأ، و هذا بالتحديد ما يحدث لنا في الجافاسكربت حين نتحقق من الكونسول و نجد ان الكونسول مليئ بأخطاء Undifined.
ترجع الدالة أعلاه undefined ، لأننا نسينا إعطاء قيمة للمتغير الثاني.
ولكن إذا استخدمنا Default parameters ، فلن تعرض undefined ، وستستخدم القيمة الإفتراضية عندما ننسى تعيينها.