Objets

Les objets sont des collections de paires clé-valeur, essentiels pour structurer et organiser les données en JavaScript.

Création et accès

javascript

const user = {
  name: 'Alice',
  age: 25,
  email: 'alice@example.com'
};

// Notation point
console.log(user.name); // 'Alice'

// Notation crochet
console.log(user['age']); // 25

// Modification
user.age = 26;

// Ajout de propriété
user.city = 'Paris';

Quand devez-vous utiliser la notation crochet (user['key']) plutôt que la notation point (user.key) ?

Méthodes utiles

javascript

const user = { name: 'Alice', age: 25 };

// Toutes les clés
Object.keys(user); // ['name', 'age']

// Toutes les valeurs
Object.values(user); // ['Alice', 25]

// Paires clé-valeur
Object.entries(user);
// [['name', 'Alice'], ['age', 25]]

Astuce

Ces méthodes sont très utiles pour itérer sur des objets, convertir des objets en tableaux, ou créer des listes dynamiques à partir de données structurées.

Que retourne Object.keys({ name: 'Alice', age: 25, city: 'Paris' }) ?

Objets imbriqués

javascript

const user = {
  name: 'Alice',
  address: {
    city: 'Paris',
    country: 'France',
    zip: '75001'
  },
  hobbies: ['lecture', 'sport']
};

console.log(user.address.city); // 'Paris'
console.log(user.hobbies[0]); // 'lecture'

Optional Chaining (?.)

Accédez en toute sécurité aux propriétés imbriquées sans risquer une erreur si une propriété n'existe pas.

javascript

const user1 = {
  name: 'Alice',
  address: { city: 'Paris' }
};

const user2 = {
  name: 'Bob'
  // Pas d'address
};

// ❌ Sans optional chaining : erreur si address n'existe pas
console.log(user2.address.city); // TypeError: Cannot read property 'city' of undefined

// ✅ Avec optional chaining : retourne undefined
console.log(user2?.address?.city); // undefined (pas d'erreur)

// Avec valeur par défaut
console.log(user2?.address?.city ?? 'Ville inconnue'); // 'Ville inconnue'

Astuce

L'optional chaining (?.) est très utile quand vous travaillez avec des données provenant d'APIs ou de formulaires, où certaines propriétés peuvent être absentes.

Que se passe-t-il avec : const user = { name: 'Alice' }; console.log(user?.address?.city); ?

Propriétés calculées

javascript

const key = 'name';
const value = 'Alice';

const user = {
  [key]: value,
  [`${key}Upper`]: value.toUpperCase()
};

console.log(user);
// { name: 'Alice', nameUpper: 'ALICE' }

Méthode raccourcie (Shorthand property)

Quand le nom de la variable correspond au nom de la propriété, vous pouvez utiliser une syntaxe raccourcie. C'est très courant et rend le code plus lisible.

javascript

const name = 'Alice';
const age = 25;

// Avant ES6 : répétition du nom
const user = { name: name, age: age };

// Avec ES6 : syntaxe raccourcie
const user = { name, age };

console.log(user); // { name: 'Alice', age: 25 }

Astuce

Cette syntaxe est très utilisée, notamment pour créer des objets à partir de variables ou de paramètres de fonction.

javascript

function createUser(name, email) {
  return { name, email }; // Au lieu de { name: name, email: email }
}

Vérifier l'existence d'une propriété

javascript

const user = { name: 'Alice', age: 25 };

// Avec in
'name' in user; // true
'email' in user; // false

// Avec hasOwnProperty
user.hasOwnProperty('name'); // true
user.hasOwnProperty('email'); // false

// Vérification simple (attention aux valeurs falsy)
if (user.name) {
  console.log('Le nom existe');
}

Copier un objet (shallow copy)

javascript

const user = { name: 'Alice', age: 25 };

// Object.assign
const copy1 = Object.assign({}, user);

// Spread operator (recommandé, voir page suivante)
const copy2 = { ...user };

console.log(copy1); // { name: 'Alice', age: 25 }
console.log(copy2); // { name: 'Alice', age: 25 }

Comprendre, pas mémoriser

Vous n'avez pas besoin de mémoriser toutes les méthodes d'objet !

L'important est de comprendre les concepts :

Objets = collections clé-valeur
Spread operator (...) pour copier/fusionner
Object.keys/values/entries pour itérer
Optional chaining (?.) pour accès sûr

Avec la pratique, ces patterns deviendront naturels. Consultez la documentation (MDN) quand vous avez besoin d'un rappel.

Attention

Ces méthodes font une copie superficielle (shallow copy). Les objets imbriqués sont toujours partagés par référence !

javascript

const user = {
  name: 'Alice',
  address: { city: 'Paris' }
};

const copy = { ...user };
copy.address.city = 'Lyon';

console.log(user.address.city); // 'Lyon' (modifié aussi!)

Pourquoi user.address.city est-il modifié dans l'exemple ci-dessus ?

Manipulation immutable d'objets

Comme pour les tableaux, privilégiez les opérations immutables qui créent de nouveaux objets.

javascript

const user = { name: 'Alice', age: 25, city: 'Paris' };

// Ajouter/modifier une propriété (immutable)
const updatedUser = { ...user, age: 26, country: 'France' };
console.log(updatedUser);
// { name: 'Alice', age: 26, city: 'Paris', country: 'France' }

// Retirer une propriété (immutable)
const { city, ...userWithoutCity } = user;
console.log(userWithoutCity);
// { name: 'Alice', age: 25 }

// Fusionner des objets
const info1 = { name: 'Alice', age: 25 };
const info2 = { email: 'alice@example.com', age: 26 };
const merged = { ...info1, ...info2 };
console.log(merged);
// { name: 'Alice', age: 26, email: 'alice@example.com' }
// Note: age de info2 écrase age de info1

Bonne pratique

Privilégiez toujours les opérations immutables avec le spread operator plutôt que de modifier directement les objets.

Votre code sera plus prévisible, plus facile à déboguer, et maintenable.

Exercice rapide

Exercice : Manipulation d'objets

Facile

Avec cet objet produit :

javascript

const product = {
  name: 'Laptop',
  price: 1000,
  specs: {
    ram: '16GB',
    cpu: 'i7'
  }
};

Créez une copie avec le prix réduit à 850€
Ajoutez les propriétés stock: 50 et category: 'Electronics' (sans modifier l'original)
Extrayez toutes les clés de product dans un tableau
Accédez en toute sécurité à product.specs.storage avec une valeur par défaut "Non spécifié"

Astuce : Utilisez le spread operator, Object.keys(), et l'optional chaining.