Introduction

Souvent ça peut nous arriver de confondre Array et Objet surtout en termes d’utilisation. Voici une réponse rapide avec un exemple qui reflète le besoin dans chacun des cas :

// Une liste de chaînes ordonnées est un bon cas pour un tableau (array):
const nomTries= ['Axel', 'Nathalie', 'Xavier'];

// Un élément avec des propriétés nommées est un bon cas pour un objet (object):
const voiture = { hauteur: 4, largeur: 1, couleur: 'bleue'};

Toujours pas clair ?  Essayons d’explorer un peu plus en détail : Array (tableau) et Object (objet)

Pour manipuler des collections de données, ou en d’autres termes, gérer des données en groupe, JavaScript utilise principalement des objets ou des tableaux qu’on appelle aussi arrays (qui sont eux aussi un type d’objet dans JavaScript).

Rappelons d’abord ce que c’est un Array et un Objet.

Tableau (Array)

 Un tableau (array) permet de stocker plusieurs valeurs en une seule variable. Cela évite d’avoir une variable pour chaque valeur !

On peut accéder à chaque valeur du tableau individuellement

let maListeDeCourse = ['lait', 'formage', 'confiture', 'pates', 'riz'];

// la valeur ‘formage‘ peut être accédée par 
maListeDeCourse[1] 

NB :

• Les tableaux JavaScript sont indexés à zéro (zero-based indexing). Le premier élément d’un tableau est à l’index 0
• On peut stocker n’importe quel élément dans un tableau — chaîne, nombre, objet, autre variable et même d’autres tableaux (

Exemple de tableau d’objets :

const etudiants = [{ nom: 'Fred', age: 24 }, { nom: 'Alex', age: 23 }];

Objet (Object)

Un objet est un ensemble de propriétés, et une propriété est une association entre un nom (aussi appelé clé) et une valeur.

Si on effectue cette comparaison avec une canette de coca, on pourra dire qu’une canette est un objet avec des propriétés, ces propriétés pourront être le poids, la couleur, la forme, la hauteur, le matériau qui la constitue …

Une propriété peut être vue comme une variable attachée à l’objet.

Voici un exemple d’un objet :

let monBureau = new Bureau();

monBureau.fabricant = "Ikea";
monBureau.modele = "334-A";
monBureau.annee = '2019';

Si on veut accéder à la valeur d’une propriété :

console.log(monBureau.fabricant); // ou bien monBureau["fabricant"]

Les caractéristiques de Array et Object

Tout d’abord, array et object sont de type muable (mutable) – Une variable est dite muable quand on peut la modifier. En JavaScript, seuls les objets et tableaux (arrays) sont muables.

Tableaux (arrays)

Un tableau (array) est utilisé quand on veut créer et stocker une liste d’éléments dans une seule variable. Les tableaux sont spécialement utiles quand on veut créer des collections de données ordonnées (comme mentionnée dans l’introduction les éléments (items) sont accessibles selon leur position numérique dans le tableau).

Reprenant le même exemple mentionné précédemment :

var maListeDeCourse = ['lait', 'fromage', 'confiture', 'pates', 'riz'];

Si on veut ajouter un élément (item) à ce tableau (array)

maListeDeCourse.push('pain de mie'); // [ 'lait', 'fromage', 'confiture', 'pates', 'riz', 'pain de mie' ]

pop() – supprimer le dernier élément du tableau

// pop() – supprimer le dernier élément du tableau
maListeDeCourse.pop(); // [ 'lait', 'fromage', 'confiture', 'pates', 'riz' ]

// unshift() – ajouter des éléments en début du tableau

maListeDeCourse.unshift('sirop', 'salade'); // [ 'sirop', 'salade', 'lait', 'fromage', 'confiture', 'pates', 'riz' ]

// shift() – supprimer le premier élément du tableau

maListeDeCourse.shift(); // [ 'salade', 'lait', 'fromage', 'confiture', 'pates', 'riz' ]

Les propriétés d’un tableau ainsi que les méthodes de sa manipulation peuvent se trouver dans cette page : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array

L’itération dans un tableau :

Nous pouvons parcourir les éléments d’un tableau de plusieurs manières, en utilisant :

For

for (var i = 0; i < maListeDeCourse.length; i++) {
    console.log(maListeDeCourse[i]); // afficher les elements de maListeDeCourse
}

For of:

for (var item of maListeDeCourse) {
    console.log(item); // afficher les elements de maListeDeCourse
}

Ou forEach()

maListeDeCourse.forEach(function (item) {
    console.log(item); // afficher les elements de maListeDeCourse
});

Object :

Un objet (Object) est utilisé pour représenter «quelque chose» comme un livre, une voiture, un bâtiment, un stylo … En gros toute sorte de chose qui pourrait avoir un ensemble de caractéristiques. Ce sont ces caractéristiques qu’on appelle propriétés (properties)

// Syntax basique

//  basique
var object = {
    key: 'value'
};

// Example ‘batiment’ object

interface Batiment {
    [key: string]: any
}

let bat: Batiment = {
    nom: "Les Colibris",
    adresse: "33 rue Dupont",
    type: "residence",
};

Les propriétés dans les objets peuvent être accédées, rajoutées, modifiées et supprimées en utilisant les deux annotations qu’on a vu précédemment (point ou crochet) : bat.nom ou bat[« nom »]

Si on veut changer la valeur de la propriété nom, il suffit de lui affecter une autre valeur :

batiment.nom = 'Les Champions';

On peut également ajouter une nouvelle propriété en procédant ainsi :

bat.hauteur = 20;
bat.residents = ['Mr Dupont', 'Mme Dupont', 'Mme Jokivard'];

Et si on veut supprimer une propriété,

delete bat.type; // ou bien delete bat['type']; // Resultat: { nom: 'Les Champions', adresse: '33 rue Dupont', hauteur: 20, residents: [ 'Mr Dupont', 'Mme Dupont', 'Mme Jokivard' ]}

L’itération dans un objet :

La manière la plus courante de parcourir les propriétés d’un objet est d’utiliser une boucle for… in:

// Boucle For in
for (var key in bat) {
    console.log(key); // cles de mon objet
    console.log(bat[key]); // valeurs associees aux cles
}

On peut également itérer en utilisant forEach

Object.keys(bat).forEach(function (key) {
    console.log(key); // cles de mon objet
    console.log(bat[key]); // valeurs associees aux cles
});

Les propriétés d’un tableau ainsi que les méthodes de sa manipulation peuvent se trouver dans cette page : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object

L’utilisation

La question est donc, quand utiliser un Array et quand utiliser un objet.

Tout d’abord, on ne regroupe pas des données dans un tableau ou bien dans un objet si on ne va pas les manipuler, cad : ajouter un élément (insertion), supprimer un élément (suppression), mettre à jour un élément (Mise à jour), itérer au sein d’un tableau ou objet (itération)

Le cas Insertion :

Dans le cas des tableaux, ajouter un élément à un tableau est un jeu d’enfants grâce à la syntaxe de décomposition apportée par ES6

const noms = ['Ahmed', 'Nicolas'];

const nomsPlusFin = [...noms, 'Daniel']; // Resulat: ['Ahmed', 'Nicolas', Daniel];

const nomsPlusDebut = ['Axel', ...noms]; // Resulat: [‘Axel’, 'Ahmed', 'Nicolas'];

Cependant, si on voulait inclure un nom au milieu du tableau noms (donc entre les valeurs ‘Ahmed’ et ‘Nicolas’), il faudrait connaitre l’index du milieu. Il va donc falloir le retrouver .. cet index ! (ce qui engendre un temps additionnel d’exécution)

// Inserer Jack au milieu
var indexMilieu = Math.round((noms.length - 1) / 2);
const nomPlusMilieu = [
    ...noms.slice(0, indexMilieu),
    'Jack',
    ...noms.slice(indexMilieu)
]; // Resultat: [ 'Ahmed', 'Jack', 'Nicolas' ]

Dans le cas des objets, on ne s’intéresse pas à l’ordre car il n’y a pas de concept de début/milieu/fin. Et l’ajout se fait de la sorte :

bat.codePostal = 34000; // Resultat : { nom: 'Les Champions', adresse: '33 rue Dupont', hauteur: 20, residents: [ 'Mr Dupont', 'Mme Dupont', 'Mme Jokivard' ], codePostal: 34000}

Le cas Suppression :

Dans le cas des tableaux, C’est aussi simple de supprimer le premier et le dernier élément d’un array, cependant, il faut toujours  calculer l’index du milieu pour pouvoir l’identifier

const nomsGarcons = ["Ahmed", "Nicolas", "Sami", "Jack", "James"];
const nomSansLePremier = nomsGarcons.slice(1); //Resultat [ 'Nicolas', 'Sami', 'Jack', 'James' ]
const nomSansLeDernier = nomsGarcons.slice(0, -1); // Resultat [ 'Ahmed', 'Nicolas', 'Sami', 'Jack' ]
// identifier le milieu pour pouvoir le supprimer
let milieu = Math.round((nomsGarcons.length - 1) / 2);
const nomsSansLeMilieu = [...nomsGarcons.slice(0, milieu), ...nomsGarcons.slice(milieu + 1)]; // Resultat [ 'Ahmed', 'Nicolas', 'Jack', 'James' ]

Si on voulait retirer un nom précis du array, comme ‘Jack’, on peut utiliser la méthode filter :

const nomsSansJack = nomsGarcons.filter(nom => nom !== 'Jack'); // Resultat: [ 'Ahmed', 'Nicolas', 'Sami', 'James' ]

Dans le cas des objets, la question sur la position d’un élément ne se pose pas !, supprimer une propriété d’un objet est simple comme bonjour :

let bati: Batiment = {
    nom: "Les Colibris",
    adresse: "33 rue Dupont",
    type: "residence",
};
delete bati.adresse; // Resultat: { nom: 'Les Colibris', type: 'residence' }

Le cas Mise à Jour :

Dans le cas des tableaux, lorsqu’on veut mettre à jour un élément, on peut le faire par index ou bien si on ne connait pas l’index, on peut itérer au sein du tableau en cherchant sa valeur.

Dans le monde réel, l’itération est la méthode la plus commune car souvent on est devant des grandes quantités de données ou bien des données qui sont dynamiques et dont l’index peut changer de position.

Dans cet exemple, on connait l’index de « Nicolas » (1) et on veut le replacer par « Nico »

const nomsMisAJour = [...nomsGarcons.slice(0, 1), "Nico", ...nomsGarcons.slice(2)]; // Resultat: [ 'Ahmed', 'Nico', 'Sami', 'Jack', 'James' ]

Dans l’exemple suivant, on suppose que l’on ne connait pas l’index de « Nicolas », il va donc falloir parcourir le array pour le retrouver :

const nomsMisAJourAvecRecherche = nomsGarcons.map(nom => {
    if (nom === 'Nicolas') return 'Nico';
    return nom;
}); // Resultat [ 'Ahmed', 'Nico', 'Sami', 'Jack', 'James' ]

Dans le cas des objets, la mise à jour d’un élément se fait directement en utilisant sa clé :

bati.type = "villa"; // Resultat: { nom: 'Les Colibris', type: 'villa' }

Le cas Itération :

Jusqu’à présent, on a montré que les objets représentent un avantage par rapport aux tableaux dans le sens où tout se fait sans « extra code ». Maintenant, c’est le tour des arrays pour montrer leur atout.

Prenons l’exemple du array noms. On veut que tous les noms soient transformés en Majuscule :

const nomsMaj = nomsGarcons.map((nom) => nom.toUpperCase()); // [ 'AHMED', 'NICOLAS', 'SAMI', 'JACK', 'JAMES' ]

Si on veut que les valeurs des propriétés de l’objet bâtiment soit également mis en majuscule (on suppose que l’objet contient des propriétés de type string), on doit parcourir l’objet avec la boucle For

for (var key in bat)
    if (bat[key].toString().toUpperCase() != bat[key]) {
        bat[key] = bat[key].toString().toUpperCase();
    } // Resultat { nom: 'LES CHAMPIONS', adresse: '33 RUE DUPONT', hauteur: 20, residents: 'MR DUPONT,MME DUPONT,MME JOKIVARD', codePostal: 34000}

Il y a moyen de ne pas utiliser la boucle For et de transformer l’objet en Array, avant de tout transformer en Majiscule :

let batimentTranformeEnArray = Object.keys(bat).map((key) => bat[key]); // Resultat: [ 'LES CHAMPIONS', '33 RUE DUPONT', 20, 'MR DUPONT,MME DUPONT,MME JOKIVARD', 34000]

Voici d’autres exemples utiles de manipulations de tableaux (que l’on peut également coder pour les Objets):

const noms = ["Ahmed", "Nicolas", "Sami", "Jack", "James"];
// noms ne depassant pas 4 characteres inclues.
nomsCours = noms.filter(nom => nom.length<5); 
// [ 'Sami', 'Jack' ]
// renverser l'ordre
noms.reverse();
// [ 'James', 'Jack', 'Sami', 'Nicolas', 'Ahmed' ]
// calculer le nombre total de characteres dans le tableau
const nombreTotalDeChars = noms.reduce((total, name) => {
    return total + name.length;
  }, 0);
// 25

La performance / ou la vitesse d’exécution

La manipulation de tableau est plus lente quand on ne connait pas l’index (O (n)), car il faut parcourir chaque élément avant de trouver celui que l’on recherche. D’un autre côté, la recherche, insertion, suppression et mises à jour se font rapidement sur les objets car le nom de la propriété fournit une référence afin que vous n’ayez pas à chercher l’élément souhaité.

Pour conclure, les cas d’utilisation relatés précédemment peuvent vous donner une référence afin de choisir lequel des types est le plus approprié à votre usage.

En règle générale, les tablaux (array) sont plus appropriés au cas où les groupes de données sont de type similaire, que vous devez ordonner ou que vous souhaitez manipuler en tant que lot. Cependant les objets sont plus appropriés au cas où on veut traiter avec une seule entité ayant des propriétés définies.

Utiliser le bon type de données n’est pas toujours un choix clair, mais plus vous travaillez avec chaque type de données, plus il sera évident que celui qui a du sens dans une situation donnée.

Conclusion :

Pensez à ce que représentent vos données particulières: s’il s’agit d’une seule entité avec des propriétés nommées, vous voulez un objet. S’il s’agit d’un groupe d’entités du même type / forme, ou si l’ordre est important, vous souhaiterez probablement un tableau.