Atelier — Manipuler objets, destructuration et objets globaux

Mise en pratique assistée : créez un profil utilisateur, déstructurez-le et comparez les environnements navigateur (window/document) et Node.js (globalThis).

Vous allez manipuler réellement des objets, pas seulement les lire. Ouvrez les outils de développement de votre navigateur (touche F12) puis l'onglet Console : c'est un terrain de jeu instantané pour tester chaque étape. Revenez à cet atelier après chaque copier-coller pour observer le résultat produit.

Préparer le terrain

Dans cet atelier, nous construisons un profil utilisateur : un objet profil qui regroupe un nom, un âge, une ville et une liste de centres d'intérêt. Ce cas concret fait le pont entre l'Apport (objets, destructuration, objets globaux) et l'exercice évalué de la séance, qui réutilise exactement ce profil.

Gardez ce code en local, dans la console ou dans un fichier atelier.js. La séance 2 est un socle de compréhension : rien n'est poussé vers le dépôt fil rouge cette fois-ci. L'objectif est d'ancrer les notions avant de les réutiliser côté serveur.

1. Créer et lire un objet profil

Un objet est une collection de paires clé-valeur. On le crée avec des accolades, puis on lit ses propriétés avec la notation pointée ou la notation crochet.

Déclarer l'objet

Saisissez dans la console :

const profil = {
  nom: "Alice",
  age: 25,
  ville: "Paris",
  centresInteret: ["musée", "rando", "cuisine"],
}

Lire des propriétés

Accédez aux valeurs de deux façons équivalentes :

console.log(profil.nom)                // "Alice"
console.log(profil["ville"])           // "Paris"
console.log(profil.centresInteret[0])  // "musée"

Ajouter et modifier

Un objet déclaré avec const reste mutable : seule sa référence est verrouillée, pas son contenu.

profil.age = 26
profil.email = "alice@example.com"
console.log(profil.age)                // 26

2. Déstructurer pour extraire proprement

La destructuration remplace les accès répétitifs par une seule instruction lisible. Elle s'applique aux objets, aux tableaux et même aux paramètres de fonction.

Extraire plusieurs propriétés

const { nom, age, ville } = profil
console.log(nom, age, ville)           // Alice 26 Paris

Renommer une variable au passage

Utile quand la clé ne nous convient pas comme nom de variable :

const { nom: prenom, ville: residence } = profil
console.log(prenom, residence)         // Alice Paris

Déstructurer un tableau imbriqué

const [premierInteret] = profil.centresInteret
console.log(premierInteret)            // "musée"

3. Comparer les environnements : window/document vs globalThis

C'est le point le plus souvent confus. window et document n'existent que dans le navigateur. En Node.js (côté serveur), l'objet global portable est globalThis.

Observer window dans le navigateur

Toujours dans la console du navigateur :

console.log(window.innerWidth)         // largeur de la fenêtre
console.log(window === globalThis)     // true : window EST l'objet global ici

Manipuler le DOM via document

document représente la page. Créez un élément et insérez-le :

const p = document.createElement("p")
p.textContent = `Profil : ${profil.nom}`
document.body.appendChild(p)

Vérifier l'absence en Node.js

Ouvrez un terminal Node et tapez :

console.log(typeof window)             // "undefined"
console.log(typeof globalThis)         // "object" — c'est le global portatif

N'exécutez jamais document.querySelector(...) dans Node.js : document y est inconnu et lève une erreur ReferenceError. Ces manipulations DOM sont réservées au navigateur.

4. Cas concret : formatter un profil (à tester)

Appliquez la destructuration dans une fonction qui produit une chaîne lisible. C'est le même principe que l'exercice évalué de la séance — entraînez-vous ici en toute sécurité, le bouton « Exécuter et valider » vérifie votre code.

Atelier — formatProfil

Appliquer la destructuration dans une fonction

Appliquer la destructuration dans une fonction qui reçoit un objet et produit une chaîne lisible. Vous déstructurez des propriétés et utilisez une template literal.

Déstructurer un objet en paramètre de fonction
Utiliser une template literal pour formater une chaîne

Étape 1 — Déstructurer

Déstructurez les propriétés nom et age de l'objet user reçu en paramètre.

Étape 2 — Retourner la chaîne formatée

Retournez la chaîne exacte : Nom: [nom], Age: [age] en utilisant une template literal.

Indice — destructuration et template literal

Pour déstructurer dans une fonction : const { nom, age } = user. Pour la template literal, utilisez les backticks : `Nom: ${nom}, Age: ${age}`.

Code à valider

javascript

5. Pièges à surveiller

Copie vs référence : const copie = profil copie la référence, pas l'objet. Modifier copie.nom modifie aussi profil.nom. Pour une vraie copie indépendante : { ...profil } ou structuredClone(profil).

const ne verrouille pas le contenu : const profil = {...} empêche de réassigner profil, mais profil.age = 27 reste autorisé. Seule la référence est constante.

Pour aller plus loin

Relisez l'Apport pour ancrer objets et objets globaux.
Enchaînez sur l'exercice évalué, qui réutilise exactement ce profil utilisateur.
Approfondissez les données asynchrones pour charger ce profil depuis une API plus tard.

JavaScript avancé

Terminez le quiz du chapitre pour le marquer comme complété.

Tableau de bord

Atelier — Manipuler objets, destructuration et objets globaux

Code à valider

On this page