احدث الإضافات والتحسينات فى الإصدارات الحديثة من جافاسكربت

تطورت لغة جافاسكربت بشكل كبير فى الأعوام القليلة الماضية واصبحت متربعة على عرش صناعة الويب فى العالم.

حيث حلت الجافاسكربت فى المركز الأول فى الإستفتاء السنوى لموقع stackoverflow.com. ويمكنك مشاهدة الأستفتاء كامل من هنا.

وظهرت الكثير من التحسينات فى الإصدارات التى صدرت مؤخرًا , وهى الاصدار السادس ES-6 والذى صدر فى عام 2015 مرورًا بالإصدارات التالية ECMAScript 2016 / 2017 / 2018.

وسنتناول فى هذا المقال أهم التحسينات التى تم إضافتها إلى لغة جافاسكربت فى هذه الإصدارات.

إضافة let , const

يتم فى العادة تعريف المتغيرات بإستخدام الكلمة var قبل اسم المتغير. ولكن منذ الإصدار السادس ES-6 تم أستبدال الكلمة var ب let و const.

الفروق الرئيسية بين let و var

لا يمكن إعادة تعريف المتغير عن إستخدام let : فعند إستخدام let فى تعريف متغير معين لا يمكنك أعادة تعريفه مرة اخرى عن طريق الخطأ, حيث ستظهر لك رسالة خطأ تفيد أن المتغير سبق تعريفه من قبل, لم يكن الأمر كذلك مع var حيث سيتم تنفيذ الاوامر بشكل سليم عند إعادة تعريف متغير بإستخدام var. انظر المثال التالى:

تعريف المتغير فى let داخل بلوك معين فقط :  تم اضافة نطاق للبلوك حيث أنه عند تعريف متغيرعن طريق let داخل بلوك معين فإنه يمكنك إستخدام هذا المتغير فقط داخل هذا البلوك. أنظر المثال التالى:

عن تعريف المتغير ب let لا يمكنك تعريف المتغير بعد إستخدامه : فى السابق عند إستخدام var فى تعريف المتغير كان بالامكان تعريف المتغير بعد إستخدامه حيث يتم عمل مايسمى hoisting اي الرفع وتعنى أنه قبل تنفيذ البرنامج تقوم الجافاسكربت اتوماتيكيًا بنقل كل تعريفات المتغيرات إلى بداية المجال الحالى سواء كان دالة معينة اذا كان التعريف داخل دالة او إلى بداية الكواد إذا كان التعريف للمتغير خارج الدالة.

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

ام const فتحتاج لإسخدامها إذا كنت تستخدم قيم ثابت ولا تنوى تغير قيمته بعد التعريف.

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

دول Arrow Function

تم إستحداث صيغة جديدة لكتابة الدالة فى جافاسكربت. انظر المثال التالى للتعرف على شكل Arrow Function.

لاحظ فى المثال السابق انه يمكنك حذف كلمة return و كذلك {} إذا كانت الدالة عبارة عن سطر واحد كما فى المثال الثانى فى الكود السابق.

لاحظ أيضًا فى المثال السابق حيث يمكنك حذف () فى حالة وجود معامل واحد فقط للدالة.

الاختلاف بين تعريف الدوال العادية و Arrow Functions ليس فقط فى شكل الكود ولكن هناك اختلاف كبير ومهم جدًا وهو كلمة this.

ففى الدوال العادية this تعود على العنصر الذى يقوم بتنفيذ الدالة سواء كان document او زر او غيرها.

ام فى arrow functions فإن this دائمًا يقصد بها النطاق الذى تم تعريف الدالة خلاله.

ميزة Import و Export

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

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

ويمكنك إستخدام هذه الخاصية كالتالى.

يوجد نوعين من تصدير المتغيرات او الثوابت

الاول عن طريق default كالتالى

 export default varName;

وتعنى المتغير الأفتراضى الذى سيتم تصديره ولا يمكن تصدير اكثر من متغير واحد افتراضى. ويمكن إستيراده كالتالى.

import chosenName from './path/to/file.js';

حيث chosenName اي اسم يمثل المتغير الافتراضى الذى تم استيراده داخل الملف الثانى.

الثانى عن طريق named كالتالى 

export const someData = ...;

ويمكن إستيراده عن طريق التالى

import { someData } from './path/to/file.js';

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

الكلاسات

الكلاسات هى مفهوم موجود فى الاصدارات القديمة من جافاسكربت وكما تلاحظ من المثال السابق فإن الكلاس هو بمثابة النسخة الاصل او القالب للكائنات التى يتم انشاؤها. حيث فى المثال السابق كل كائن جديد Person يحمل اسم او name.

و ال constructor هى الدالة المنشئة للكائن والتى يتم أستدعائها اتوماتيكيًا بمجرد إعلان نسخة جديدة من الكائن.

فى المثال السابق هو الشكل القديم لتعريف المتغيرات داخل constructor.

ام فى الإصدار الحديث أصبح الأمر أسهل انظر المثال التالى:

المعامل …

ويسمى Spread and Rest Operator وهو معامل مستحدث. حيث يستخدم ك spread او Rest على حسب طريقة الإستخدام لنبدء ب spread.

يستخدم المعامل فى هذه الحالة للإشارة إلى عناصر المصفوفة او الكائن كعناصر اولية ويمكن دمجهما فى مصفوفة اخرى, أنظر المثال التالى لتفهم أكثر.

مثال اخر

لاحظ فى هذا المثال انه عند تغير قيمة المصفوفة الاولى وحذف العنصر الأخير منها, هذا لم يؤثر على المصفوفة الثانية حيث انها نسخة جديدة تمامًا.

الإستخدام الاخر وهو Rest operator

في المثال السابق ، يقوم المعامل … بدمج المعاملات للدالة على شكل مصفوفة يمكن إستخدامها داخل الدالة.

كانت هذه أهم مميزات الإصدارات الحديثة من جافاسكربت.