JavaScript avancé

Ce chapitre consolide les notions de JavaScript indispensables avant d'aborder Node.js, React ou Next.js. Vous y manipulerez les objets en profondeur, la destructuration moderne et les objets globaux exposés par le navigateur, puis les fonctions asynchrones qui structurent tout le développement web actuel.

🧱 Construire et déconstruire un objet

Un objet en JavaScript est une collection de paires clé-valeur. C'est la structure de données centrale du langage : configurations, réponses d'API, état d'une application… tout finit par transiter sous forme d'objet.

Création d'un objet

const personne = {
  nom: "Alice",
  age: 25,
  parler() {
    console.log("Bonjour !")
  },
}

On peut aussi utiliser un constructeur ou une classe :

const voiture = new Object()
voiture.marque = "Toyota"
voiture.modele = "Corolla"

class Animal {
  constructor(nom, espece) {
    this.nom = nom
    this.espece = espece
  }
}

Déstructuration

La destructuration extrait des propriétés en une seule instruction, avec possibilité de renommer la variable au passage :

const { nom, age } = personne
const { nom: prenom } = personne

Elle fonctionne aussi sur les tableaux (const [premier, second] = liste) et dans les paramètres de fonction, ce qui rend les signatures beaucoup plus lisibles.

🌐 Objets globaux du navigateur

window est l'objet global du navigateur. document représente le DOM et permet de manipuler la page.

console.log(window.innerWidth)
console.log(document.querySelectorAll(".bouton"))

Dans un script classique (non-module), une variable déclarée avec var au premier niveau — ou une déclaration de fonction — devient une propriété de window. Ce n'est pas le cas de let/const, ni des variables déclarées dans un module ES (type="module"), qui restent dans leur propre portée. Côté serveur (Node.js), window n'existe pas : c'est globalThis qui joue ce rôle de manière portable.

📋 Parcours du chapitre

🛠️ Atelier — manipuler objets et destructuration

La mise en pratique assistée est dans la page dédiée Atelier : créez un profil utilisateur, déstructurez-le et comparez les environnements window/document (navigateur) et globalThis (Node.js).

🏋️ Exercice

Exercices de manipulation d'objets, classes et destructuration. → Exercice

🎯 Synthèse