Ecmascript ES6 دليل شامل لـ JavaScript الحديثة

ملخص

أحدثت ECMAScript 6 (ES2015) ثورة في JavaScript من خلال الفئات (classes)، والدوال السهمية (arrow functions)، والوعود (Promises). أضافت الإصدارات اللاحقة طبقات من async/await (ES2017)، والربط الاختياري (optional chaining) (ES2020)، و top-level await (ES2022)، وتجميع المصفوفات و Promise.withResolvers() (ES2024)، وطرق Set الجديدة (ES2025) — وهي تحسينات تجعل كود العمليات غير المتزامنة ومعالجة البيانات أكثر نظافة وتعبيرًا من أي وقت مضى.

تطورت JavaScript بشكل كبير منذ وصول ES6 في عام 2015. ما بدأ كتحسينات كتابية أساسية (syntactic sugar) — مثل الدوال السهمية، وتفكيك البنية (destructuring)، والقوالب النصية (template literals) — نما ليصبح لغة متطورة وناضجة. بحلول عام 2026، أصبح لدى مطوري JavaScript إمكانية الوصول إلى تجريدات قوية: async/await، والربط الاختياري، والدمج الصفري (nullish coalescing)، ومكتبة قياسية قوية. إذا تعلمت JavaScript قبل عام 2015، فقد تبدو JS الحديثة وكأنها لغة مختلفة تمامًا. يغطي هذا الدليل الميزات الأساسية من ES6 حتى ES2025 التي يجب على كل مطور معرفتها.

ميزات ES6 الأساسية

الدوال السهمية وصيغة الدوال

جلبت الدوال السهمية (=>) صيغة مختصرة وربطًا معجميًا لـ this — وهو أحد أكثر التغييرات تأثيرًا في ES6.

// Traditional function
function greet(name) {
  return `Hello, ${name`;
}

// Arrow function (concise)
const greet = (name) => `Hello, ${name`;

// Multi-line arrow function
const calculate = (a, b) => {
  const sum = a + b;
  return sum * 2;
};

// Lexical 'this' binding
const button = {
  label: 'Click me',
  attach() {
    document.addEventListener('click', () => {
      console.log(this.label); // 'Click me' — this is bound to button
    });
  }
};

تفكيك البنية (Destructuring Assignment)

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

// Array destructuring
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first, second, rest); // 1 2 [3, 4, 5]

// Object destructuring
const { name, age, city = 'Unknown' } = {
  name: 'Alice',
  age: 30
};
console.log(name, age, city); // Alice 30 Unknown

// Nested destructuring
const response = {
  status: 200,
  data: { user: { id: 1, email: 'user@example.com' } }
};
const { data: { user: { email } } } = response;
console.log(email); // user@example.com

// Function parameter destructuring
const displayUser = ({ name, age }) => {
console.log(`${name is ${age years old`);
};
displayUser({ name: 'Bob', age: 25 });

الفئات والوراثة

توفر فئات ES6 صيغة مألوفة للبرمجة كائنية التوجه، على الرغم من أنها مجرد تحسين كتابي فوق نموذج JavaScript القائم على النماذج الأولية (prototypes).

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name makes a sound`);
  }

  static info() {
    return 'This is an animal class';
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  speak() {
    console.log(`${this.name barks`);
  }
}

const dog = new Dog('Max', 'Labrador');
dog.speak(); // Max barks
console.log(Animal.info()); // This is an animal class

الوحدات (Import/Export)

أحدثت وحدات ES6 ثورة في تنظيم الكود. كل ملف هو وحدة (module) لها نطاقها الخاص.

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export default class Calculator {
  multiply(a, b) { return a * b; }
}

// app.js
import Calculator, { add, subtract } from './math.js';
import * as math from './math.js';

console.log(add(5, 3)); // 8
const calc = new Calculator();
console.log(calc.multiply(4, 5)); // 20

أنماط العمليات غير المتزامنة: الوعود وما بعدها

الوعود (Promises)

استبدلت الوعود "جحيم ردود الفعل" (callback hell) بعمليات غير متزامنة قابلة للتسلسل.

const fetchUser = (id) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      if (id > 0) {
        resolve({ idname: 'Alice' });
      } else {
        reject(new Error('Invalid ID'));
      }
    }100);
  });
};

fetchUser(1)
  .then(user => console.log(user.name)) // Alice
  .catch(err => console.error(err.message));

async/await (ES2017)

يجعل async/await الكود غير المتزامن يُقرأ مثل الكود المتزامن، مما يحسن قابلية القراءة بشكل كبير.

const getUser = async (id) => {
  try {
    const response = await fetch(`/API/users/${id`);
    const user = await response.json();
    return user;
  } catch (error{
    console.error('Failed to fetch user:';
  }
};

// Using async/await
const user = await getUser(1;
console.log(user.name;

// Parallel operations with Promise.all
const [user comments] = await Promise.all([
  fetchUser(1
  fetchPosts(1
  fetchComments(1];

Promise.withResolvers() (ES2024)

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

// Traditional approach
let resolve;
const promise = new Promise((res => {
  resolve = res;
  reject = rej;
};

// Modern approach (ES2024)
const { promise: presolve: rreject: rej } = Promise.withResolvers(;

// Practical use case: manual control flow
const { promise} = Promise.withResolvers(;

setTimeout((=> resolve('Done!' 1000;
console.log(await promise; // Done!

الميزات الحديثة (ES2018+)

الربط الاختياري والدمج الصفري (ES2020)

التنقل الآمن عبر الخصائص المتداخلة دون الحاجة إلى فحوصات متكررة للقيم الفارغة.

const user = { profile: { name: 'Alice' } };

// Optional chaining
console.log(user?.profile?.name; // Alice
console.log(user?.address?.street; // undefined (no error)

// Nullish coalescing - use default only if value is null/undefined
const timeout = config?.timeout ?? 5000; // 5000 if config is null/undefined
const count = 0 ?? 10; // 0 (because 0 is not null/undefined)

Top-Level Await (ES2022)

يمكن لملفات الوحدات الحديثة الآن استخدام await في المستوى الأعلى دون الحاجة لتغليفها في دالة async.

// module.js
const response = await fetch('/API/config';
const config = await response.json(;
export default config;

// app.js
import config from './module.js';
console.log(config.apiUrl; // Works seamlessly

تجميع المصفوفات (ES2024)

أضافت ES2024 ميزتي Object.groupBy() و Map.groupBy() لتجميع عناصر قابلة للتكرار بواسطة دالة مفتاح، لتحل محل أنماط reduce() المطولة. ملاحظة: تم التخلي عن اقتراح سابق لـ Array.prototype.group() / Array.groupBy() بسبب مشاكل توافق الويب مع المكتبات التي قامت بتعديل Array.prototype — المعيار المعتمد في API هو الطرق الثابتة (static methods) في Object و Map.

const users = [
  { id: 1role: 'admin'name: 'Alice' }  { id: 2role: 'user'name: 'Bob' }  { id: 3role: 'admin'name: 'Charlie' }
];

// Object.groupBy — returns a null-prototype object keyed by string/symbol
const byRole = Object.groupBy(usersuser => user.role;
console.log(byRole.admin; // [{ id: 1, ...Alice }, { id: 3, ...Charlie }]

// Map.groupBy — returns a Map, so keys can be any value (objects, numbers, etc.)
const byRoleMap = Map.groupBy(usersuser => user.role;
console.log(byRoleMap.get('admin';

طرق Set (ES2025)

اكتسبت مجموعات Set طرقًا جديدة لعمليات الاتحاد (union)، والتقاطع (intersection)، والفرق (difference). وصل اقتراح TC39 إلى المرحلة 4 في عام 2024 وأصبحت الطرق متاحة بشكل أساسي عبر المتصفحات الرئيسية في يونيو 2024، ولكن تمت إضافتها رسميًا إلى مواصفات اللغة في ECMAScript 2025 (التي اكتملت في يونيو 2025).

const setA = new Set([123];
const setB = new Set([234];

// Union
const union = setA.union(setB; // Set(4) { 1, 2, 3, 4 }

// Intersection
const intersection = setA.intersection(setB; // Set(2) { 2, 3 }

// Difference
const difference = setA.difference(setB; // Set(1) { 1 }

// Subset / superset checks
console.log(setA.isSubsetOf(new Set([1234]; // true
console.log(setA.isSupersetOf(new Set([12]; // true

TypeScript: خيار شائع لـ JavaScript الحديثة

// TypeScript adds type annotations
interface User {
  id: number;
  name: string;
  email: string;
}

const fetchUser = async (id: number: Promise<User> => {
  const response = await fetch(`/API/users/${id`;
  return response.json(;
};

// Type checking prevents errors at compile time
const user = await fetchUser(1;
console.log(user.name; // ✓ type-safe
console.log(user.nonexistent; // ✗ compile error

المولدات (Generators) والمكررات (Iterables)

توفر المولدات طريقة لتعريف تسلسلات قابلة للتكرار باستخدام function* و yield.

function* countdown(n{
  while (n > 0{
    yield n;
    n--;
  }
}

for (const num of countdown(3 {
console.log(num; // 3, 2, 1
}

// Manual iteration
const gen = countdown(3;
console.log(gen.next(; // { value: 3, done: false }
console.log(gen.next(; // { value: 2, done: false }
console.log(gen.next(; // { value: 1, done: false }
console.log(gen.next(; // { value: undefined, done: true }

أنماط عملية لعام 2026

معالجة الأخطاء باستخدام async/await

const robustFetch = async (url= 3=> {
  for (let attempt = 0< retries++{
    try {
      const response = await fetch(url;
      if (!response.okthrow new Error(`HTTP ${response.status`;
      return await response.