QCM – Questions pièges
Programmer en JavaScript – Examen de Fin de Module (EFM)
OFPPT – Formatrice : Mme Hafsa BENALLAL
Ces questions ciblent des erreurs et confusions fréquentes (coercition de types, portée des
variables, références vs valeurs, DOM, événements). La réponse correcte est indiquée en vert,
avec une courte justification du piège.
Nom et prénom : ……………………………………………
Groupe : ……………………………………………
Partie 1 — Variables, types et opérateurs (var/let/const, ==, ===, NaN,
typeof)
Question 1 : Que renvoie l'expression : typeof NaN ?
A. "NaN"
B. "number" ✔ (réponse correcte)
C. "undefined"
D. "object"
Pourquoi c'est un piège : NaN signifie « Not a Number », mais il appartient quand même au type
number en JavaScript.
Question 2 : Que renvoie l'expression : NaN === NaN ?
E. true
F. false ✔ (réponse correcte)
G. undefined
H. Une erreur est levée
Pourquoi c'est un piège : NaN n'est jamais égal à lui-même, même avec ===. Pour le tester, on utilise
[Link]().
Question 3 : Que vaut le résultat de : "" == 0 ?
I. true ✔ (réponse correcte)
J. false
K. NaN
L. Une erreur de syntaxe
Pourquoi c'est un piège : Avec l'opérateur ==, les deux opérandes sont convertis avant comparaison :
une chaîne vide est convertie en 0. Avec === le résultat aurait été false.
Question 4 : Que se passe-t-il avec le code suivant ? [Link](x); let x = 5;
M. Cela affiche undefined puis 5
N. Cela affiche 5 directement
O. Une ReferenceError est levée (zone morte temporelle / TDZ) ✔ (réponse correcte)
P. Cela affiche null
Pourquoi c'est un piège : Contrairement à var (hissée et initialisée à undefined), let est hissée mais
reste dans la « zone morte temporelle » jusqu'à sa déclaration : y accéder avant lève une erreur.
Question 5 : Une variable déclarée avec const objet = { nom: "Ali" }; peut-elle être modifiée
ensuite ?
Q. Non, const rend l'objet totalement immuable, toute modification est impossible
R. Oui : on peut modifier les propriétés de l'objet ([Link] = "Sara";), seule la
réaffectation de la variable elle-même est interdite ✔ (réponse correcte)
S. Oui, on peut même réaffecter objet = {} sans problème
T. const ne peut être utilisé que pour des objets, jamais pour des primitives
Pourquoi c'est un piège : const empêche de réassigner la variable (objet = autreChose), mais
n'empêche pas de modifier le contenu interne d'un objet ou d'un tableau.
Question 6 : Quelle est la valeur de typeof []; (un tableau vide) ?
U. "array"
V. "object" ✔ (réponse correcte)
W. "undefined"
X. "list"
Pourquoi c'est un piège : Il n'existe pas de type "array" distinct en JavaScript : les tableaux sont des
objets. On utilise [Link]() pour les détecter précisément.
Partie 2 — Boucles et fonctions (closures, scope, callbacks)
Question 7 : Que se passe-t-il avec ce code ? for (var i = 0; i < 3; i++) { setTimeout(() =>
[Link](i), 0); }
Y. Affiche 0, 1, 2
Z. Affiche 3, 3, 3 (var n'a pas de portée de bloc, i vaut 3 à la fin de la boucle pour les
3 callbacks) ✔ (réponse correcte)
[Link] 0, 0, 0
[Link] une erreur
Pourquoi c'est un piège : var n'a pas de portée de bloc : une seule variable i est partagée par toutes les
itérations. Avec let, le résultat serait 0, 1, 2 car chaque itération crée sa propre liaison.
Question 8 : Quel mot-clé doit-on utiliser à la place de var dans la boucle précédente pour
obtenir l'affichage 0, 1, 2 ?
CC. const
DD. let ✔ (réponse correcte)
[Link]
FF. Aucun changement n'est possible, il faut une fonction supplémentaire
Pourquoi c'est un piège : let crée une nouvelle liaison de variable à chaque itération de la boucle
(portée de bloc), ce qui corrige le piège du "var" dans les callbacks asynchrones.
Question 9 : Dans une fonction fléchée définie comme méthode d'un objet, à quoi correspond
this ?
GG. À l'objet sur lequel la méthode est appelée, comme une fonction classique
HH. this n'est PAS lié à l'objet : une fonction fléchée hérite du this du contexte
englobant (souvent window/undefined) ✔ (réponse correcte)
II. this vaut toujours undefined
JJ. Cela provoque systématiquement une erreur de syntaxe
Pourquoi c'est un piège : Contrairement aux fonctions classiques, les fonctions fléchées ne possèdent
pas leur propre this : elles utilisent celui du contexte lexical parent. C'est un piège fréquent quand on les
utilise comme méthodes d'objet.
Question 10 : Que renvoie une fonction JavaScript qui ne contient aucune instruction return ?
[Link] erreur de compilation
LL. null
MM. undefined ✔ (réponse correcte)
NN. 0
Pourquoi c'est un piège : En l'absence de return explicite, une fonction renvoie automatiquement
undefined, et non null ni une erreur.
Question 11 : Quel est l'ordre d'affichage du code suivant ? [Link]("A"); setTimeout(() =>
[Link]("B"), 0); [Link]("C");
OO. A, B, C
PP.A, C, B ✔ (réponse correcte)
QQ. B, A, C
RR. C, B, A
Pourquoi c'est un piège : Même avec un délai de 0 ms, setTimeout place son callback dans la file
d'attente asynchrone : le code synchrone (A puis C) s'exécute toujours en premier.
Partie 3 — Objets, tableaux et méthodes natives
Question 12 : Que renvoie l'expression : [1, 2, 3] === [1, 2, 3] ?
[Link], car les deux tableaux ont le même contenu
TT. false, car === compare la référence mémoire des objets, pas leur contenu ✔
(réponse correcte)
UU. Une erreur, on ne peut pas comparer des tableaux
[Link] uniquement si les tableaux contiennent des nombres
Pourquoi c'est un piège : Les tableaux (et objets) sont comparés par référence, pas par valeur. Deux
tableaux distincts ayant le même contenu ne sont jamais === entre eux.
Question 13 : Quelle est la différence entre [Link](1, 3) et [Link](1, 3) ?
WW. Elles sont strictement identiques
[Link]() retourne une copie partielle SANS modifier le tableau d'origine ; splice()
modifie le tableau d'origine en y supprimant/insérant des éléments ✔ (réponse
correcte)
[Link]() ne fonctionne que sur des chaînes de caractères
ZZ. slice() modifie toujours le tableau original
Pourquoi c'est un piège : slice() est non destructive (lecture seule), alors que splice() est destructive et
modifie directement le tableau original. C'est une confusion très fréquente.
Question 14 : Que vaut [Link]({}).length pour un objet vide ?
AAA. undefined
BBB. null
CCC. 0 ✔ (réponse correcte)
DDD. Une erreur
Pourquoi c'est un piège : [Link]() renvoie un tableau (vide s'il n'y a aucune propriété), et la
propriété length d'un tableau vide vaut toujours 0, jamais undefined.
Question 15 : Que renvoie [Link]({ a: undefined, b: function(){}, c: 5 }) ?
EEE. '{"a":undefined,"b":function(){},"c":5}'
FFF. '{"c":5}' (les propriétés undefined et les fonctions sont ignorées) ✔
(réponse correcte)
GGG. Une erreur est levée car undefined n'est pas sérialisable
HHH. '{}' car aucune propriété n'est valide
Pourquoi c'est un piège : [Link]() ignore silencieusement les propriétés dont la valeur est
undefined ou une fonction : elles disparaissent du résultat, sans erreur.
Partie 4 — Le DOM et les événements
Question 16 : Quelle différence essentielle existe entre .innerHTML et .textContent lorsqu'on
insère du contenu venant d'un utilisateur ?
III. Aucune différence, les deux insèrent du texte brut
JJJ. innerHTML interprète le code HTML inséré (risque d'injection / XSS),
textContent insère toujours du texte brut sans interprétation ✔ (réponse correcte)
KKK. textContent est plus lent que innerHTML dans tous les cas
LLL. innerHTML ne fonctionne que dans les anciens navigateurs
Pourquoi c'est un piège : Utiliser innerHTML avec du contenu non filtré venant d'un utilisateur peut
exécuter du code HTML/JS malveillant (faille XSS) ; textContent insère toujours le texte tel quel, sans
interprétation.
Question 17 : [Link]("item") renvoie :
MMM. Un seul élément, le premier trouvé
NNN. Un tableau JavaScript classique
OOO. Une HTMLCollection "live" qui se met à jour automatiquement si le DOM
change ✔ (réponse correcte)
PPP. null si plusieurs éléments correspondent
Pourquoi c'est un piège : Contrairement à querySelectorAll() (NodeList statique),
getElementsByClassName() renvoie une collection dynamique qui reflète en temps réel les changements
du DOM — un piège classique en boucle.
Question 18 : Si deux gestionnaires d'événements sont attachés sur un bouton et son
conteneur parent ("click"), dans quel ordre s'exécutent-ils par défaut ?
QQQ. D'abord le parent, puis l'enfant (capture)
RRR. D'abord l'enfant cliqué, puis le parent (propagation/bubbling), sauf
utilisation de la phase de capture ✔ (réponse correcte)
SSS. Seul le gestionnaire du parent s'exécute
TTT. L'ordre est aléatoire
Pourquoi c'est un piège : Par défaut, addEventListener écoute en phase de "bubbling" : l'événement se
déclenche d'abord sur l'élément cliqué, puis remonte vers ses ancêtres, sauf si on passe { capture: true }.
Question 19 : Quelle méthode empêche la propagation d'un événement vers les éléments
parents ?
UUU. [Link]()
VVV. [Link]() ✔ (réponse correcte)
WWW. [Link]()
XXX. [Link]()
Pourquoi c'est un piège : Un piège fréquent : preventDefault() annule le comportement par défaut du
navigateur (ex. soumission d'un formulaire) mais NE bloque PAS la propagation de l'événement ; c'est
stopPropagation() qui le fait.