ES2015 memperkenalkan cara baru untuk memanipulasi array atau object menggunakan spread operators. Spread operator menjadikan syntax menjadi lebih clean, dinamis dan menyenangkan.

Penggunaan spread operator memakai simbol tiga dot atau titik (…). Coba kita lihat dan praktekkan beberapa penggunaan spread operators di bawah ini :

1.Sebagai Pengganti Prototype.function.apply

function addition(x, y, z) {
  console.log(x + y + z);  // output : 6
}
var numbers = [1, 2, 3];
//old way
/**
* memecah satu per satu nilai dari array untuk diparsing menjadi param function
**/
//addition(numbers[1], numbers[2], numbers[3]);
/**
* menggunakan Function.prototype.apply
**/
//addition.apply(null, args) ;
//new way
/**
* menggunakan spread operators
**/
addition(...numbers);

Dengan spread operators, kita bisa secara otomatis memecah nilai sebuah array menjadi argumen yang dimasukkan ke dalam parameter dari function tersebut. dari contoh di atas. sebuah array dengan nilai integer 1,2,3 akan secara otomatis diparsing menjadi parameter x,y,z pada function addition yang selanjutnya dijumlahkan dengan hasil nya adalah 6.

function checkLength(...numbers) {
  console.log(numbers.length)
}
checkLength(3,6,9,12); //output : 4

Berbeda dengan sebelumnya yang memecah nilai array menjadi argumen-argumen, pada contoh ini dari beberapa nilai yang diparsing sebagai argumen pada function checkLength akan secara otomatis berubah menjadi satu nilai array karena pada function checkLength kita menggunakan spread operators utk mendefinisikan parameternya. jadi dari kode di atas akan menghasilkan output 4 karena terdapat 4 angka yaitu 3,6,9 dan 12.

2.Kombinasi Array

Memasukkan array ke dalam array lain

var  a = ["banana","cherry"];
var fruits = ["apple",...a,"durian"];
console.log(fruits); // output : ["apple","banana","cherry","durian"]

Mengcopy array

var a = [1, 2, 3];
var b = [...arr];
b.push(4);
console.log(b); // output : [1,2,3,4];

Menggabungkan 2 array

var a = [1,2,3];
var b = [4,5,6];
var c = [...a, ...b];
console.log(c); // output : [1,2,3,4,5,6]

3.Kombinasi Objek

Mengcopy/mengclone objek

var myObj = {id: 1,name:"Budi"};
var myIdentity = {...myObj};
console.log(myIdentity); //output : {id: 1, name: "Budi"};

Menggabungkan objek

var obj1 = {grade: "C", pass : false};
var obj2 = {grade: "A", pass: true, cumlaude: true};
var mergedObj = {...obj1,...obj2};
console.log(mergedObj); // output : {grade: "A", pass: true, cumlaude: true}

pada penggabungan 2 objek, jika ada key yang sama, maka value dari key tersebut akan diambil dari objek yang terakhir.

Semoga bermanfaat ulasan tentang Spread operators di atas. happy coding :)

Referensi : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator