Array vs Object vs Map

En JavaScript, plusieurs structures permettent de stocker des données.

Les plus utilisées sont :

• Array (tableau)
• Object (objet)
• Map

Chaque structure possède un rôle différent.

Le choix dépend surtout :

• Du type de données
• De la façon d’y accéder
• De l’organisation souhaitée
• Du comportement attendu

1. Array (Tableau)

Un tableau sert à stocker une liste ordonnée de valeurs.

const fruits = ["apple", "banana", "orange"];

Chaque valeur possède une position appelée :

index

Les index commencent toujours à :

0

2. Accéder à un élément d’un tableau

const fruits = ["apple", "banana", "orange"];

console.log(fruits[0]);

Ici, JavaScript retourne la première valeur du tableau.

3. Quand utiliser un Array

Les tableaux sont utiles lorsque :

• L’ordre est important
• Les données forment une liste
• On parcourt plusieurs éléments
• On accède aux valeurs par position

Exemples :

• Liste de produits
• Messages
• Historique
• Commentaires

4. Object (Objet)

Un objet sert à représenter une seule entité avec plusieurs propriétés.

const user = {

    name: "Fred",
    age: 22

};

Ici, l’objet représente un utilisateur.

5. Accéder à une propriété

console.log(user.name);

Les objets utilisent des propriétés nommées.

6. Quand utiliser un Object

Les objets sont utiles lorsque :

• La structure est fixe
• Les données décrivent une chose
• Les propriétés sont connues

Exemples :

• Utilisateur
• Produit
• Voiture
• Configuration

7. Map

Une Map sert à associer une clé à une valeur.

const cart = new Map();

cart.set("apple", 3);

Ici :

• "apple" = clé
• 3 = valeur

8. Lire une valeur dans une Map

console.log(cart.get("apple"));

9. Quand utiliser une Map

Les Maps sont utiles lorsque :

• Les données sont dynamiques
• Les clés changent souvent
• On veut retrouver rapidement une valeur
• On utilise un système clé → valeur

Exemples :

• Panier
• Inventaire
• Scores
• Compteurs
• Statistiques

10. Différence principale

11. Comment penser chaque structure

Array

Mentalité :

"J’ai une liste"

Object

Mentalité :

"Je décris une chose"

Map

Mentalité :

"J’associe une clé à une valeur"

12. Visualisation mentale

Array

0 => valeur
1 => valeur
2 => valeur

Object

propriété => valeur

Map

clé => valeur

13. Exemple concret

Array

const products = ["apple", "banana"];

Object

const user = {

    name: "Fred",
    age: 22

};

Map

const cart = new Map();

cart.set("apple", 3);

14. Erreur fréquente

Plusieurs débutants utilisent un Array ou un Object alors qu’une Map serait plus logique.

Exemple :

const cart = {

    apple: 3,
    banana: 1

};

Ce code fonctionne, mais une Map est souvent mieux adaptée pour des données dynamiques.

15. Quelle structure choisir ?

16. Bonnes pratiques

• Utiliser Array pour les listes
• Utiliser Object pour les entités
• Utiliser Map pour les systèmes dynamiques
• Choisir une structure adaptée au problème
• Éviter de mélanger les responsabilités

Résumé rapide