Objets et Tableaux en JavaScript : Le Guide Complet

Les objets et les tableaux sont les piliers de JavaScript. Comprendre leur fonctionnement en profondeur est essentiel pour tout développeur. Ce guide complet vous accompagne des bases aux techniques avancées.

Les Objets JavaScript

Création d'objets

// Notation littérale (recommandée)
const utilisateur = {
  nom: 'Mark Toledo',
  age: 39,
  profession: 'Développeur'
};

// Avec new Object()
const config = new Object();
config.theme = 'dark';
config.langue = 'fr';

// Propriétés dynamiques
const cle = 'email';
const contact = {
  [cle]: 'mark@atinux.fr',
  [`${cle}Pro`]: 'mark@entreprise.com'
};

Accès et modification

const personne = { nom: 'Mark', ville: 'Paris' };

// Notation point
console.log(personne.nom); // 'Mark'

// Notation crochets (pour clés dynamiques)
const prop = 'ville';
console.log(personne[prop]); // 'Paris'

// Modification
personne.age = 39;
personne['pays'] = 'France';

// Suppression
delete personne.ville;

Méthodes utiles sur les objets

const produit = { nom: 'Laptop', prix: 1200, stock: 5 };

// Object.keys() - clés
Object.keys(produit); // ['nom', 'prix', 'stock']

// Object.values() - valeurs
Object.values(produit); // ['Laptop', 1200, 5]

// Object.entries() - paires [clé, valeur]
Object.entries(produit);
// [['nom', 'Laptop'], ['prix', 1200], ['stock', 5]]

// Object.assign() - fusion
const defaults = { theme: 'light', langue: 'fr' };
const userPrefs = { theme: 'dark' };
const config = Object.assign({}, defaults, userPrefs);
// { theme: 'dark', langue: 'fr' }

// Object.freeze() - immuabilité
Object.freeze(produit);
produit.prix = 1000; // Ignoré en strict mode

Les Tableaux JavaScript

Création de tableaux

// Notation littérale
const fruits = ['pomme', 'banane', 'orange'];

// Array.from() - depuis un itérable
const lettres = Array.from('abc'); // ['a', 'b', 'c']

// Array.of() - créer avec des éléments
const nombres = Array.of(1, 2, 3); // [1, 2, 3]

// Array() constructeur (attention aux pièges)
const vide = new Array(3); // [empty × 3]
const rempli = new Array(3).fill(0); // [0, 0, 0]

Méthodes de modification

const liste = ['a', 'b', 'c'];

// Ajouter
liste.push('d');        // Fin: ['a', 'b', 'c', 'd']
liste.unshift('z');     // Début: ['z', 'a', 'b', 'c', 'd']

// Retirer
liste.pop();            // Fin: retourne 'd'
liste.shift();          // Début: retourne 'z'

// Splice - insertion/suppression à une position
liste.splice(1, 1);           // Supprime 1 élément à l'index 1
liste.splice(1, 0, 'nouveau'); // Insère à l'index 1
liste.splice(1, 1, 'autre');  // Remplace à l'index 1

Méthodes fonctionnelles (immutables)

Ces méthodes retournent un nouveau tableau sans modifier l'original :

const nombres = [1, 2, 3, 4, 5];

// map - transformer chaque élément
const doubles = nombres.map(n => n * 2);
// [2, 4, 6, 8, 10]

// filter - garder selon condition
const pairs = nombres.filter(n => n % 2 === 0);
// [2, 4]

// reduce - réduire à une valeur
const somme = nombres.reduce((acc, n) => acc + n, 0);
// 15

// find - premier élément correspondant
const trouve = nombres.find(n => n > 3);
// 4

// findIndex - index du premier correspondant
const index = nombres.findIndex(n => n > 3);
// 3

// some - au moins un correspond
const auMoinsUnGrand = nombres.some(n => n > 4);
// true

// every - tous correspondent
const tousPetits = nombres.every(n => n < 10);
// true

// includes - contient la valeur
const contient3 = nombres.includes(3);
// true

Chaînage de méthodes

const utilisateurs = [
  { nom: 'Alice', age: 25, actif: true },
  { nom: 'Bob', age: 30, actif: false },
  { nom: 'Charlie', age: 35, actif: true },
  { nom: 'Diana', age: 28, actif: true }
];

// Chaîner les opérations
const nomsActifsTries = utilisateurs
  .filter(u => u.actif)
  .map(u => u.nom)
  .sort();
// ['Alice', 'Charlie', 'Diana']

// Calcul complexe
const moyenneAgeActifs = utilisateurs
  .filter(u => u.actif)
  .map(u => u.age)
  .reduce((sum, age, _, arr) => sum + age / arr.length, 0);
// 29.33...

Techniques avancées

Déstructuration

// Objets
const { nom, age, pays = 'France' } = utilisateur;

// Tableaux
const [premier, second, ...reste] = [1, 2, 3, 4, 5];
// premier = 1, second = 2, reste = [3, 4, 5]

// Dans les paramètres de fonction
function afficher({ nom, age }) {
  console.log(`${nom} a ${age} ans`);
}

Spread operator

// Copie superficielle d'objet
const copie = { ...original };

// Fusion d'objets
const fusion = { ...obj1, ...obj2, nouvelleProp: 'valeur' };

// Copie de tableau
const copieTableau = [...original];

// Concaténation
const tous = [...tableau1, ...tableau2];

Clonage profond

// Pour objets simples (attention aux fonctions, dates, etc.)
const cloneProfond = JSON.parse(JSON.stringify(original));

// Avec structuredClone (moderne)
const clone = structuredClone(original);

// Fonction récursive personnalisée
function cloneProfond(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (Array.isArray(obj)) return obj.map(cloneProfond);
  return Object.fromEntries(
    Object.entries(obj).map(([k, v]) => [k, cloneProfond(v)])
  );
}

Bonnes pratiques

1. Préférez l'immutabilité : utilisez map, filter, reduce plutôt que de modifier directement
2. Utilisez la déstructuration pour un code plus lisible
3. Évitez les mutations : créez de nouveaux objets/tableaux
4. Nommez vos fonctions dans les callbacks pour faciliter le débogage
5. Utilisez const par défaut pour éviter les réassignations accidentelles

Conclusion

Les objets et tableaux sont omniprésents en JavaScript. Maîtriser leurs méthodes et les techniques de manipulation vous permettra d'écrire du code plus élégant et maintenable. Pratiquez ces concepts dans vos projets quotidiens pour les intégrer naturellement.