Entretien Vanilla JS Junior — Fetch, ES6 et LocalStorage

Q: Quelle est la syntaxe correcte pour faire une requete GET avec Fetch et recuperer du JSON ?

Bonne réponse : fetch(url).then(r => r.json()). fetch(url) retourne une promesse avec la reponse HTTP. .then(r => r.json()) decode le corps JSON asynchronement. La reponse brute n'est pas directement le JSON, il faut appeler r.json() ou r.text().

Q: Que fait Array.prototype.map() ?

Bonne réponse : Cree un NOUVEAU tableau avec les resultats de la fonction appliquee a chaque element. map() cree un nouveau tableau sans modifier l'original. La longueur est preservee. Ex: [1,2,3].map(x => x*2) retourne [2,4,6]. C'est un fondamental de la programmation fonctionnelle en JS.

Q: Comment sauvegarder une valeur dans le localStorage ?

Bonne réponse : localStorage.setItem("key", "value"). setItem("key", "value") est la methode officielle du Web Storage API. localStorage ne peut stocker que des chaines. Pour des objets, serialiser avec JSON.stringify() avant setItem.

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

Bonne réponse : Une fonction qui conserve l'acces aux variables de sa portee lexicale exterieure. Une closure est formee quand une fonction se souvient des variables de sa portee de creation, meme apres que cette portee ait disparu. Utile pour les compteurs, modules ou l'encapsulation.

Q: Qu'est-ce que la delegation d'evenements ?

Bonne réponse : Attacher l'ecouteur au parent pour gerer les evenements des enfants y compris dynamiques. La delegation tire profit du bubbling : on attache l'ecouteur au parent, et on filtre avec event.target. Fonctionne avec les elements ajoutes dynamiquement, reduit le nombre d'ecouteurs.

Q: Quelle syntaxe utilise les template literals pour interpoler une variable ?

Bonne réponse : `Bonjour ${name}`. Les template literals utilisent des backticks (`) et permettent l'interpolation avec ${expression}. Ils supportent aussi les chaines multi-lignes et les expressions complexes.

Q: Que retourne Array.prototype.filter() ?

Bonne réponse : Un nouveau tableau avec SEULEMENT les elements qui passent le test. filter() retourne un nouveau tableau (potentiellement plus court) avec les elements pour lesquels la callback retourne true. Ex: [1,2,3,4].filter(x => x > 2) retourne [3,4].

Q: Comment destructurer un objet pour extraire ses proprietes ?

Bonne réponse : let {a, b} = obj. La destructuration d'objet utilise {}. La destructuration de tableau utilise []. On peut renommer : let {a: monA} = obj. Valeurs par defaut : let {a = 5} = obj.

Q: Que fait Array.prototype.reduce(fn, initialValue) ?

Bonne réponse : Accumule les valeurs du tableau en UNE SEULE valeur via une fonction accumulatrice. reduce(fn, init) appelle fn(accumulateur, valeurCourante) pour chaque element. Ex: [1,2,3].reduce((acc, val) => acc + val, 0) = 6. Peut produire n'importe quel type : nombre, objet, tableau.

Q: Comment creer un evenement personnalise avec des donnees associees ?

Bonne réponse : new CustomEvent("monEvent", { detail: myData }). CustomEvent permet de passer des donnees via l'option detail. Pour declencher : element.dispatchEvent(new CustomEvent("monEvent", {detail: {id: 1}})). Pour ecouter : addEventListener("monEvent", e => e.detail).

Vanilla-Js Javascript-Natif Quiz-Vanilla-Js-Junior Fetch-Api Promises Async-Await Localstorage Destructuring Spread-Operator Closures Questions-Entretien-Vanilla-Js-Junior Qcm-Vanilla-Js-Junior Es6 Javascript

Junior 🔀 Mixte 20 questions ⏱ 15 min

📝

Entretien Vanilla JS Junior — Fetch, ES6 et LocalStorage

20 questions Vanilla JS niveau junior : Fetch API, promesses, async/await, localStorage, destructuring, spread operator, closures et délégation d'événements. Pour réussir un entretien JS natif 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 Vanilla JS Junior — Fetch, ES6 et LocalStorage », 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.

fetch.get(url)
fetch(url).then(r => r.json()) (bonne réponse)
http.get(url)
ajax.get(url)

Explication : fetch(url) retourne une promesse avec la reponse HTTP. .then(r => r.json()) decode le corps JSON asynchronement. La reponse brute n'est pas directement le JSON, il faut appeler r.json() ou r.text().

fetch -> response -> .json() -> donnees (deux then enchaines)

Filtre les elements selon un critere
Cree un NOUVEAU tableau avec les resultats de la fonction appliquee a chaque element (bonne réponse)
Modifie le tableau original en place
Compte les elements satisfaisant la condition

Explication : map() cree un nouveau tableau sans modifier l'original. La longueur est preservee. Ex: [1,2,3].map(x => x*2) retourne [2,4,6]. C'est un fondamental de la programmation fonctionnelle en JS.

map = transformer chaque element -> nouveau tableau de meme longueur

localStorage.set("key", "value")
localStorage.save("key", "value")
localStorage.setItem("key", "value") (bonne réponse)
localStorage["key"] = "value"

Explication : setItem("key", "value") est la methode officielle du Web Storage API. localStorage ne peut stocker que des chaines. Pour des objets, serialiser avec JSON.stringify() avant setItem.

setItem/getItem/removeItem : la triade localStorage

Une methode pour fermer le navigateur
Une fonction qui conserve l'acces aux variables de sa portee lexicale exterieure (bonne réponse)
Un bloc try/catch pour gerer les erreurs
Une fonction anonyme sans parametres

Explication : Une closure est formee quand une fonction se souvient des variables de sa portee de creation, meme apres que cette portee ait disparu. Utile pour les compteurs, modules ou l'encapsulation.

Closure = fonction + son environnement de creation (memoire de contexte)

Supprimer tous les evenements d'un element enfant
Attacher l'ecouteur au parent pour gerer les evenements des enfants y compris dynamiques (bonne réponse)
Dupliquer un evenement sur plusieurs elements
Creer un evenement personnalise avec CustomEvent

Explication : La delegation tire profit du bubbling : on attache l'ecouteur au parent, et on filtre avec event.target. Fonctionne avec les elements ajoutes dynamiquement, reduit le nombre d'ecouteurs.

Delegation = un ecouteur sur le parent pour gerer tous les enfants

`Bonjour ${name}` (bonne réponse)
"Bonjour ${name}"
'Bonjour ${name}'
"Bonjour " + name + "!"

Explication : Les template literals utilisent des backticks (`) et permettent l'interpolation avec ${expression}. Ils supportent aussi les chaines multi-lignes et les expressions complexes.

Backticks ` + ${variable} = template literal

Modifie chaque element selon la fonction
Un nouveau tableau avec SEULEMENT les elements qui passent le test (bonne réponse)
Trie le tableau selon la fonction
Supprime les doublons du tableau

Explication : filter() retourne un nouveau tableau (potentiellement plus court) avec les elements pour lesquels la callback retourne true. Ex: [1,2,3,4].filter(x => x > 2) retourne [3,4].

filter = conserver seulement les elements qui passent le filtre

let {a, b} = obj (bonne réponse)
let [a, b] = obj
let a, b = obj
extract {a, b} from obj

Explication : La destructuration d'objet utilise {}. La destructuration de tableau utilise []. On peut renommer : let {a: monA} = obj. Valeurs par defaut : let {a = 5} = obj.

{} pour les objets, [] pour les tableaux : la destructuration ES6

Reduit la taille du tableau en supprimant les doublons
Accumule les valeurs du tableau en UNE SEULE valeur via une fonction accumulatrice (bonne réponse)
Supprime les derniers elements jusqu'a une taille cible
Trie le tableau et retourne la valeur minimale

Explication : reduce(fn, init) appelle fn(accumulateur, valeurCourante) pour chaque element. Ex: [1,2,3].reduce((acc, val) => acc + val, 0) = 6. Peut produire n'importe quel type : nombre, objet, tableau.

reduce = compresser tout un tableau en une seule valeur

new Event("monEvent")
new CustomEvent("monEvent", { detail: myData }) (bonne réponse)
document.createEvent("monEvent")
Les deux A et B permettent de passer des donnees

Explication : CustomEvent permet de passer des donnees via l'option detail. Pour declencher : element.dispatchEvent(new CustomEvent("monEvent", {detail: {id: 1}})). Pour ecouter : addEventListener("monEvent", e => e.detail).

CustomEvent + detail = evenement personnalise avec payload

L'evenement remonte des enfants vers les parents (bas vers haut) (bonne réponse)
L'evenement descend des parents vers les enfants (haut vers bas)
L'evenement est duplique sur tous les elements
L'evenement est annule automatiquement apres execution

Explication : Par defaut, les evenements remontent de l'element cible vers ses ancetres (bubbling). La phase de capture va dans le sens inverse. stopPropagation() arrete cette remontee.

Bubbling = remonte des enfants aux parents (comme une bulle dans l'eau)

element.parent
element.parentNode
element.parentElement
parentNode et parentElement sont tous les deux corrects (bonne réponse)

Explication : parentNode et parentElement retournent tous les deux l'element parent. parentNode peut retourner n'importe quel noeud (document, fragment), parentElement retourne uniquement un Element HTML ou null.

parentNode = noeud parent | parentElement = element HTML parent

Analyse une chaine JSON et retourne un objet JS
Convertit un objet JavaScript en chaine JSON (bonne réponse)
Valide si un JSON est correctement formate
Compresse un objet pour l'envoi reseau

Explication : JSON.stringify() serialise un objet en chaine JSON. Proprietes undefined, fonctions et Symbol sont ignorees. Accepte un replacer et un espace pour formater : JSON.stringify(obj, null, 2).

stringify = objet vers chaine | parse = chaine vers objet

[...array] (bonne réponse)
[*array]
[&array]
[Array.copy(array)]

Explication : [...array] cree une copie superficielle (shallow copy) du tableau. Fonctionne aussi pour fusionner : [...arr1, ...arr2]. Pour les objets : {...obj}. Les objets imbriques ne sont pas clones.

... = spread operator : copie superficielle, fusion de tableaux/objets

Une valeur synchrone calculee immediatement
Un objet representant une valeur future : succes (resolve) ou echec (reject) (bonne réponse)
Une fonction callback amelioree
Un type de variable immutable

Explication : Une Promise a 3 etats : pending (en attente), fulfilled (resolue) ou rejected (rejetee). .then() gere le succes, .catch() gere l'echec, .finally() s'execute toujours. Resout le callback hell.

Promise = contrat d'une valeur future (resolve/reject)

.catch(fn) (bonne réponse)
.error(fn)
.fail(fn)
.reject(fn)

Explication : .catch(fn) est equivalent a .then(null, fn). Il capture toutes les erreurs des promesses precedentes dans la chaine. Dans async/await, on utilise try/catch a la place.

.then() = succes | .catch() = erreur | .finally() = toujours

async function fetchData() { const data = await getData(); } (bonne réponse)
function async fetchData() { const data = wait getData(); }
async function fetchData() { const data = getData().await; }
function fetchData() { const data = async getData(); }

Explication : async avant function permet l'utilisation de await a l'interieur. await suspend l'execution jusqu'a la resolution de la promesse. Une fonction async retourne toujours une promesse.

async function + await = sucre syntaxique sur les promesses

Retourne le cote gauche uniquement si null
Retourne l'operande droit si l'operande gauche est null OU undefined seulement (bonne réponse)
Remplace l'operateur ternaire en toutes circonstances
Fusionne deux objets en un seul

Explication : ?? est different de || : il ne considere que null/undefined comme valeurs vides. Avec ||, 0, "", false declencheraient le fallback. Avec ??, seuls null et undefined le font.

?? = seulement null/undefined | || = toute valeur falsy (0, "", false...)

Une technique pour lever des erreurs de compilation
Les declarations var et function sont remontees en haut de leur portee avant l'execution (bonne réponse)
Une optimisation qui deplace le code lent en arriere-plan
Le mecanisme de mise en cache des fonctions

Explication : Le hoisting remonte les declarations (pas les initialisations). var est hoistee avec undefined. Les fonctions declarees (function fn(){}) sont entierement hoistees. let/const sont dans la temporal dead zone.

Hoisting = declaration remontee | initialisation reste en place

Retourne le nombre d'elements satisfaisant le test
Retourne true si AU MOINS UN element satisfait le test (bonne réponse)
Retourne true si TOUS les elements satisfaisant le test
Retourne les premiers elements satisfaisant le test

Explication : some() court-circuite des qu'un element passe le test (retourne true immediatement). every() retourne true seulement si TOUS passent. find() retourne l'element lui-meme, findIndex() l'index.

some() = au moins un ? | every() = tous ? | find() = valeur | findIndex() = index

Rejette automatiquement la promesse
Resout la promesse avec response.ok === false (bonne réponse)
Lance une exception JavaScript
Retourne undefined

Explication : fetch() ne rejette la promesse que pour des erreurs reseau. Une reponse 404 ou 500 est consideree comme une reponse valide : promesse resolue avec response.ok = false. Il faut verifier manuellement.

fetch echoue seulement sur erreur reseau : verifier response.ok pour les 4xx/5xx

obj?.prop?.subprop
obj?.prop.subprop
Les deux sont correctes selon le besoin (bonne réponse)
obj.prop || null

Explication : ?. peut etre utilise a chaque niveau. obj?.prop retourne undefined si obj est null/undefined au lieu de lancer une TypeError. Chainable : user?.address?.city?.zipCode.

?. = court-circuite si null/undefined au lieu de lancer une erreur

element.children (elements HTML seulement)
element.childNodes (tous les noeuds dont texte)
element.kids
Les deux A et B sont utilisables selon le besoin (bonne réponse)

Explication : children retourne une HTMLCollection des elements enfants (ignore les noeuds texte). childNodes retourne une NodeList incluant les noeuds texte et commentaires. Preferer children pour le HTML.

children = elements seulement | childNodes = tous noeuds (texte inclus)

localStorage.get("key")
localStorage.read("key")
localStorage.getItem("key") (bonne réponse)
localStorage["key"].get()

Explication : getItem("key") retourne la valeur stockee ou null si la cle n'existe pas. La valeur est toujours une chaine : il faut JSON.parse() pour recuperer un objet.

getItem -> null si absent | toujours une chaine -> JSON.parse si objet

[...array] uniquement
Array.from(array) uniquement
array.slice() uniquement
Les trois methodes creent une copie superficielle (bonne réponse)

Explication : [...arr], Array.from(arr) et arr.slice() creent toutes une copie superficielle. Les objets imbriques sont partages par reference. Pour une copie profonde : structuredClone() ou JSON.parse(JSON.stringify()).

Shallow copy : [...arr], Array.from(), slice() | Deep copy : structuredClone()

Verifie si TOUS les elements satisfont le test (true uniquement si tous passent) (bonne réponse)
Itere sur chaque element sans retourner de valeur
Retourne tous les elements satisfaisant le test
Cree une copie transformee de chaque element

Explication : every() retourne true seulement si la callback retourne true pour CHAQUE element. Court-circuite des qu'un element echoue. Un tableau vide retourne toujours true (vacuous truth).

every() = est-ce que TOUS ? | court-circuite au premier false

Cree un nouveau type d'objet a partir d'une classe
Copie les proprietes enumerables des objets sources vers la cible (bonne réponse)
Verifie si un objet possede certaines proprietes
Supprime les proprietes d'un objet source

Explication : Object.assign() modifie et retourne l'objet cible. Pour une copie sans mutation : Object.assign({}, source). C'est une copie superficielle. Les proprietes sont ecrasees si deja presentes dans la cible.

Object.assign({}, obj) = copie d'objet | le spread {...obj} est equivalent

() => {a: 1}
() => ({a: 1}) (bonne réponse)
() -> {a: 1}
() => return {a: 1}

Explication : Les accolades {} seraient interpretees comme un bloc de code. Pour retourner un objet, il faut l'entourer de parentheses : () => ({key: value}). Sans les parentheses, JS voit un bloc vide avec un label.

Arrow function + objet = parentheses obligatoires : () => ({prop: val})

Compare les valeurs de deux tableaux
Observe quand un element entre dans ou sort du viewport (zone visible) (bonne réponse)
Gere les conflits entre deux evenements simultanees
Compare deux objets propriete par propriete

Explication : IntersectionObserver detecte quand un element devient visible a l'ecran. Ideal pour le lazy loading d'images, les animations au scroll ou le chargement infini, sans evenements scroll couteux.

IntersectionObserver = lazy loading, animations scroll, infinite scroll

L'INDEX du premier element qui passe le test
Le PREMIER ELEMENT lui-meme qui passe le test (ou undefined) (bonne réponse)
Tous les elements qui passent le test
true si au moins un element passe le test

Explication : find() retourne la valeur du premier element satisfaisant la condition, ou undefined si aucun. findIndex() retourne l'index. filter() retourne tous les elements. some() retourne un booleen.

find() = element | findIndex() = index | filter() = tableau | some() = booleen