Fondations — Objets, portée et destructuration

🏗️ Créer un objet

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

Notation littérale

const personne = {
  nom: "Alice",
  age: 25,
  parler() {
    console.log(`Bonjour, je m'appelle ${this.nom}`);
  },
};

La notation littérale est de loin la plus courante. Les méthodes peuvent utiliser la syntaxe concise parler() { ... } (équivalent à parler: function() { ... }).

Object.create — créer sans constructeur

const prototypeVide = Object.create(null); // aucun prototype → pas de clés héritées
prototypeVide.nom = "Bob";

Object.create(null) produit un objet sans __proto__ — utile pour les dictionnaires pur (pas d'héritage de toString, hasOwnProperty…).

Constructeur avec new

function Personne(nom, age) {
  this.nom = nom;
  this.age = age;
}

const alice = new Personne("Alice", 25);
alice instanceof Personne; // true

Un constructeur est une fonction appelée avec new. Sans new, this vaut le scope global (ou undefined en mode strict) — piège classique.

Comparer les façons de créer

🔒 var / let / const — portée et hoisting

JavaScript a trois mots-clés pour déclarer des variables, et ils ne se comportent pas de la même manière.

Hoisting et Temporal Dead Zone

console.log(x); // undefined — pas d'erreur, mais valeur "vide"
var x = 10;

console.log(y); // ReferenceError — Temporal Dead Zone
let y = 20;

Avec var, la déclaration est "hissée" (hoisted) au début de la fonction/scope, initialisée à undefined. Avec let/const, la déclaration est également hissée mais la variable reste dans la Temporal Dead Zone (TDZ) jusqu'à la ligne de déclaration effective — tout accès avant lève une ReferenceError.

Ce comportement explique pourquoi la pratique moderne recommande :

• const par défaut — le littéral ne sera jamais réassigné
• let quand la réassignation est nécessaire (boucle, compteur)
• Jamais var — sa portée fonctionnelle et son hoisting sans TDZ sont des sources d'erreur

// Règle pratique — Boucle avec var vs let
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// Affiche : 3, 3, 3 (i est la même variable partagée)

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// Affiche : 0, 1, 2 (chaque itération a sa propre i)

🔐 Fermetures (closures)

Une fermeture est une fonction qui "capture" les variables de son scope englobant, même après que ce scope a fini de s'exécuter.

function creerCompteur() {
  let compteur = 0;

  return function () {
    compteur++;
    return compteur;
  };
}

const compteur = creerCompteur();
compteur(); // 1
compteur(); // 2
compteur(); // 3

Chaque appel à creerCompteur() crée une nouvelle fermeture avec son propre compteur. La fonction retournée garde une référence vivante à la variable locale même après le retour de creerCompteur().

Cas d'usage courants

• Fabrique de fonctions paramétrées : function multiplier(factor) { return x => x * factor }
• Data privacy légère : les variables locales ne sont accessibles que par les méthodes retournées
• Callbacks avec contexte : element.addEventListener("click", () => handler(id)) capture id

📦 Destructuration avancée

La destructuration extrait des valeurs depuis un objet ou un tableau en une seule instruction. Elle s'applique à tous les niveaux et se combine avec des valores par défaut, du renommage et du "rest".

Depuis un objet

const user = { nom: "Alice", age: 25, ville: "Paris" };

// Extraction basique
const { nom, age } = user;

// Renommage
const { nom: prenom } = user;

// Valeur par défaut (si la clé manque)
const { email = "inconnu@email.com" } = user;

// Combiner renommage + défaut
const { nom: nomAffiche, email: courriel = "aucun" } = user;

// Rest — récupérer le "reste" dans un nouvel objet
const { nom, ...autresInformations } = user;
// nom = "Alice", autresInformations = { age: 25, ville: "Paris" }

Depuis un tableau

const couleurs = ["rouge", "vert", "bleu"];

const [premier, second] = couleurs;
const [, , troisieme] = couleurs; // sauter des éléments

const [first, ...rest] = couleurs;
// first = "rouge", rest = ["vert", "bleu"]

Destructuring dans les paramètres de fonction

function afficherProfil({ nom, age, ville = "inconnu" }) {
  console.log(`${nom}, ${age} ans, ${ville}`);
}

afficherProfil({ nom: "Alice", age: 25 });
// "Alice, 25 ans, inconnu"

C'est un idiome puissant pour les fonctions qui prennent un seul objet configuration — la signature reste lisible même avec 5-6 options.

🛠️ Exercices pratiques

🧩 Synthèse du bloc

Quiz de fin de bloc