Aller au contenu

JavaScript — Pièges courants

JavaScript contient plusieurs subtilités qui piègent facilement, surtout dans des questions rapides. Bien les comprendre permet d’éviter des erreurs fréquentes.

Closure

Définition

Une closure est :

une fonction qui conserve l’accès à son scope (variables externes), même après la fin de son exécution

Exemple

function outer() {
  let x = 10;
  return function inner() {
    console.log(x);
  };
}

const fn = outer();
fn(); // 10

Même après l’exécution de outer, la variable x reste accessible

Piège : var

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}

Résultat :

3 3 3

Pourquoi ?

  • var a un scope global (ou fonction)
  • une seule variable partagée

Solution avec let

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}

Résultat :

0 1 2

let crée une variable différente à chaque itération

Event Loop (simplifié)

Ordre d’exécution :

  1. code synchrone
  2. microtasks (Promise)
  3. macrotasks (setTimeout)

Exemple

console.log(1);

Promise.resolve().then(() => console.log(2));

console.log(3);

Résultat :

1 3 2

this (piège classique)

const obj = {
  value: 10,
  get() {
    return this.value;
  }
};

const fn = obj.get;
console.log(fn());

Résultat :

undefined

Pourquoi ?

  • this dépend du contexte d’appel
  • ici fn() n’est plus lié à obj

Pièges fréquents

  • confusion entre var et let
  • mauvaise compréhension de this
  • ordre d’exécution async
  • closures mal comprises

Questions classiques

Q1

console.log(typeof null);

"object"

Q2

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}

3 3 3

Q3

console.log(1);
setTimeout(() => console.log(2), 0);
console.log(3);

1 3 2

Q4

const obj = { x: 5, get() { return this.x; } };
const fn = obj.get;
console.log(fn());

undefined

À retenir

  • closure → garde accès au scope
  • let ≠ var
  • l’event loop définit l’ordre d’exécution
  • this dépend du contexte

🧾 En résumé

  • closures permettent de capturer des variables
  • var peut créer des bugs inattendus
  • async JS suit une logique précise (event loop)
  • this change selon l’appel

Ces pièges sont simples, mais très fréquents en pratique et en tests.