إليك بعض المميزات الجديدة في JavaScript

ملخص

تقدم إصدارات ES2024 و 2025 إضافات قوية: Promise.withResolvers()، وطرق تجميع المصفوفات (Array grouping)، وعمليات Set، ومساعدات Iterator، وتحسينات تجعل JavaScript أكثر تعبيرًا وأداءً للتطبيقات الحديثة.

تطور JavaScript لا يتوقف أبدًا. في كل عام، تقوم لجنة TC39 (لجنة المعايير) بتقديم ميزات جديدة من مرحلة الاقتراح إلى التقييس. بحلول عام 2026، أصبحت ميزات ES2024 متاحة على نطاق واسع في المتصفحات الحديثة و Node.js، واقتراحات ES2025 تلوح في الأفق. في هذا المنشور، سنستكشف الإضافات الأكثر فائدة من السنوات الأخيرة وما سيأتي لاحقًا، مع أمثلة كود عملية لكل منها.

ميزات ES2024

Promise.withResolvers()

قبل ES2024، كان إنشاء Promise والتحكم يدويًا في تسويته يتطلب تخزين مراجع خارج المنشئ (constructor). ميزة Promise.withResolvers() تعالج هذا الأمر.

// Before ES2024 — verbose
let resolve, reject;
const promise = new Promise((res, rej) => {
  resolve = res;
  reject = rej;
});

// ES2024 — clean
const { promise, resolve, reject } = Promise.withResolvers();

// Real-world use case: event-driven resolution
const { promise, resolve } = Promise.withResolvers();

document.getElementById('button').addEventListener('click', () => {
  resolve('Button clicked!');
});

const result = await promise;
console.log(result); // Button clicked!

دعم المتصفحات: Chrome 71+، Firefox 126+، Safari 18.2+، Node.js 22.6+

تجميع المصفوفات: Array.groupBy() و Object.groupBy()

تجميع البيانات بواسطة دالة مفتاحية (key function) هو عملية شائعة. وفرت ES2024 أخيرًا دعمًا أصليًا (native) لذلك.

const products = [
  { id: 1, name: 'Laptop', category: 'Electronics', price: 1200 },
  { id: 2, name: 'Chair', category: 'Furniture', price: 150 },
  { id: 3, name: 'Monitor', category: 'Electronics', price: 400 },
  { id: 4, name: 'Desk', category: 'Furniture', price: 500 }
];

// Array.groupBy() - returns Map-like object with array values
const byCategory = Array.groupBy(products, p => p.category);
// Result: { Electronics: [...], Furniture: [...] }

console.log(byCategory.Electronics); // Array of electronics

// Object.groupBy() - works with any iterable
const grouped = Object.groupBy(products, p => p.price > 500 ? 'expensive' : 'affordable');
// Result: { expensive: [...], affordable: [...] }

// TypeScript signature
interface GroupedResult<T> {
  [key: string]: T[];
}
const result: GroupedResult<Product> = Array.groupBy(products, p => p.category);

دعم المتصفحات: Chrome 122+، Firefox 125+، Safari 18.2+، Node.js 21+

طرق Set: الاتحاد، التقاطع، الفرق

تلقت مجموعات Set عمليات قوية مستمدة من نظرية المجموعات.

const admins = new Set(['alice', 'bob', 'charlie']);
const moderators = new Set(['bob', 'david', 'eve']);

// Union: all members from both sets
const allStaff = admins.union(moderators);
console.log(allStaff); // Set(5) { 'alice', 'bob', 'charlie', 'david', 'eve' }

// Intersection: members in both sets
const staffWithBothRoles = admins.intersection(moderators);
console.log(staffWithBothRoles); // Set(1) { 'bob' }

// Difference: members in first set but not second
const adminsOnly = admins.difference(moderators);
console.log(adminsOnly); // Set(2) { 'alice', 'charlie' }

// Symmetric difference: members in either set but not both
const uniqueToEach = admins.symmetricDifference(moderators);
console.log(uniqueToEach); // Set(4) { 'alice', 'charlie', 'david', 'eve' }

// Relationship checks
console.log(admins.isSubsetOf(allStaff)); // true
console.log(admins.isSupersetOf(moderators)); // false
console.log(admins.isDisjointFrom(new Set(['frank', 'grace']))); // true

دعم المتصفحات: Chrome 122+، Firefox 127+، Safari 18.2+، Node.js 21.9+

البحث في المصفوفة بواسطة الفهرس

كانت دالة findIndex() تعيد الفهرس فقط، وليس القيمة. الآن يمكنك تفكيك (destructure) كليهما.

const users = [
  { id: 1, name: 'Alice', active: true },
  { id: 2, name: 'Bob', active: false },
  { id: 3, name: 'Charlie', active: true }
];

// Traditional findIndex - returns only index
const index = users.findIndex(u => u.name === 'Bob');
const user = users[index];

// Modern approach - use find with additional logic
const user = users.find(u => u.name === 'Bob');
const index = users.indexOf(user);

مساعدات Iterator (اقتراح المرحلة 3)

يتم تقييس مساعدات Iterator لجعل العمل مع العناصر القابلة للتكرار (iterables) أكثر سهولة وسلاسة.

// Currently requires polyfill or transpilation, but will be native in 2025-2026

// Mapping over iterables
const numbers = [1, 2, 3, 4, 5];
const doubled = Iterator.from(numbers)
  .map(n => n * 2)
  .filter(n => n > 4)
  .toArray();

console.log(doubled); // [6, 8, 10]

// Chaining operations without intermediate arrays
function* generateUsers() {
  yield { id: 1, age: 25 };
  yield { id: 2, age: 30 };
  yield { id: 3, age: 35 };
}

const adults = Iterator.from(generateUsers())
  .filter(u => u.age >= 30)
  .toArray();

الحالة: المرحلة 3 (متوقع في ES2026/2027)

المزخرفات Decorators (المرحلة 3)

تسمح المزخرفات بالبرمجة القائمة على البيانات الوصفية (metadata-driven programming) وتستخدم على نطاق واسع في TypeScript وأطر العمل.

// TypeScript decorator (currently requires experimentalDecorators flag)
function readonly(target: any, propertyKey: string) {
const descriptor = Object.getOwnPropertyDescriptor(target, propertyKey);
Object.defineProperty(target, propertyKey, {
...descriptor,
writable: false
});
}

class User {
@readonly
id: number = 1;

name: string = 'Alice';
}

const user = new User();
user.name = 'Bob'; // OK
user.id = 2; // Error: Cannot assign to read only property 'id'

الحالة: المرحلة 3 (مدعومة على نطاق واسع مع المترجمات؛ أصلية في أطر العمل الحديثة)

اقتراحات Record و Tuple (المرحلة 2)

تهدف هياكل البيانات غير القابلة للتغيير (immutable) هذه إلى توفير دلالات القيمة (value semantics) للكائنات المعقدة.

// Currently Stage 2 - not yet widely available, but representative syntax:

// Record: immutable object-like structure
const point = #{x: 1, y: 2};
// point.x = 3; // Error: Records are immutable

// Tuple: immutable array-like structure
const pair = #[1, 2];
// pair[0] = 3; // Error: Tuples are immutable

// Value equality
const p1 = #{x: 1, y: 2};
const p2 = #{x: 1, y: 2};
console.log(p1 === p2); // true — value semantics, not reference

// Use cases: state immutability, structural equality in data processing

الحالة: المرحلة 2 (ليست في المتصفحات بعد؛ تتوفر polyfills ومترجمات تجريبية)

مطابقة الأنماط Pattern Matching (المرحلة 1)

اقتراح في مرحلة مبكرة لاستخدام أنماط التفكيك (destructuring patterns) في المنطق الشرطي.

// Conceptual syntax (still being debated)
// Not yet available in production

// Future pattern matching concept:
const response = { status: 200, data: [...] };

match (response) {
when ({ status: 200, data }) => {
console.log('Success:', data);
}
when ({ status: 404 }) => {
console.log('Not found');
}
when ({ status }) => {
console.log('Error:', status);
}
}

الحالة: المرحلة 1 (استكشاف مبكر؛ لا يُنصح به للاستخدام في الإنتاج)

ملخص توافق المتصفحات وبيئات التشغيل

الميزة	Chrome	Firefox	Safari	Node.js	الحالة
Promise.withResolvers()	71+	126+	18.2+	22.6+	قياسي
Array.groupBy()	122+	125+	18.2+	21+	قياسي
طرق Set	122+	127+	18.2+	21.9+	قياسي
مساعدات Iterator	✗	✗	✗	✗	المرحلة 3
المزخرفات Decorators	✗	✗	✗	✗	المرحلة 3 (دعم TS)
Record/Tuple	✗	✗	✗	✗	المرحلة 2
مطابقة الأنماط	✗	✗	✗	✗	المرحلة 1

أفضل الممارسات لاستخدام الميزات الجديدة

1. تحقق من بيئتك المستهدفة

إذا كان تطبيقك يحتاج لدعم متصفحات قديمة، استخدم مترجمًا (transpiler) مثل Babel.

// babel.config.js
module.exports = {
presets: [
['@babel/preset-env', {
targets: '> 0.5%, last 2 versions, not dead'
}]
]
};

2. استخدم Polyfill عند الحاجة

بالنسبة لميزات المرحلة 2+ التي لم تتوفر في المتصفحات بعد، استخدم polyfills أو المترجمات.

// polyfill-example.js
if (!Promise.withResolvers) {
Promise.withResolvers = function() {
let resolve, reject;
const promise = new Promise((res, rej) => {
resolve = res;
reject = rej;
});
return { promise, resolve, reject };
};
}

3. اختبر في بيئاتك المستهدفة

استخدم caniuse.com أو browserslist للتحقق من الدعم.

{
"browserslist": [
"last 2 versions",
"> 0.5%",
"not dead"
]
}

الخلاصة

قدمت ES2024 تحسينات جوهرية مع Promise.withResolvers()، وطرق التجميع، وعمليات Set. تعد ES2025 وما بعدها بمساعدات Iterator، ومزخرفات متقدمة، وربما Records و Tuples. ابقَ على اطلاع دائم باقتراحات TC39، ولكن أعطِ الأولوية للميزات المتوفرة بالفعل في بيئاتك المستهدفة. استخدم المترجمات لبناء الجمل البرمجية الحديثة، واستفد من الميزات المستقرة لكتابة كود أنظف وأكثر تعبيرًا اليوم.