…, ou Property spread notation

Que fait ... ?comme dans l’assignement déstructurant

Apparu dans ES2018 (ECMAScript 2018) À savoir : javascript assigne par référence, et non par valeur.

Exemple 1

Ce qui signifie que lorsqu’on fait

let arr = ["a", "b", "c"];
let arr2 = arr;

arr2.push("d");

console.log(arr)
// Array(4) [ "a", "b", "c", "d" ]

modifier arr et arr2 revient au même : arr2 fait référence à arr, et sont donc liés.

Dans ce contexte, l’usage de ... devient plus clair

let arr = ["a", "b", "c"];
let arr2 = [...arr]; // dans les crochets, on copie "l'intérieur" de arr

arr2.push("d");

console.log(arr)
// Array(3) [ "a", "b", "c" ]

... assigne la valeur de arr à arr2, et non sa référence

Autre exemple, avec React :

<Modal {...this.props} title='Modal heading' animation={false}>

revient à écrire

<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>

Autre exemple

const buttons = document.querySelectorAll('.button'); // renvoie un tableau d'éléments 

[...buttons].forEach(button => { // on rentre dans le tableau avec ... et forEach
	button.addEventListener('click', doSomething);
});