JavaScript moderno: las funcionalidades de ES6+

Desde 2015, JavaScript ha experimentado una evolución importante con la introducción de ECMAScript 2015 (ES6) y las versiones posteriores. Estas actualizaciones han aportado numerosas funcionalidades que hacen el código más limpio, más expresivo y más potente.

Las principales funcionalidades de ES6+

1. Let y Const

Antes de ES6, las variables se declaraban con var, que presentaba problemas de ámbito. ES6 introdujo let y 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 (funciones flecha)

Las funciones flecha ofrecen una sintaxis más concisa y mantienen el contexto de 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 (plantillas literales)

Las template literals permiten integrar expresiones en las cadenas de caracteres:

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 (desestructuración)

La desestructuración permite extraer valores de arrays y objetos:

// 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 (operador de propagación)

El operador spread (...) permite expandir arrays y objetos:

// 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 (parámetros por defecto)

Los parámetros por defecto permiten especificar valores por defecto para los argumentos de una función:

// 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 (parámetros rest)

Los parámetros rest permiten representar un número indefinido de argumentos en forma de array:

// 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. Clases

ES6 introdujo una sintaxis de clases más intuitiva para la programación orientada a objetos:

// 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. Módulos

ES6 estandarizó los módulos de 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 y Async/Await

Las Promises y Async/Await simplifican la gestión del código asíncrono:

// 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);
});

Otras funcionalidades de ES6+

Object Shorthand (atajo de objeto)

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 (nombres de propiedades calculados)

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

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

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

Array Methods (métodos de array)

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 (métodos de objeto)

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 (encadenamiento opcional, 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 (operador de coalescencia nula, 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"); // ""

Conclusión

Las funcionalidades modernas de JavaScript han mejorado considerablemente el lenguaje, haciéndolo más expresivo, más seguro y más agradable de usar. Estas mejoras han contribuido al auge de JavaScript como uno de los lenguajes más populares del mundo.

Para mantenerte al día con las últimas funcionalidades, consulta con regularidad las especificaciones de ECMAScript y utiliza herramientas como Babel para aprovechar las nuevas funcionalidades incluso en los navegadores más antiguos.