BaliseTonSite

JavaScript moderne

Les nouveaux pouvoirs du héros JavaScript (ES6+).

Imagine : tu viens de looter un nouveau set légendaire. Grâce à cette version moderne de JavaScript, tu réduis le bruit dans ton code, tu frappes plus fort avec moins de lignes, et tu évites les pièges du passé. Ton build devient plus agile, plus lisible, plus redoutable.

9.1let & const (au lieu de var)

let et const sont les nouvelles façons de déclarer des variables. Elles sont plus sûres que var, qu’on évite désormais (sauf cas très particuliers).
const : la valeur ne change jamais (comme un pouvoir permanent)
let : la valeur peut évoluer (comme un score ou une position)

const PI = 3.14; // constante
let score = 0;   // variable évolutive

9.2Fonctions fléchées

Plus rapides à écrire, parfaites pour les fonctions simples ou anonymes. Elles gardent aussi le contexte de this (utile dans certains cas).

// Version longue
function saluer(nom) {
  return "Bonjour " + nom;
}

// Version moderne
const saluer = (nom) => "Bonjour " + nom;

9.3Template literals (chaînes avec ${})

On peut écrire des chaînes de caractères plus lisibles, avec des retours à la ligne et des variables intégrées facilement :

let nom = "Alice";
let message = `Bonjour ${nom},
Bienvenue sur le site !`;

9.4Déstructuration

Tu peux extraire des valeurs d’un tableau ou d’un objet directement, sans les répéter une par une :

let [a, b] = [1, 2];

let joueur = { nom: "Léo", niveau: 10 };
let { nom, niveau } = joueur;

9.5Valeurs par défaut

Tu peux attribuer une valeur de secours à un paramètre, au cas où rien n’est transmis :

function saluer(nom = "visiteur") {
  console.log("Bonjour " + nom);
}

9.6Opérateur de propagation (...) spread

Il te permet de copier ou fusionner facilement des tableaux ou objets (très utile pour ne pas modifier l’original sans faire exprès).

let notes = [10, 15];
let toutes = [...notes, 20]; // [10, 15, 20]

let base = { a: 1 };
let copie = { ...base, b: 2 };

9.7includes(), startsWith(), endsWith()

Des méthodes modernes pour vérifier si une chaîne ou un tableau contient un élément (ou commence/finit par quelque chose) :

"javascript".includes("script"); // true
[1, 2, 3].includes(2); // true
"Hello".startsWith("H"); // true
"fichier.txt".endsWith(".txt"); // true

9.8Promesses simplifiées avec async/await

Plutôt que d’enchaîner les .then(), tu peux rendre ton code asynchrone bien plus lisible avec async et await :

async function fetchData() {
  let response = await fetch("https://api.exemple.com");
  let data = await response.json();
  console.log(data);
}

9.9Nullish coalescing (??)

Cet opérateur ?? renvoie une valeur par défaut uniquement si la première est null ou undefined.
Idéal pour éviter les "undefined" sans écraser les zéros ou chaînes vides.

let nom = null;
let affichage = nom ?? "inconnu"; // "inconnu"

9.10Optional chaining (?.)

Tu peux accéder à une propriété sans que ça plante si elle n’existe pas. JS retourne undefined au lieu d’une erreur fatale.

let utilisateur = {};
console.log(utilisateur.profil?.nom); // undefined (pas d'erreur)

9.11Bonus : astuces de maître

Quelques autres raccourcis et outils que tu peux croiser au fil du jeu. Pas obligatoires pour commencer, mais utiles à connaître quand tu montes en niveau :

  • Object.entries(obj) – transforme un objet en tableau de paires [clé, valeur]
  • Array.flat() – aplatit un tableau contenant d’autres tableaux
  • ?. et ?? – déjà vus, mais combinables avec d’autres syntaxes modernes
  • ??= – assigne une valeur uniquement si la variable est null ou undefined :
joueur.nom ??= "Inconnu";
  • ?.() – appelle une fonction seulement si elle existe :
joueur.attaquer?.();

Comme dans tout bon jeu, plus tu avances, plus tu croises de petits outils cachés. Pas besoin de tout retenir maintenant : reviens-y quand tu seras prêt à affûter ton gameplay.

Verifie tes acquis

3 questions pour valider ce chapitre

1. Que fait l'operateur spread (...) sur un tableau ?

Valide et sauvegarde ce chapitre

Ne perds pas le fil de ton apprentissage. Chaque QCM complété s'enregistre comme un checkpoint dans ton tableau de bord personnel. Crée ton profil de développeur gratuitement pour débloquer toutes les évaluations du site et suivre ta progression étape par étape.

Commencer l'aventure
Déjà membre ?Connecte-toi