Maîtriser JavaScript ES6+ : Les Fonctionnalités Indispensables

// `const` pour les valeurs qui ne changent jamais (la majorité de vos variables)
const API_URL = "https://api.example.com";
const users = []; // Le tableau lui-même est constant, mais son contenu peut évoluer
users.push("Alice"); // ✅ C'est permis

// `let` pour les valeurs susceptibles de changer
let count = 0;
count++;

// ❌ N'utilisez jamais `var` — sa portée est fonctionnelle, non par bloc

// Fonction traditionnelle
function add(a, b) { return a + b; }

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

// Un seul paramètre — les parenthèses sont facultatives
const double = n => n * 2;

// Sur plusieurs lignes — nécessite des accolades et un `return` explicite
const processUser = (user) => {
  const name = user.name.trim();
  return { ...user, name };
};

// Idéales pour les fonctions de rappel (callbacks)
const evens = numbers.filter(n => n % 2 === 0);
const names = users.map(u => u.name);

// Déstructuration d'objet
const { name, email, role = "viewer" } = user;

// Renommer des variables lors de la déstructuration
const { name: userName, email: userEmail } = user;

// Déstructuration imbriquée
const { address: { city, country } } = user;

// Déstructuration de tableau
const [first, second, ...rest] = [1, 2, 3, 4, 5];
// first = 1, second = 2, rest = [3, 4, 5]

// Échanger des variables facilement
let a = 1, b = 2;
[a, b] = [b, a]; // a = 2, b = 1

// Paramètres de fonction déstructurés
function greet({ name, age }) {
  return `Salut ${name}, tu as ${age} ans`;
}

// Spread (décomposition) — pour étendre tableaux/objets
const merged = [...arr1, ...arr2]; // Fusionne deux tableaux
const copy = { ...originalObj, name: "Nouveau Nom" }; // Crée une copie et surcharge une propriété

// Rest (regroupement) — pour collecter les arguments restants
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}
sum(1, 2, 3, 4); // Retourne 10

const name = "Alice";
const greeting = `Bonjour, ${name}!`; // Interpolation de variables

// Chaînes de caractères multi-lignes sans échappement
const html = `
  <div class="card">
    <h2>${title}</h2>
    <p>${description}</p>
  </div>
`;

// Gabarits balisés (Tagged templates) pour une logique de traitement avancée
function highlight(strings, ...values) {
  return strings.reduce((result, str, i) =>
    `${result}${str}<mark>${values[i] || ''}</mark>`, '');
}

// Chaînage optionnel (?. ) — Accès sécurisé aux propriétés imbriquées
const city = user?.address?.city;          // undefined si une propriété est null/undefined
const first = users?.[0]?.name;            // Accès aux éléments de tableau
const result = user?.getProfile?.();       // Appel de méthode

// Coalescence des nuls (?? ) — Valeur par défaut UNIQUEMENT pour null ou undefined
const port = config.port ?? 3000;          // Utilise 3000 seulement si `port` est null/undefined
const name = user.name ?? "Anonyme";

// Attention à la différence avec || (qui considère 0, "", false comme "falsy")
const count = data.count || 10;   // ⚠️ Si count est 0, cela retourne 10 !
const count = data.count ?? 10;   // ✅ Retourne 10 seulement si count est null/undefined

const name = "Alice";
const age = 30;

// Syntaxe abrégée des propriétés (Property shorthand)
const user = { name, age }; // Équivalent à { name: name, age: age }

// Syntaxe abrégée des méthodes (Method shorthand)
const api = {
  async getUser(id) { /* ... */ },
  async createUser(data) { /* ... */ },
};

// Noms de propriétés calculés (Computed property names)
const field = "email";
const obj = { [field]: "[email protected]" };
// { email: "[email protected]" }

// Exports nommés
export const API_URL = "https://api.example.com";
export function fetchUser(id) { /* ... */ }

// Export par défaut
export default class UserService { /* ... */ }

// Imports nommés
import { API_URL, fetchUser } from './api.js';

// Import par défaut
import UserService from './UserService.js';

// Renommer à l'importation
import { fetchUser as getUser } from './api.js';

// Import dynamique (pour le chargement paresseux)
const { Chart } = await import('./chart.js');