JavaScript — 4 bases utiles (claires et pratiques)

1) Opérateur ternaire

Syntaxe : condition ? valeurSiVrai : valeurSiFaux
Le ternaire sert à produire une valeur selon une condition.


const age = 19;
const canVote = age >= 18 ? "✅ Yes" : "❌ No"; // "✅ Yes"


// ✅ Concis et lisible
const label = count > 0 ? `${count} items` : "Empty";

// ✅ JSX
// {isLoading ? <Spinner /> : <Button>Submit</Button>}

À éviter

  • Les ternaires imbriqués (illisibles) : préfère un if/else clair.
  • Les effets de bord dans les branches (garder des expressions simples).

// ❌ Trop dense → préfère un if/else
const label = c1 ? (c2 ? "A" : "B") : (c3 ? "C" : "D");

Par rapport à || et ??

  • a || b renvoie b si a est falsy (0, "", null, undefined, false, NaN).
  • a ?? b ne prend b que si a est null ou undefined.
  • Le ternaire est toujours explicite.

const n = 0;
n || 42   // 42  (0 est falsy)
n ?? 42   // 0   (0 n'est pas null/undefined)
n >= 1 ? "ok" : "ko" // "ko"

2) Déstructuration (destructuring)

La déstructuration sort des valeurs d’un objet/array dans des variables.
Bénéfices : code plus court, plus lisible, plus ciblé.

Objets


const favouriteFilm = {
  title: "Top Gun",
  year: 1986,
  genre: "action",
  star: "Tom Cruise",
  director: "Tony Scott"
};

// Extraction simple
const { title, year, genre, star, director } = favouriteFilm;

// Renommage + valeur par défaut
const { title: name, rating = 7.2 } = favouriteFilm;
// name -> "Top Gun", rating -> 7.2 (si 'rating' n'existe pas)

// Rest operator: le "reste" des propriétés
const { title: t, ...rest } = favouriteFilm;
// rest -> { year: 1986, genre: "action", star: "Tom Cruise", director: "Tony Scott" }


function printFilm({ title, year, director }) {
  console.log(`${title} (${year}) — ${director}`);
}
printFilm(favouriteFilm);

Tableaux


const rgb = [255, 140, 0];
const [r, g, b] = rgb;                 // 255, 140, 0
const [first, , third] = [1, 2, 3];    // sauter des éléments

// Valeurs par défaut
const [x = 10, y = 20] = [];           // x=10, y=20

// Swap sans variable temporaire
let a = 1, b2 = 2;
[a, b2] = [b2, a];                     // a=2, b2=1

// Rest
const [head, ...tail] = [1, 2, 3, 4];  // head=1, tail=[2,3,4]

3) setTimeout — exécuter plus tard (une seule fois)

But : exécuter une fonction plus tard (au minimum après le délai).
Signature : const id = setTimeout(fn, delayMs, ...args)


console.log("What is the capital of Peru?");
setTimeout(() => console.log("Lima!"), 3000);
console.log("Ready for next question?");
Pourquoi « au minimum » ?

Le callback passe par la file d'attente de l’Event Loop :
si la pile est occupée, l’exécution réelle peut être un peu plus tard que le délai indiqué.

Passer des arguments & annuler


function displayTrafficLight(light) {
  console.log(light);
}
const timerId = setTimeout(displayTrafficLight, 3000, "🟢");
displayTrafficLight("🔴"); // s'affiche tout de suite

// Pour annuler :
// clearTimeout(timerId);

Debounce (anti-mitraille clavier / scroll)

  1. Écrire un utilitaire générique
    
    function debounce(fn, wait = 300) {
      let timeout;
      return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => fn.apply(this, args), wait);
      };
    }
  2. L'utiliser sur un champ de recherche
    
    const onSearch = debounce((q) => console.log("🔎", q), 400);
    input.addEventListener("input", (e) => onSearch(e.target.value));

4) setInterval — exécuter régulièrement

But : exécuter une fonction à intervalle régulier.
Signature : const id = setInterval(fn, delayMs, ...args)


function startCountdown(device) {
  let secondsRemaining = 3;

  const shutdownTimer = setInterval(function () {
    if (secondsRemaining > 0) {
      console.log(`Your ${device} will shut down in ${secondsRemaining} seconds`);
      secondsRemaining--;
    } else {
      console.log(`Your ${device} is shutting down`);
      clearInterval(shutdownTimer);
    }
  }, 1000, device);
}
startCountdown("MacBook");
Limiter la dérive (drift)

setInterval peut dériver si le travail à exécuter est long.

Solution : un intervalle “auto-planifié” avec setTimeout calé à l’horloge.


function preciseInterval(fn, everyMs) {
let cancelled = false;
let next = performance.now();

function tick() {
  if (cancelled) return;
  const now = performance.now();
  next += everyMs;
  fn(now);
  setTimeout(tick, Math.max(0, next - performance.now()));
}

setTimeout(tick, 0);
return () => { cancelled = true; };
}

// Usage
const cancel = preciseInterval(() => {
// travail périodique
}, 1000); // toutes les secondes
// cancel() pour arrêter

À retenir

  • Ternaire : parfait pour retourner une valeur selon une condition. Évite l’imbrication.
  • Déstructuration : objets/arrays plus lisibles ; renommer, valeurs par défaut, opérateur rest.
  • setTimeout : une seule exécution, clearTimeout pour annuler ; idéal pour le debounce.
  • setInterval : exécution répétée, clearInterval pour annuler ; pour la précision, préfère une boucle setTimeout calée à l’horloge.