Spread vs Rest - JavaScript
Published: 2024-01-20 05:25:50

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.

```javascript
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);
}
```

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7z1fgisenec82vyekxyj.png)

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:

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

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0gfydn0vq8h9ki9gt5lq.png)

Menggabungkan isi array:

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/292rwozh379ctidle3gv.png)

Mengambil elemen pada iterable:

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

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9aff7xmh74ek7jpr5csp.png)

Penggunaan pada object:

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

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sgfpzkgzwj89jfg7may3.png)

Bagaimana jika spread operator digunakan untuk object ?

```javascript
console.log(...newSiswa);
```

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htv0mh6nlxyp36bjiw2r.png)

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:

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

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qf7l6dlpfawcy6f6md5.png)

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

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

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dr2c3rcbckrog23g1lou.png)

Penggunaan untuk fungsi:

```javascript
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);
```

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xu1ea83g4rh5lf003ocr.png)