تقدم ECMAScript 2024 ميزات رئيسية تعزز من قدرات JavaScript. في هذه المقالة، سنستعرض خمس تحديثات تُبسط عملية البرمجة وتُحسن الأداء.

ما هو ECMAScript؟

إي سي إم ايه سكريبت (بالإنجليزية: ECMAScript)‏ مجموعة من المعايير المتعلقة بلغات برمجة نصية، وموحدة من قبل إي سي إم ايه سكريبت الدولية في إطار مواصفات ECMA-262. لذلك فهو معيار يتم تطبيق مواصفاته بلغات نصية مختلفة، مثل جافا سكريبت أو أكشن سكربت. (ويكيبيديا)

تحذير: التوافق مع المتصفحات القديمة
العديد من الميزات في ECMAScript 2024 جديدة، وقد لا تدعمها المتصفحات القديمة بعد. لضمان عمل الكود الخاص بك عبر جميع المنصات، يُنصح باستخدام polyfills لتوفير حلول بديلة عند الحاجة.

لنستعرض أبرز المزايا في ECMAScript 2024:

طريقة (دالة) Object.groupBy

طريقة Object.groupBy هي طريقة ثابتة جديدة تتيح لك تجميع عناصر كائن قابل للتكرار، مثل المصفوفات، بناءً على دالة رد نداء (callback function). تُعيد هذه الطريقة كائنًا حيث يتوافق كل مفتاح مع مجموعة تُحدد بواسطة دالة الرد.

الصيغة (Syntax):

1Object.groupBy(iterable_objects, keySelectorCallback);

مثال برمجي:

1const cars = [
2    { name: "Toyota", type: "Sedan" },
3    { name: "Toyota", type: "SUV" },
4    { name: "Toyota", type: "Truck" },
5    { name: "BMW", type: "Sedan" },
6    { name: "BMW", type: "SUV" },
7    { name: "BMW", type: "Truck" },
8    { name: "Mercedes", type: "Sedan" },
9    { name: "Mercedes", type: "SUV" },
10    { name: "Mercedes", type: "Truck" },
11]
12
13const result = Object.groupBy(cars, ({type}) => type);

إذا قمنا بطباعة الكائن الناتج (result)، فسيظهر بالشكل التالي:

1console.log("result is:", result);
2/*
3result is: [Object: null prototype] {
4  Sedan: [
5    { name: 'Toyota', type: 'Sedan' },
6    { name: 'BMW', type: 'Sedan' },
7    { name: 'Mercedes', type: 'Sedan' }
8  ],
9  SUV: [
10    { name: 'Toyota', type: 'SUV' },
11    { name: 'BMW', type: 'SUV' },
12    { name: 'Mercedes', type: 'SUV' }
13  ],
14  Truck: [
15    { name: 'Toyota', type: 'Truck' },
16    { name: 'BMW', type: 'Truck' },
17    { name: 'Mercedes', type: 'Truck' }
18  ]
19}
20*/

كما ترى، يستخدم كائن النتيجة (result) قيم النوع كمفاتيح (keys). يتوافق كل مفتاح مع مصفوفة من الكائنات التي تشترك في نفس النوع. للوصول إلى البيانات المجمّعة، يمكنك ببساطة الإشارة إلى المفتاح المطلوب في كائن النتيجة.

1console.log("result.Sedan is:", result.Sedan);
2
3/*
4result.Sedan is: [
5  { name: 'Toyota', type: 'Sedan' },
6  { name: 'BMW', type: 'Sedan' },
7  { name: 'Mercedes', type: 'Sedan' }
8]
9*/

لا يقوم Object.groupBy بتغيير القيمة الأصلية للكائن أو المصفوفة، وهي خاصية تُعرف بالـ "immutable"، وتعني أنه لا يُعدِّل الكائن الأصلي بل ينشئ كائنًا جديدًا يحتوي على البيانات المجمعة.

طريقة (دالة) Map.groupBy

طريقة Map.groupBy تشبه كثيرًا طريقة Object.groupBy. فهي طريقة ثابتة جديدة تتيح لك تجميع عناصر كائن قابل للتكرار، مثل المصفوفات، بناءً على دالة رد نداء. النتيجة النهائية تكون كائنًا من نوع Map يحتوي على قيم فريدة من مفاتيح الكائن الأصلي، حيث يتوافق كل مفتاح مع مجموعة تُحدد بواسطة دالة الرد.

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

طريقة Map.groupBy أيضًا غير قابلة للتغيير، مما يعني أنها لا تعدل الكائن الأصلي بل تنشئ كائنًا جديدًا يحتوي على البيانات المجمعة.

متى تستخدم أيهما (Map.groupBy مقابل Object.groupBy)؟

استخدم Object.groupBy عندما تكون معايير التجميع بسيطة ويمكن تمثيلها كسلاسل نصية أو رموز.

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

طريقة (دالة) Promise.withResolvers

طريقة ثابتة جديدة تم تقديمها في ECMAScript 2024 هي Promise.withResolvers. تُعيد هذه الطريقة كائنًا يحتوي على الوعد نفسه، بالإضافة إلى دالتين: الـ resolver والـ rejecter. هذا يُبسط عملية إنشاء وإدارة الوعود مع التحكم الخارجي في الـ resolve و الـ reject. قبل ذلك، كان الحصول على وظيفة مماثلة يتطلب نهجًا أكثر يدويًا. قد تكون كتبت شيئًا مثل هذا:

1let resolve, reject;
2const promise = new Promise((res, rej) => {
3  resolve = res;
4  reject = rej;
5});

هذه الطريقة تعمل ولكنها تتضمن خطوات إضافية لتخزين دوال الـ resolve و الـ reject يدويًا. تقوم Promise.withResolvers بتبسيط الأمر من خلال تجميع كل شيء معًا في كائن واحد:

1const {promise, resolve, reject} = Promise.withResolvers()

طريقة (دالة) String.prototype.isWellFormed

تم تصميم طريقة String.prototype.isWellFormed للتحقق مما إذا كان النص مُنسقًا بشكل صحيح وفقًا لمعايير ترميز Unicode. تُعيد هذه الطريقة قيمة منطقية:

• صحيح true إذا كان النص لا يحتوي على أي lone surrogates (رموز غير مزدوجة).
• خطأ false إذا كان النص يحتوي على واحد أو أكثر من lone surrogates (رموز غير مزدوجة).

مثال برمجي:

1const validString = "Hello, world! 🌍"; // Well-formed string
2console.log(validString.isWellFormed()); // true
3
4const invalidString = "Hello, world! \uD83D"; // Lone surrogate
5console.log(invalidString.isWellFormed()); // false

طريقة (دالة) String.prototype.toWellFormed

طريقة String.prototype.toWellFormed مُصممة لضمان أن يكون النص مُنسقًا بشكل صحيح وفقًا لمعايير ترميز Unicode. تحديدًا، تطبق هذه الطريقة توحيد Unicode لضمان أن النص لا يحتوي على رموز غير مزدوجة (lone surrogates) ويتوافق مع قواعد الترميز السليمة.

مثال برمجي:

1const malformedString = "Hello, world! \uD83D"; // Contains a lone surrogate
2
3const wellFormedString = malformedString.toWellFormed();
4console.log(wellFormedString); // "Hello, world! �" (well-formed)
5
6const alreadyWellFormed = "Hello, world! 🌍"; // Already well-formed
7const unchangedString = alreadyWellFormed.toWellFormed();
8console.log(unchangedString); // "Hello, world! 🌍" (unchanged)

المراجع:

• ECMAScript® 2024 Language Specification - tc39
• ECMAScript - Wikipedia
• JavaScript Object.groupBy() Method - w3schools
• JavaScript Map.groupBy() Method - w3schools
• Promise.withResolvers() - JavaScript | MDN
• String.prototype.toWellFormed() - JavaScript | MDN
• String.prototype.isWellFormed() - JavaScript | MDN

الخاتمة

لقد استعرضنا خمس ميزات رئيسية في ECMAScript 2024، بما في ذلك Object.groupBy و Map.groupBy و Promise.withResolvers. توفر هذه التحديثات أدوات قوية لتطوير JavaScript، مما يعزز من الوظائف وسهولة الاستخدام. عند دمج هذه الميزات في مشاريعك، احرص على مراعاة توافق المتصفحات، ابقى على اطلاع دائم لتحسين ممارسات البرمجة الخاصة بك. Happy coding!