BaliseTonSite

JavaScript moderne

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

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)

JavaScriptjavascript
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).

JavaScriptjavascript
// 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 :

JavaScriptjavascript
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 :

JavaScriptjavascript
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 :

JavaScriptjavascript
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).

JavaScriptjavascript
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) :

JavaScriptjavascript
"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 :

JavaScriptjavascript
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.

JavaScriptjavascript
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.

JavaScriptjavascript
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 :
JavaScriptjavascript
joueur.nom ??= "Inconnu";
  • ?.() – appelle une fonction seulement si elle existe :
JavaScriptjavascript
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 terminé sauvegarde ton score. Crée ton profil gratuitement pour débloquer toutes les évaluations du site et retrouver tes résultats plus tard.

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