Formation Apprendre le JavaScript : Set & Map

En plus des objets simples et des tableaux, JavaScript offre des types supplémentaires qui permettent de représenter des structures de données plus spécifiques, les Set et les Map (introduit à avec l'ECMAScript 2015).

Set

Un Set est une collection d'éléments uniques qui, contrairement aux tableaux, ne peuvent pas stocker d'éléments en double. Cet objet offre aussi de meilleurs performances lorsqu'il s'agit de vérifier la présence d'un élément.

const s = new Set()
s.add('John')
s.add('Jane')
s.add('John') // Ne sera pas ajouté car existe déjà
s.size // 2

// Pour vérifier l'existence
s.has('John') // true
s.delete('John')
s.has('John') // false

Un cas d'utilisation typique est la création d'une fonction pour dédupliquer des valeurs dans un tableaux.

function dedup (items) {
  return Array.from(new Set(items))
}

Tableau ou Set ?

Avec ce nouvel objet on peut se demander quand préférer un Set et un tableau.

• Tableau, quand un élément peut être en double et que l'ordre des éléments dans le tableau est important (si on veut récupérer le nième élément par exemple)
• Set, quand on ne veut pas d'élément en double et que l'on a besoin de vérifier souvent si un élément existe à l'intérieur.

En plus de ces raisons, les Set vont recevoir de nouvelles méthodes qui permettent de gérer les intersections / différences entre plusieurs Set ce qui peut permettre de résoudre des problèmes plus complexes.

Map

Un Map est une collection de paires clé-valeur où les clés peuvent être de n'importe quel type, y compris des objets. Contrairement aux objets classiques où les clés doivent être des chaînes de caractères.

let myMap = new Map();

const persons = [
    {name: 'John Doe', age: 18},
    {name: 'Jane Doe', age: 28},
    {name: 'Henry Doe', age: 32},
]

const scoreMap = new Map()
scoreMap.set(persons[0], 15)
scoreMap.set(persons[1], 12)

// Je veux la note de la 2ème personne
scoreMap.get(persons[1]) // 12

Dans le cas de code JavaScript côté navigateur une Map est un bon moyen pour stocker la relation entre un objet et un élément dans le DOM pour pouvoir le retrouver plus facilement.