Entretien JavaScript Junior — Closures, DOM et Async

Q: Que retourne typeof null ?

Bonne réponse : "object". C'est un bug historique de JavaScript depuis la version 1.0, conservé pour compatibilité. typeof null retourne 'object' bien que null soit une valeur primitive. Pour tester si une valeur est nulle, utilisez toujours value === null.

Q: Qu'est-ce que le hoisting en JavaScript ?

Bonne réponse : Le mécanisme qui déplace les déclarations en haut de leur portée à l'exécution. Le hoisting (élévation) signifie que les déclarations de variables et fonctions sont traitées avant l'exécution. var x est hoistée et initialisée à undefined. Les function déclarées sont hoistées entièrement. let et const sont hoistées mais en Temporal Dead Zone (TDZ) : y accéder avant leur déclaration lève un ReferenceError.

Q: Quelle méthode ajoute un élément à la fin d'un tableau ?

Bonne réponse : arr.push(el). push() ajoute des éléments à la fin et retourne la nouvelle longueur. Son opposé est pop() (retire le dernier). Pour le début : unshift() ajoute, shift() retire. append() et insert() n'existent pas nativement en JS vanilla.

Q: Résultat de [1, 2, 3].map(x => x * 2) ?

Bonne réponse : [2, 4, 6]. Array.map() crée un nouveau tableau en appliquant une fonction à chaque élément. L'original n'est pas modifié : 1→2, 2→4, 3→6. Contrairement à forEach() qui ne retourne rien, map() retourne toujours un tableau de même longueur.

Q: Quelle est la différence entre null et undefined ?

Bonne réponse : null = absence volontaire de valeur ; undefined = valeur non assignée. undefined est assigné automatiquement par JS (variable non initialisée, paramètre absent, propriété inexistante). null est une absence intentionnelle assignée par le développeur. null == undefined → true, null === undefined → false.

Q: Comment vérifier si une variable arr est un tableau ?

Bonne réponse : Array.isArray(arr). Array.isArray() est la méthode recommandée. typeof [] retourne 'object' (pas 'array'), donc typeof arr === 'array' échoue. arr instanceof Array peut échouer dans un contexte multi-fenêtres (iframes). arr.isArray() n'existe pas.

Q: Que fait document.getElementById('monId') ?

Bonne réponse : Retourne l'élément HTML ayant l'id "monId". getElementById() retourne l'élément DOM correspondant à l'id, ou null si non trouvé. Les ids doivent être uniques dans une page. Alternative moderne : querySelector('#monId') (plus flexible, accepte tout sélecteur CSS).

Q: Qu'est-ce qu'une closure (fermeture) en JavaScript ?

Bonne réponse : Une fonction qui mémorise les variables de sa portée parente. Une closure est une fonction interne qui conserve l'accès aux variables de sa portée parente, même après que celle-ci a terminé. Exemple :function compteur() { let n = 0; return () => ++n; } const inc = compteur(); inc(); // 1 inc(); // 2La variable n est 'fermée' dans la fonction retournée.

Q: Résultat de [1, 2, 3].filter(x => x > 1) ?

Bonne réponse : [2, 3]. Array.filter() crée un nouveau tableau avec seulement les éléments pour lesquels la fonction retourne true. Ici, 2 et 3 sont > 1 → [2, 3]. L'original n'est pas modifié. Différence avec map() : filter sélectionne, map transforme.

Q: Comment créer une copie superficielle d'un tableau ?

Bonne réponse : let copy = [...arr]. Le spread operator [...arr] crée une copie superficielle (shallow copy). let copy = arr copie la référence (même tableau en mémoire !). Alternatives : arr.slice(), Array.from(arr). Attention : pour des tableaux d'objets imbriqués, il faut une copie profonde (deep copy).

Javascript Junior Quiz-Javascript-Junior Javascript-Closures Javascript-Hoisting Javascript-Dom Async-Await Promises Questions-Entretien-Javascript Qcm-Javascript-Junior Tableaux-Js Revision-Javascript Front-End Es6

Junior 🔀 Mixte 20 questions ⏱ 15 min

📝

Entretien JavaScript Junior — Closures, DOM et Async

20 questions JavaScript niveau junior : closures, hoisting, manipulation du DOM, promesses, async/await et méthodes avancées des tableaux (map, filter, reduce). Préparez un entretien Junior.

20 questions ⏱ ~15 min Niveau Junior

Publié/Développé par Mezgani Said

Développeur web full‑stack et formateur spécialisé en Angular, TypeScript et Node.js, il partage sur AngularForAll des ressources complètes pour les développeurs : tutoriels pratiques, guides pas‑à‑pas, outils gratuits, exercices, QCM techniques et retours d’expérience issus de projets réels (SaaS, micro‑frontends, architectures modulaires, applications d’entreprise).
Le site couvre l’ensemble de l’écosystème web : front‑end, intégration HTML/CSS, Composants réutilisables, SEO, back‑end, cloud, IA, CLI, productivité, bien‑être, outils web et métiers du digital.
Un espace pensé pour générer, apprendre, progresser et développer des projets modernes avec des bonnes pratiques professionnelles.

Banque de révision : les 30 questions corrigées

Voici l'intégralité des 30 questions de « Entretien JavaScript Junior — Closures, DOM et Async », chacune avec sa bonne réponse et son explication. Le quiz interactif ci-dessus en tire une sélection aléatoire à chaque tentative — utilisez cette liste complète pour réviser.

"null"
"undefined"
"object" (bonne réponse)
"boolean"

Explication : C'est un bug historique de JavaScript depuis la version 1.0, conservé pour compatibilité. typeof null retourne 'object' bien que null soit une valeur primitive. Pour tester si une valeur est nulle, utilisez toujours value === null.

Une méthode pour copier des objets en profondeur
Le mécanisme qui déplace les déclarations en haut de leur portée à l'exécution (bonne réponse)
Une technique d'optimisation des boucles du moteur JS
La conversion automatique de types dans les expressions

Explication : Le hoisting (élévation) signifie que les déclarations de variables et fonctions sont traitées avant l'exécution. var x est hoistée et initialisée à undefined. Les function déclarées sont hoistées entièrement. let et const sont hoistées mais en Temporal Dead Zone (TDZ) : y accéder avant leur déclaration lève un ReferenceError.

Exemple clé d'entretien : console.log(x); var x = 5; → affiche undefined (pas d'erreur). Avec let : ReferenceError. Explique que seule la déclaration est hoistée, pas l'initialisation.

arr.unshift(el)
arr.append(el)
arr.insert(el)
arr.push(el) (bonne réponse)

Explication : push() ajoute des éléments à la fin et retourne la nouvelle longueur. Son opposé est pop() (retire le dernier). Pour le début : unshift() ajoute, shift() retire. append() et insert() n'existent pas nativement en JS vanilla.

[1, 2, 3]
[2, 4, 6] (bonne réponse)
[0, 2, 4]
6

Explication : Array.map() crée un nouveau tableau en appliquant une fonction à chaque élément. L'original n'est pas modifié : 1→2, 2→4, 3→6. Contrairement à forEach() qui ne retourne rien, map() retourne toujours un tableau de même longueur.

Ce sont des synonymes, interchangeables en pratique
null = absence volontaire de valeur ; undefined = valeur non assignée (bonne réponse)
undefined est un objet, null est une primitive
null vaut 0 en arithmétique, undefined vaut NaN

Explication : undefined est assigné automatiquement par JS (variable non initialisée, paramètre absent, propriété inexistante). null est une absence intentionnelle assignée par le développeur. null == undefined → true, null === undefined → false.

Bonne pratique : utilise null pour signaler 'pas de valeur' dans ton code. Laisse JS assigner undefined automatiquement, ne l'assigne jamais toi-même explicitement.

typeof arr === "array"
arr instanceof Object
Array.isArray(arr) (bonne réponse)
arr.isArray()

Explication : Array.isArray() est la méthode recommandée. typeof [] retourne 'object' (pas 'array'), donc typeof arr === 'array' échoue. arr instanceof Array peut échouer dans un contexte multi-fenêtres (iframes). arr.isArray() n'existe pas.

Crée un nouvel élément HTML avec l'id "monId"
Retourne l'élément HTML ayant l'id "monId" (bonne réponse)
Modifie le style de l'élément avec l'id "monId"
Supprime l'élément ayant l'id "monId"

Explication : getElementById() retourne l'élément DOM correspondant à l'id, ou null si non trouvé. Les ids doivent être uniques dans une page. Alternative moderne : querySelector('#monId') (plus flexible, accepte tout sélecteur CSS).

Une fonction qui ne peut pas être appelée depuis l'extérieur
Une boucle dont la condition de sortie est fermée
Une fonction qui mémorise les variables de sa portée parente (bonne réponse)
Une méthode pour terminer proprement une connexion réseau

Explication : Une closure est une fonction interne qui conserve l'accès aux variables de sa portée parente, même après que celle-ci a terminé. Exemple :function compteur() { let n = 0; return () => ++n; } const inc = compteur(); inc(); // 1 inc(); // 2La variable n est 'fermée' dans la fonction retournée.

Cas d'usage courants : données privées (module pattern), mémoïsation, event handlers avec contexte. Donne toujours un exemple concret d'un compteur ou d'un accumulateur.

[1]
[3]
[1, 2]
[2, 3] (bonne réponse)

Explication : Array.filter() crée un nouveau tableau avec seulement les éléments pour lesquels la fonction retourne true. Ici, 2 et 3 sont > 1 → [2, 3]. L'original n'est pas modifié. Différence avec map() : filter sélectionne, map transforme.

let copy = arr
let copy = [...arr] (bonne réponse)
let copy = arr.copy()
let copy = arr.clone()

Explication : Le spread operator [...arr] crée une copie superficielle (shallow copy). let copy = arr copie la référence (même tableau en mémoire !). Alternatives : arr.slice(), Array.from(arr). Attention : pour des tableaux d'objets imbriqués, il faut une copie profonde (deep copy).

Toujours window, sans aucune exception
La classe à laquelle appartient la méthode
Le contexte d'exécution, variable selon la façon dont la fonction est appelée (bonne réponse)
Une référence circulaire vers la fonction elle-même

Explication : this est déterminé au moment de l'appel. Méthode d'objet : this = l'objet. Fonction seule (mode non-strict) : this = window. Mode strict : undefined. Arrow function : this est lexical (hérite du parent). Avec call()/bind()/apply() : this est explicité.

Piège classique : const fn = obj.methode; fn(); → this = window (perte du contexte). Solution : fn.bind(obj) ou arrow function. Mentionne ce cas en entretien.

La chaîne JSON inchangée
Un tableau JavaScript
Un objet JavaScript { nom: 'Alice' } (bonne réponse)
Une erreur de syntaxe

Explication : JSON.parse() désérialise une chaîne JSON en valeur JavaScript (objet, tableau, nombre...). Son inverse est JSON.stringify(). Attention : JSON requiert des guillemets doubles pour les clés et chaînes. Une syntaxe invalide lève un SyntaxError.

element.on("click", fn)
element.click(fn)
element.addEventListener("click", fn) (bonne réponse)
element.attachListener("click", fn)

Explication : addEventListener() est la méthode standard. Elle permet plusieurs listeners sur le même événement, contrairement à onclick = fn qui écrase le précédent. Pour supprimer : removeEventListener() (la fonction doit être nommée, pas anonyme).

Du code qui s'exécute dans un thread séparé du navigateur
Du code permettant d'effectuer des opérations sans bloquer le fil principal (bonne réponse)
Une technique réservée exclusivement aux appels API fetch
Du code qui s'exécute plus rapidement que le code synchrone

Explication : JavaScript est single-threaded (un seul fil). L'asynchrone permet de lancer des opérations longues (réseau, timers) sans bloquer l'UI. Le moteur utilise l'event loop : tâches async → callback queue → exécutées quand le call stack est vide. Mécanismes : callbacks → Promises → async/await.

Ordre d'exécution : code synchrone → microtasks (Promises) → macrotasks (setTimeout). Exemple : setTimeout(fn, 0) s'exécute APRÈS les Promises déjà résolues.

['hello']
['h', 'e', 'l', 'l', 'o'] (bonne réponse)
[]
'h,e,l,l,o'

Explication : split('') avec séparateur vide découpe la chaîne caractère par caractère. Autres usages : split(' ') par espaces, split(',') par virgules. Pour réassembler : arr.join('') (inverse de split).

Elle réduit la taille du tableau à 1 élément
Elle accumule les valeurs du tableau en une seule valeur via une fonction (bonne réponse)
Elle supprime les doublons du tableau
Elle trie le tableau du plus grand au plus petit

Explication : reduce(callback, valeurInitiale) parcourt le tableau et accumule un résultat. Exemple : [1, 2, 3].reduce((acc, val) => acc + val, 0) → 6. Très puissant pour sommer, combiner ou transformer des tableaux en objets.

Cas d'usage courant : arr.reduce((acc, el) => ({ ...acc, [el.id]: el }), {}) pour transformer un tableau en objet indexé.

Un objet synchrone qui retourne une valeur immédiatement
Un objet représentant la complétion ou l'échec éventuel d'une opération asynchrone (bonne réponse)
Une fonction spéciale qui s'exécute en arrière-plan dans un thread séparé
Un raccourci pour les fonctions fléchées asynchrones

Explication : Une Promise a 3 états : pending (en attente), fulfilled (résolue) ou rejected (rejetée). On chaîne avec .then() pour le succès et .catch() pour les erreurs. C'est la base d'async/await.

Exemple simple : fetch('/api').then(res => res.json()).then(data => console.log(data)).catch(err => console.error(err));

Des guillemets simples : 'Bonjour ${nom}'
Des guillemets doubles : "Bonjour ${nom}"
Des backticks : `Bonjour ${nom}` (bonne réponse)
Des crochets : [Bonjour ${nom}]

Explication : Les template literals utilisent les backticks (`) et permettent l'interpolation avec ${expression}. Ils supportent aussi les chaînes multi-lignes sans \n. Introduits en ES6.

Supprimer des propriétés d'un objet
Extraire des propriétés d'un objet dans des variables locales (bonne réponse)
Fusionner deux objets en un seul
Vérifier si un objet contient une propriété donnée

Explication : La déstructuration permet d'extraire des valeurs en une ligne : const { nom, age } = personne; au lieu de const nom = personne.nom; const age = personne.age;. On peut aussi renommer : const { nom: prenom } = obj;.

La déstructuration fonctionne aussi dans les paramètres de fonction : function afficher({ nom, age }) { ... }.

Supprime l'ecouteur d'evenement de l'element
Empeche le comportement par defaut du navigateur pour cet evenement (bonne réponse)
Propage l'evenement vers les elements parents
Recharge la page courante

Explication : preventDefault() annule le comportement natif du navigateur. Exemples : empecher un formulaire de soumettre (submit), empecher un lien de naviguer (click sur <a>), bloquer le menu contextuel. A distinguer de stopPropagation() qui stoppe la propagation vers les parents.

Combine avec stopPropagation() : e.preventDefault(); e.stopPropagation(); - bloque a la fois le comportement natif et la remontee dans le DOM.

"number" (bonne réponse)
"integer"
"float"
"numeric"

Explication : En JavaScript, typeof retourne "number" pour tous les nombres, qu’ils soient entiers ou décimaux. Il n'existe pas de type "integer" ou "float" séparé en JS.

10
"55" (bonne réponse)
NaN
Error

Explication : L'opérateur + favorise la concaténation dès qu'une chaîne est présente. 5 + "5" → "5" + "5" → "55".

Pour additionner des nombres dans ce cas : 5 + Number("5") ou 5 + +"5".

// commentaire //
/* commentaire */ (bonne réponse)
# commentaire #

Explication : Les commentaires multi-lignes utilisent /* pour ouvrir et */ pour fermer. // est pour une seule ligne.

for (let i = 0; i < arr.length; i++)
for (let x of array)
for (let key in object) (bonne réponse)
while (condition)

Explication : for...in parcourt les propriétés énumérables d'un objet. Pour les tableaux, on préfère for...of ou forEach().

Attention : for...in parcourt aussi les propriétés héritées. Utilise hasOwnProperty() pour filtrer.

Rien, c'est une erreur
Supprime tous les éléments du tableau (bonne réponse)
Crée un nouveau tableau vide
Retourne la longueur du tableau

Explication : Modifier length à 0 est un moyen rapide et efficace de vider complètement un tableau. Tous les éléments sont supprimés.

Alternatives pour vider un tableau : arr = [] (crée un nouveau tableau) ou arr.splice(0, arr.length).

"54" (bonne réponse)
"234"
9
"24"

Explication : Les opérations sont évaluées de gauche à droite. 2 + 3 = 5 (nombres), puis 5 + "4" = "54" (concaténation car le second est une chaîne).

Aucune différence
const ne peut pas être réassignée, let peut (bonne réponse)
let est plus rapide que const
const ne fonctionne qu'avec les nombres

Explication : const empêche la réassignation de la variable. let autorise la réassignation. Attention : pour un objet déclaré avec const, on peut modifier ses propriétés.

Règle simple : utilise const par défaut, let uniquement si tu as besoin de réassigner.