Spread vs Rest - JavaScript

Spread dan Rest adalah 2 fungsi dalam JavaScript yang digunakan untuk menyimpan atau memisah nilai sebuah array ataupun object. Kedua fungsi ini menggunakan tanda titik tiga (…) tapi berbeda penempatannya. Daripada bingung hanya berteori, langsung ke contoh aplikasi saja.

Spread

Spread operator dipakai untuk memisah nilai iterable. Iterable itu sendiri adalah sebuah object yang bisa di-iterasi menggunakan metode perulangan for…of contohnya adalah array, string, map, set TIDAK TERMASUK object. Bingung kan ? Sama, sampai disini telan saja dulu mentah-mentah, awalnya saya juga bingung. Spread operator tidak menciptakan variabel baru.

const arr = [2,5,6,7,8,9,11,34,56];
const newArr = [1,3,...arr];
console.log(newArr);
console.log(...newArr);
for (const i of newArr) {
 console.log(i);
}

Apa bedanya hasil console.log pada baris nomor 3 dan 4 ? Pada baris nomor 3 outputnya berupa array, pada baris nomor 4 nilainya dikeluarkan masing-masing, hasil yang sama bisa diperoleh dengan menggunakan perulangan for…of.

Penggunaan untuk meng-copy array:

const newNum = [...arr];
console.log(newNum);

Menggabungkan isi array:

const join = [...arr,...newArr];
console.log(join);

Mengambil elemen pada iterable:

const str = 'Wawan';
const letter = [...str,'','.ST'];
console.log(letter);

Penggunaan pada object:

const siswa = {
 nama: 'Royce Gracie',
 alamat: 'Sao Paulo Brazil'
};
const newSiswa = {
 ...siswa,
 namaAyah: 'Carlo Gracie',
 namaIbu: 'Maria Mercedes'
};
console.log(newSiswa);

Bagaimana jika spread operator digunakan untuk object ?

console.log(...newSiswa);

Sesuai dengan yang saya singgung diatas, spread operator tidak bisa diaplikasikan untuk object.

Rest

Rest operator dipakai untuk menyimpan nilai sebuah variable ke dalam suatu array. Rest operator harus ditempatkan di statement paling akhir.
Contoh penggunaan dalam array:

const [k,l,...lain] = [1,2,3,4,5,6,7,8,9];
console.log(lain);

Penggunaan pada object, sebelumnya kita tambahkan dulu property dan value pada object siswa diatas.

siswa.makanan = {
 senin: 'rendang',
 selasa: 'pecel',
 rabu: 'spaghetti',
};
const {...bekalSekolah} = siswa.makanan;
console.log(bekalSekolah);

Penggunaan untuk fungsi:

const faktor = function(...numbers) {
 console.log(numbers);
 let acc = 1;
 for (let i=0; i<numbers.length; i++) acc*=numbers[i];
 console.log(acc);
};
faktor(2,3,4);
const ab = [2,3,4];
faktor(...ab);