JavaScript الحديثة: ميزات ES6+

منذ عام 2015، شهدت JavaScript تطورًا كبيرًا مع إدخال ECMAScript 2015 (ES6) والإصدارات التي تلتها. وقد أضافت هذه التحديثات العديد من الميزات التي تجعل الشيفرة أنظف وأكثر تعبيرًا وأقوى.

أبرز ميزات ES6+

1. Let و Const

قبل ES6، كانت المتغيرات تُعلَن باستخدام var، التي كانت تعاني من مشكلات في النطاق. أدخل ES6 كلًّا من let وconst:

// let : variable modifiable avec portée de bloc
let compteur = 0;
compteur = 1; // OK

// const : constante non réassignable
const PI = 3.14159;
// PI = 3.14; // Erreur !

// Portée de bloc
if (true) {
  let x = 10;
  const y = 20;
  var z = 30;
}
// console.log(x); // Erreur : x n'est pas défini
// console.log(y); // Erreur : y n'est pas défini
console.log(z); // 30 (var n'a pas de portée de bloc)

2. Arrow Functions (الدوال السهمية)

توفر الدوال السهمية صياغة أكثر إيجازًا وتحافظ على سياق this:

// Fonction classique
function addition(a, b) {
  return a + b;
}

// Fonction fléchée équivalente
const additionFleche = (a, b) => a + b;

// Avec un seul paramètre, les parenthèses sont optionnelles
const carre = x => x * x;

// Avec un corps de fonction plus complexe
const calculer = (a, b) => {
  const resultat = a * b;
  return resultat + 5;
};

// Préservation du contexte this
const personne = {
  nom: "Alice",
  amis: ["Bob", "Charlie"],
  
  // Avec fonction classique
  afficherAmisClassique: function() {
    this.amis.forEach(function(ami) {
      console.log(this.nom + " connaît " + ami); // Erreur : this.nom est undefined
    });
  },
  
  // Avec fonction fléchée
  afficherAmisFleche: function() {
    this.amis.forEach(ami => {
      console.log(this.nom + " connaît " + ami); // Fonctionne correctement
    });
  }
};

3. Template Literals (القوالب النصية)

تتيح القوالب النصية (template literals) تضمين التعابير داخل السلاسل النصية:

const nom = "Alice";
const age = 30;

// Avant ES6
const message1 = "Bonjour, je m'appelle " + nom + " et j'ai " + age + " ans.";

// Avec template literals
const message2 = `Bonjour, je m'appelle ${nom} et j'ai ${age} ans.`;

// Chaînes multi-lignes
const html = `
<div>
  <h1>Profil</h1>
  <p>Nom: ${nom}</p>
  <p>Âge: ${age}</p>
</div>
`;

// Tagged templates
function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    return result + str + (values[i] ? `<strong>${values[i]}</strong>` : '');
  }, '');
}

const messageHighlight = highlight`Bonjour, je m'appelle ${nom} et j'ai ${age} ans.`;
// "Bonjour, je m'appelle <strong>Alice</strong> et j'ai <strong>30</strong> ans."

4. Destructuring (التفكيك)

يتيح التفكيك استخراج القيم من المصفوفات والكائنات:

// Déstructuration d'objets
const utilisateur = {
  nom: "Dupont",
  prenom: "Jean",
  age: 30,
  adresse: {
    ville: "Paris",
    codePostal: "75001"
  }
};

const { nom, prenom, age } = utilisateur;
console.log(nom); // "Dupont"

// Avec alias
const { nom: nomFamille, prenom: prenomUtilisateur } = utilisateur;
console.log(nomFamille); // "Dupont"

// Valeurs par défaut
const { pays = "France" } = utilisateur;
console.log(pays); // "France"

// Déstructuration imbriquée
const { adresse: { ville } } = utilisateur;
console.log(ville); // "Paris"

// Déstructuration de tableaux
const couleurs = ["rouge", "vert", "bleu"];
const [premiere, deuxieme, troisieme] = couleurs;
console.log(premiere); // "rouge"

// Ignorer des éléments
const [, , derniere] = couleurs;
console.log(derniere); // "bleu"

// Rest pattern
const [premier, ...reste] = couleurs;
console.log(reste); // ["vert", "bleu"]

// Échange de variables
let a = 5;
let b = 10;
[a, b] = [b, a];
console.log(a, b); // 10 5

5. Spread Operator (معامل الانتشار)

يتيح معامل الانتشار (...) تفكيك المصفوفات والكائنات إلى عناصرها:

// Avec des tableaux
const nombres1 = [1, 2, 3];
const nombres2 = [4, 5, 6];

// Concaténation
const tousLesNombres = [...nombres1, ...nombres2];
console.log(tousLesNombres); // [1, 2, 3, 4, 5, 6]

// Copie d'un tableau
const copieNombres = [...nombres1];

// Avec des objets (ES2018+)
const personne = { nom: "Dupont", age: 30 };
const employe = { ...personne, poste: "Développeur", salaire: 45000 };
console.log(employe); // { nom: "Dupont", age: 30, poste: "Développeur", salaire: 45000 }

// Surcharge de propriétés
const personneModifiee = { ...personne, age: 31 };
console.log(personneModifiee); // { nom: "Dupont", age: 31 }

// Avec des fonctions
function somme(a, b, c) {
  return a + b + c;
}

const nombres = [1, 2, 3];
console.log(somme(...nombres)); // 6

6. Default Parameters (المعاملات الافتراضية)

تتيح المعاملات الافتراضية تحديد قيم افتراضية لوسائط الدوال:

// Avant ES6
function creerProfil(nom, age, ville) {
  age = age || 30;
  ville = ville || "Paris";
  return { nom, age, ville };
}

// Avec ES6
function creerProfilES6(nom, age = 30, ville = "Paris") {
  return { nom, age, ville };
}

console.log(creerProfilES6("Alice")); // { nom: "Alice", age: 30, ville: "Paris" }
console.log(creerProfilES6("Bob", 25)); // { nom: "Bob", age: 25, ville: "Paris" }
console.log(creerProfilES6("Charlie", undefined, "Lyon")); // { nom: "Charlie", age: 30, ville: "Lyon" }

7. Rest Parameters (معاملات الباقي)

تتيح معاملات الباقي تمثيل عدد غير محدد من الوسائط على شكل مصفوفة:

// Avant ES6
function somme() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

// Avec ES6
function sommeES6(...nombres) {
  return nombres.reduce((total, nombre) => total + nombre, 0);
}

console.log(sommeES6(1, 2, 3, 4, 5)); // 15

// Combinaison avec des paramètres normaux
function afficherInfos(nom, prenom, ...details) {
  console.log(`Nom: ${nom} ${prenom}`);
  console.log(`Détails: ${details.join(", ")}`);
}

afficherInfos("Dupont", "Jean", "30 ans", "Paris", "Développeur");
// "Nom: Dupont Jean"
// "Détails: 30 ans, Paris, Développeur"

8. Classes (الأصناف)

أدخل ES6 صياغة أكثر بداهة للأصناف (classes) في البرمجة الكائنية التوجّه:

// Définition d'une classe
class Personne {
  // Constructeur
  constructor(nom, age) {
    this.nom = nom;
    this.age = age;
  }
  
  // Méthodes
  saluer() {
    return `Bonjour, je m'appelle ${this.nom} et j'ai ${this.age} ans.`;
  }
  
  // Méthodes statiques
  static creerPersonneAnonymous() {
    return new Personne("Anonyme", 0);
  }
  
  // Getters et setters
  get nomComplet() {
    return this.nom;
  }
  
  set nomComplet(valeur) {
    this.nom = valeur;
  }
}

// Héritage
class Employe extends Personne {
  constructor(nom, age, poste) {
    super(nom, age); // Appel du constructeur parent
    this.poste = poste;
  }
  
  saluer() {
    return `${super.saluer()} Je suis ${this.poste}.`;
  }
}

// Utilisation
const alice = new Personne("Alice", 30);
console.log(alice.saluer()); // "Bonjour, je m'appelle Alice et j'ai 30 ans."

const bob = new Employe("Bob", 35, "Développeur");
console.log(bob.saluer()); // "Bonjour, je m'appelle Bob et j'ai 35 ans. Je suis Développeur."

9. Modules (الوحدات)

وحّد ES6 معيار الوحدات (modules) في JavaScript:

// math.js
export const PI = 3.14159;

export function carre(x) {
  return x * x;
}

export default function somme(a, b) {
  return a + b;
}

// main.js
import somme, { PI, carre } from './math.js';

console.log(PI); // 3.14159
console.log(carre(4)); // 16
console.log(somme(2, 3)); // 5

// Import de tout
import * as math from './math.js';
console.log(math.PI); // 3.14159
console.log(math.carre(4)); // 16
console.log(math.default(2, 3)); // 5

10. Promises و Async/Await

تبسّط Promises و Async/Await التعامل مع الشيفرة غير المتزامنة:

// Promises
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { id: 1, nom: "Produit" };
      if (data) {
        resolve(data);
      } else {
        reject("Erreur lors du chargement");
      }
    }, 1000);
  });
}

fetchData()
  .then(data => {
    console.log("Données:", data);
    return data.id;
  })
  .then(id => {
    console.log("ID:", id);
  })
  .catch(error => {
    console.error("Erreur:", error);
  })
  .finally(() => {
    console.log("Opération terminée");
  });

// Promise.all
const promise1 = Promise.resolve(3);
const promise2 = new Promise(resolve => setTimeout(() => resolve("foo"), 100));

Promise.all([promise1, promise2])
  .then(results => {
    console.log(results); // [3, "foo"]
  });

// Async/Await (ES2017)
async function fetchUser() {
  try {
    const response = await fetch('https://api.exemple.com/utilisateurs/1');
    const user = await response.json();
    console.log(user);
    return user;
  } catch (error) {
    console.error("Erreur:", error);
  }
}

// Utilisation avec .then()
fetchUser().then(user => {
  console.log("Utilisateur:", user);
});

ميزات أخرى في ES6+

Object Shorthand (الصياغة المختصرة للكائنات)

const nom = "Alice";
const age = 30;

// Avant ES6
const personne1 = {
  nom: nom,
  age: age,
  saluer: function() {
    return "Bonjour !";
  }
};

// Avec ES6
const personne2 = {
  nom,
  age,
  saluer() {
    return "Bonjour !";
  }
};

Computed Property Names (أسماء الخصائص المحسوبة)

const cle = "statut";
const valeur = "actif";

const objet = {
  [cle]: valeur,
  [`utilisateur_${valeur}`]: true
};

console.log(objet); // { statut: "actif", utilisateur_actif: true }

Array Methods (دوال المصفوفات)

const nombres = [1, 2, 3, 4, 5];

// find
const premier = nombres.find(n => n > 2);
console.log(premier); // 3

// findIndex
const index = nombres.findIndex(n => n > 2);
console.log(index); // 2

// includes (ES2016)
console.log(nombres.includes(3)); // true

// Array.from
const divs = document.querySelectorAll('div');
const divsArray = Array.from(divs);

// Array.of
const arr = Array.of(1, 2, 3);
console.log(arr); // [1, 2, 3]

Object Methods (دوال الكائنات)

const source = { a: 1, b: 2 };
const cible = { c: 3 };

// Object.assign
const resultat = Object.assign(cible, source);
console.log(resultat); // { a: 1, b: 2, c: 3 }

// Object.entries (ES2017)
console.log(Object.entries(source)); // [["a", 1], ["b", 2]]

// Object.values (ES2017)
console.log(Object.values(source)); // [1, 2]

// Object.fromEntries (ES2019)
const entries = [["a", 1], ["b", 2]];
console.log(Object.fromEntries(entries)); // { a: 1, b: 2 }

Optional Chaining (التسلسل الاختياري، ES2020)

const utilisateur = {
  nom: "Alice",
  adresse: {
    ville: "Paris"
  }
};

// Avant ES2020
const ville1 = utilisateur && utilisateur.adresse && utilisateur.adresse.ville;

// Avec ES2020
const ville2 = utilisateur?.adresse?.ville;
console.log(ville2); // "Paris"

// Avec méthodes
const resultat = utilisateur.getInfo?.();

// Avec tableaux
const premier = utilisateur.amis?.[0];

Nullish Coalescing (معامل الدمج الاختياري للقيم الفارغة، ES2020)

// Avant ES2020 (problème avec 0 et "")
const valeur1 = donnee || "valeur par défaut";

// Avec ES2020
const valeur2 = donnee ?? "valeur par défaut";

// Différence
console.log(0 || "défaut"); // "défaut"
console.log(0 ?? "défaut"); // 0

console.log("" || "défaut"); // "défaut"
console.log("" ?? "défaut"); // ""

الخاتمة

لقد حسّنت ميزات JavaScript الحديثة اللغة تحسينًا كبيرًا، فجعلتها أكثر تعبيرًا وأمانًا وأمتع في الاستخدام. وقد أسهمت هذه التحسينات في صعود JavaScript لتصبح من أكثر لغات البرمجة شعبية في العالم.

للبقاء على اطلاع بأحدث الميزات، راجع مواصفات ECMAScript بانتظام، واستخدم أدوات مثل Babel للاستفادة من الميزات الجديدة حتى في المتصفحات الأقدم.