10 ميزات جديدة في JavaScript ES2020 يجب على كل مطور معرفتها

دقائق القراءة: 6

يسرنا أن نعلن عن الانتهاء الرسمي لميزات ES2020 الجديدة! هذا يعني أن لدينا الآن رؤية شاملة للتغييرات والتحسينات التي طرأت على مواصفات JavaScript في هذا الإصدار. دعونا نستعرض معًا هذه الإضافات الهامة التي ستعزز تجربة المطورين وتفتح آفاقًا جديدة في بناء تطبيقات الويب.

1. BigInt: التعامل مع الأعداد الصحيحة الكبيرة بلا حدود

تُعد ميزة BigInt من أكثر الميزات المنتظرة في JavaScript، وقد أصبحت متاحة الآن رسميًا. تتيح هذه الميزة للمطورين تمثيل أعداد صحيحة أكبر بكثير في شيفرة JavaScript الخاصة بهم، وهو أمر بالغ الأهمية لمعالجة البيانات الضخمة. حاليًا، الحد الأقصى للعدد الصحيح الذي يمكن تخزينه في JavaScript هو pow(2, 53) - 1. لكن BigInt يتجاوز هذا الحد بكثير، مما يفتح آفاقًا جديدة في التعامل مع الأرقام الفلكية.

مثال يوضح استخدام BigInt في JavaScript

لتحديد أن العدد هو من نوع BigInt، يجب إضافة الحرف n في نهاية العدد، كما هو موضح في المثال أعلاه. يشير هذا الحرف إلى أن العدد يجب أن يتعامل معه محرك JavaScript (مثل محرك V8) بطريقة مختلفة. من المهم ملاحظة أن هذا التحسين ليس متوافقًا مع الإصدارات السابقة، لأن نظام الأرقام التقليدي يعتمد على معيار IEEE754 الذي لا يدعم أعدادًا بهذا الحجم.

2. الاستيراد الديناميكي (Dynamic Import): تحميل الوحدات عند الطلب

تمنحك ميزة الاستيراد الديناميكي في JavaScript القدرة على استيراد ملفات JS كوحدات برمجية (modules) بشكل ديناميكي ومباشر في تطبيقك. هذه الوظيفة مشابهة لما يتم تحقيقه حاليًا باستخدام أدوات مثل Webpack و Babel، ولكنها الآن جزء أصيل من اللغة. ستساعدك هذه الميزة على تقديم الشيفرة البرمجية عند الطلب، وهي تقنية تُعرف باسم تقسيم الشيفرة (code splitting)، دون الحاجة إلى التعقيدات الإضافية لأدوات تجميع الوحدات الأخرى.

مثال يوضح كيفية استخدام الاستيراد الديناميكي في JavaScript

يمكنك أيضًا تحميل الشيفرة بشكل مشروط ضمن كتل if-else، مما يوفر مرونة كبيرة. الميزة الأهم هي أنك تستورد وحدة برمجية حقيقية، وبالتالي لا يؤدي ذلك إلى تلوث النطاق العام (global namespace) لتطبيقك.

3. عامل الدمج الصفري (Nullish Coalescing Operator) ??

يضيف عامل الدمج الصفري (??) القدرة على التحقق بدقة من القيم الصفرية (nullish values) بدلاً من القيم الزائفة (falsey values). قد تتساءل عن الفرق بين هذين المفهومين. في JavaScript، هناك العديد من القيم التي تعتبر زائفة، مثل السلاسل النصية الفارغة ("")، والرقم صفر (0)، وundefined، وnull، وfalse، وNaN، وغيرها.

مقارنة بين عامل OR وعامل الدمج الصفري Nullish Coalescing Operator

ومع ذلك، في كثير من الأحيان قد ترغب في التحقق مما إذا كان المتغير صفريًا — أي إذا كان undefined أو null فقط — على سبيل المثال، عندما يكون مقبولًا للمتغير أن يحتوي على سلسلة نصية فارغة أو حتى قيمة false. في هذه الحالات، ستستخدم عامل الدمج الصفري الجديد، ??. يوضح المثال أعلاه بوضوح كيف أن عامل OR (||) يعيد دائمًا قيمة صحيحة (truthy value)، بينما يعيد عامل الدمج الصفري قيمة غير صفرية (non-nullish value).

4. السلسلة الاختيارية (Optional Chaining) ?.

تتيح لك صيغة السلسلة الاختيارية (?.) الوصول إلى خصائص الكائنات المتداخلة بعمق دون القلق بشأن ما إذا كانت الخاصية موجودة أم لا. إذا كانت موجودة، فسيتم الوصول إليها بنجاح! وإذا لم تكن موجودة، فسيتم إرجاع undefined. هذه الميزة لا تعمل فقط على خصائص الكائنات، بل تمتد لتشمل استدعاءات الدوال (function calls) والمصفوفات (arrays) أيضًا، مما يجعلها مريحة للغاية في التعامل مع البيانات غير المؤكدة أو الديناميكية.

مثال يوضح استخدام السلسلة الاختيارية Optional Chaining في JavaScript

5. Promise.allSettled: متابعة جميع الوعود

تقبل دالة Promise.allSettled مصفوفة من الوعود (Promises) ولا تُكمل إلا بعد أن تستقر جميعها — سواء تم حلها (resolved) بنجاح أو رفضها (rejected) بفشل. هذه الميزة لم تكن متاحة بشكل أصيل في JavaScript من قبل، على الرغم من وجود تطبيقات مشابهة مثل Promise.race و Promise.all.

مثال يوضح استخدام Promise.allSettled في JavaScript

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

6. String.prototype.matchAll: استخراج جميع التطابقات

تُعد matchAll دالة جديدة أُضيفت إلى كائن String.prototype، وهي مرتبطة بالتعبيرات النمطية (Regular Expressions). تُرجع هذه الدالة كائنًا تكراريًا (iterator) يقوم بإرجاع جميع المجموعات المتطابقة (matched groups) واحدة تلو الأخرى. هذا يوفر طريقة أكثر فعالية ومرونة للتعامل مع عمليات البحث المعقدة في السلاسل النصية.

مثال يوضح استخدام String.prototype.matchAll في JavaScript

7. globalThis: الوصول الموحد للكائن العام

إذا كنت قد كتبت شيفرة JavaScript تعمل عبر منصات متعددة — مثل بيئة المتصفح، أو Node.js، أو داخل عمال الويب (web-workers) — فربما واجهت صعوبة في الوصول إلى الكائن العام (global object). يعود ذلك إلى أن هذا الكائن يختلف اسمه باختلاف البيئة: فهو window في المتصفحات، وglobal في Node.js، وself في عمال الويب. ومع وجود المزيد من بيئات التشغيل، ستختلف أسماء الكائنات العامة أيضًا.

مثال يوضح استخدام globalThis للوصول إلى الكائن العام في JavaScript

قبل ES2020، كان عليك إنشاء تطبيقك الخاص للكشف عن بيئة التشغيل ثم استخدام الكائن العام الصحيح. لكن ES2020 يقدم لنا globalThis، الذي يشير دائمًا إلى الكائن العام بغض النظر عن مكان تنفيذ الشيفرة، مما يوفر توحيدًا وتبسيطًا كبيرًا في تطوير التطبيقات متعددة المنصات.

8. تصدير مساحات الأسماء للوحدات (Module Namespace Exports)

في وحدات JavaScript، كان من الممكن بالفعل استخدام الصيغة التالية للاستيراد:

import * as utils from './utils.mjs'

ومع ذلك، لم تكن هناك صيغة تصدير (export) متماثلة ومباشرة حتى الآن. يقدم ES2020 هذه الصيغة الجديدة التي تسمح بتصدير مساحة اسم كاملة من وحدة أخرى:

export * as utils from './utils.mjs'

هذه الصيغة مكافئة عمليًا للجمع بين الاستيراد والتصدير بالطريقة التقليدية التالية:

import * as utils from './utils.mjs'
export { utils }

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

9. ترتيب محدد لحلقات for-in

لم تحدد مواصفات ECMA سابقًا الترتيب الذي يجب أن تعمل به حلقة for (x in y). على الرغم من أن المتصفحات كانت تطبق ترتيبًا متسقًا من تلقاء نفسها قبل هذا الإصدار، فقد تم توحيد هذا الترتيب رسميًا في ES2020. هذا يضمن سلوكًا أكثر قابلية للتنبؤ به وتناسقًا عبر مختلف بيئات JavaScript عند التكرار على خصائص الكائنات.

10. import.meta: بيانات وصفية للوحدات

تم إنشاء الكائن import.meta بواسطة تطبيق ECMAScript، مع نموذج أولي (prototype) بقيمة null. يتيح هذا الكائن للمطورين الوصول إلى معلومات وصفية (meta information) حول الوحدة الحالية. على سبيل المثال، إذا كان لدينا وحدة باسم module.js مُضمنة بهذه الطريقة:

<script type="module" src="module.js"></script>

يمكنك الوصول إلى معلومات وصفية حول هذه الوحدة باستخدام الكائن import.meta كالتالي:

console.log(import.meta); // { url: "file:///home/user/module.js" }

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

الخلاصة التقنية

تُظهر ميزات ES2020 مدى التطور السريع والمستمر للغة JavaScript ومجتمعها. لقد تحولت JavaScript من لغة كانت تواجه انتقادات قبل عقد من الزمن إلى واحدة من أقوى اللغات وأكثرها مرونة وتنوعًا في عالم البرمجة اليوم. هذه الإضافات الجديدة، مثل BigInt للتعامل مع الأعداد الكبيرة، وOptional Chaining للوصول الآمن للخصائص، وNullish Coalescing للتحقق الدقيق من القيم، وPromise.allSettled لإدارة الوعود، تعزز من قدرات اللغة وتجعلها أكثر كفاءة وراحة للمطورين. إنها خطوة مهمة نحو بناء تطبيقات ويب أكثر قوة واستقرارًا، وتؤكد على التزام ECMAScript بتلبية احتياجات المطورين المتغيرة.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *