Objects - Mémo JavaScript

Objects Avancés

Prototypes, Descriptors & Deep Clone

Les objets sont au cœur de JavaScript. Tout (sauf primitifs) est un objet : arrays, fonctions, dates...

🔧 Méthodes Object Essentielles

Object.keys()

const obj = {a: 1, b: 2};
Object.keys(obj);
// ["a", "b"]

// Utile pour itérer
Object.keys(obj).forEach(key => {
    console.log(key, obj[key]);
});

Object.values()

const obj = {a: 1, b: 2};
Object.values(obj);
// [1, 2]

// Somme des valeurs
const sum = Object.values(obj)
    .reduce((a, b) => a + b);

Object.entries()

const obj = {a: 1, b: 2};
Object.entries(obj);
// [["a", 1], ["b", 2]]

// Destructuring
for (const [key, val] of Object.entries(obj)) {
    console.log(key, val);
}

Object.assign()

const target = {a: 1};
const source = {b: 2};
Object.assign(target, source);
// target = {a: 1, b: 2}

// ⚠️ Shallow copy
// Préférez spread: {...obj}

Object.freeze()

const obj = {a: 1};
Object.freeze(obj);

obj.a = 2; // ❌ Silencieux (strict: erreur)
obj.b = 3; // ❌ Pas ajouté

// Immutable (shallow)

structuredClone()

const obj = {
    a: 1,
    nested: {b: 2}
};
const clone = structuredClone(obj);

// ✅ Deep clone natif
// ✅ Gère Date, Map, Set

📦 Destructuring Avancé

// 1. Basique
const {name, age} = user;

// 2. Renommer
const {name: userName, age: userAge} = user;

// 3. Valeur par défaut
const {role = "guest"} = user;

// 4. Nested
const {address: {city}} = user;

// 5. Rest
const {id, ...rest} = user;

// 6. Fonction (paramètres)
function greet({name, age = 18}) {
    console.log(`${name} (${age})`);
}
greet({name: "Alice"}); // Alice (18)

⛓️ Prototype Chain

Chaque objet a un lien vers son prototype. C'est le mécanisme d'héritage de JavaScript.

Visualisation de la Chaîne

🎯 user (Instance)

name: "Alice" age: 25

📦 User.prototype

greet() toString()

🌍 Object.prototype

hasOwnProperty() valueOf()

⛔ null

Fin de la chaîne

🔍 Shallow vs Deep Copy

⚠️ Shallow Copy

const original = {
    a: 1,
    nested: {b: 2}
};

// Spread ou Object.assign
const copy = {...original};

copy.a = 99; // ✅ OK
copy.nested.b = 99; // ❌ Modifie original !

// Seul le 1er niveau est copié

✅ Deep Copy

const original = {
    a: 1,
    nested: {b: 2}
};

// structuredClone (natif)
const copy = structuredClone(original);

copy.nested.b = 99; // ✅ Original intact

// Copie récursive complète

🔬 Object Explorer

Explorez la structure d'un objet JavaScript.

Entrez un objet JSON et cliquez sur Explorer

Best Practice : Utilisez structuredClone() pour les deep copies (supporté depuis 2022). Pour les cas complexes (fonctions, symboles), utilisez une bibliothèque comme Lodash _.cloneDeep().

← Arrays Suivant: DOM →