Manipuler des objets avec le spread operator

E.S.6 E.S.2.0.1.5 ?

Avant de rentrer dans le vif du sujet, sachez que les spread operator ont vu le jour avec la version ES6 en 2015. C’est d’ailleurs pour cette raison que vous verrez souvent le ES6 sous le nom de ES2015. ES6 et ES2015, c’est la même chose. Je vais certes parler des spread operator avec les objets, mais sachez que ça existe aussi pour les tableaux et les chaines de charactères. En clair, on peut utiliser les spread operator sur tout ce qui est itérable.

Ajouter une valeur dans un objet

Imaginons que nous avons un objet qui contient les caractéristiques d’un ordinateur et que plus tard, on veut un nouvel objet en prenant les valeurs existantes de l’ancien objet mais en y rajouter une valeur. Voici déjà l’objet :

const computer = {
    name : "My PC",
    year : 2018,
    processor : "i5 7600",
    ram : 8,
    graphic : "GTX 1060",
    hard : "SSD 256"
}

Ensuite, on veut créer un nouvel objet en prenant ces caractéristiques et en rajoutant une valeur.

const newComputer = {
    name : computer.name,
    year : computer.year,
    processor : computer.processor,
    ram : computer.ram,
    graphic : computer.graphic,
    hard : computer.hard,
    owner : "Djoher"
}

On a donc notre nouvel ordinateur avec les anciennes données de l’ancien ordinateur tout en lui ayant ajouté une valeur. Mais c’est un peu long non ? On aurait pu générer ça avec le prototypage qu’offre javascript, mais je ne pense pas que ça aurait été moins long. Maintenant, voyons ça avec le spread operator.

const computer = {
    name : "My PC",
    year : 2018,
    processor : "i5 7600",
    ram : 8,
    graphic : "GTX 1060",
    hard : "SSD 256"
}

const newComputer = {
    ...computer,
    owner : "Djoher"
}

Si on demande à notre console de nous afficher l’objet newComputer, voici ce qu’on obtient

newComputer {
  name: 'My PC',
  year: 2018,
  processor: 'i5 7600',
  ram: 8,
  graphic: 'GTX 1060',
  hard: 'SSD 256',
  owner: 'Djoher'
}

C’est magique non ? On vient d’économiser quelques lignes de code. Ce qui vient de se passer, c’est qu’on vient de décomposer tout simplement l’objet computer avec le spread operator.

Filtrer un objet

Maintenant que l’on sait comment créer un nouvel objet avec de nouvelles valeurs en se basant sur un ancien objet, on va maintenant voir comment récupérer les valeurs qu’on veut dans ce fameux objet computer. Notez que dans le titre, j’ai bien dit « filtrer » et non « supprimer » car on ne modifie rien dans le premier objet. Si, par exemple, vous ne voulez pas le nom et l’année de l’ordinateur, vous pouvez faire ça

const newComputer = {
    processor : computer.processor,
    ram : computer.ram,
    graphic : computer.graphic,
    hard : computer.hard
}

Encore une fois, en utilisant les spread operator, on peut faire plus simple :

const  {
    name,
    year,
    ...rest
} = computer

Ce qu’on fait ici, c’est de créer trois variables à partir de l’objet computer : name, year et le reste. Et justement, ce reste est l’équivalent de l’objet computer mais sans les valeurs name et year, vu qu’on les a isolés. Si on fait un log de rest dans notre console, on obtient

{ processor: 'i5 7600', ram: 8, graphic: 'GTX 1060', hard: 'SSD 256' }

Notez que j’ai utilisé le nom « rest » comme variable mais vous pouvez mettre ce que vous voulez. Rest, c’est juste une convention.

Et pour les objets dans des objets ?

Rien de plus simple, c’est presque la même chose. Pour vous montrer, je vais faire un nouvel exemple de l’objet computer

const computer = {
    data: {
        name: "My PC",
        year: 2018,
        processor: "i5 7600",
        ram: 8,
        graphic: "GTX 1060",
        hard: "SSD 256"
    }
}

Et pour créer un nouvel objet en y ajoutant une nouvelle valeur

const newComputer = {
    ...computer, 
    data : {
        ...computer.data,
        owner : "Djoher"
    }
}

Fusionnons les valeurs

Maintenant qu’on sait ajouter des valeurs et ne prendre que les valeurs qui nous intéresse, voyons voir comme on va faire pour faire la fusion de valeur. On va laisser tomber l’exemple des ordinateurs et revenir vers quelque chose de plus simple.

La ville et le numéro de téléphone seront absents, mais on peut faire en sorte qu’ils soient présents dans le nouvel objet.

const obj1 = {
    name : "Djoher",
    age : 35,
    city : null,
    telephone : null
}
const obj2 = {
    city : "paris",
    telephone : 123456
}

const obj3 = {
    ...obj1,
    ...obj2
}

Voici le résultat quand on log la variable obj3 dans la console :

{ name: 'Djoher', age: 35, city: 'paris', telephone: 123456}

Et voilà, on a la fusion des deux objets ! Mais une question se pose : comment sait-on si la bonne valeur est « null » ou « paris » pour la ville ? Et pour le numéro de téléphone ? En fait, c’est dans l’ordre qu’on a stipulé lors de la création de la variable obj3. Si on avait fait plutôt comme ça :

const obj3 = {
    ...obj2,
    ...obj1
}

On aurait eu ce résultat :

{ city: null, telephone: null, name: 'Djoher', age: 35 }

Voilà, nous avons maintenant vu comment manipuler les spread operator pour les objets. En ce qui concerne les tableaux ou les chaines de charactères, vous verrez que ce n’est pas si différent.