Spread & Rest — JavaScript

Tiga titik ... di JavaScript itu kayak Swiss Army knife — operator simpel yang bisa ngerjain dua hal kebalikan: nyebarin isi, atau ngumpulin item. Spread…

Tiga titik ... di JavaScript punya dua tugas yang berlawanan. Spread membuka isi array atau object jadi bagian-bagian terpisah, sedangkan rest mengumpulkan beberapa nilai jadi satu array. Tugas mana yang jalan ditentukan oleh posisi titik tiganya.

🧪 Tebakan cepat: ["mangga", fruits, "anggur"] dan ["mangga", ...fruits, "anggur"], kalau fruits berisi dua buah, mana yang panjangnya 4? Tebak dulu, jawabannya ada di bagian "Spread: buka isi array".

Spread: buka isi array

const fruits = ["apel", "jeruk"];
const all = ["mangga", ...fruits, "anggur"];

console.log(all);        // ["mangga", "apel", "jeruk", "anggur"]
console.log(all.length); // 4

...fruits di dalam [ ] membuka isi fruits tepat di posisinya, satu per satu.
Tanpa titik tiga, ["mangga", fruits, "anggur"] cuma berisi 3 item, dan item keduanya adalah array fruits utuh: array di dalam array. Jadi yang panjangnya 4 adalah versi dengan titik tiga.
fruits sendiri gak berubah, karena spread selalu bikin array baru.

Dua array digabung dengan cara yang sama: [...[1, 2], ...[3, 4]] menghasilkan [1, 2, 3, 4]. Teks juga bisa dibuka: [..."halo"] menghasilkan ["h", "a", "l", "o"].

Spread di object: salin, lalu timpa

const base = { nama: "Budi", umur: 17 };
const full = { ...base, jurusan: "IPA", umur: 18 };

console.log(full);      // { nama: "Budi", umur: 18, jurusan: "IPA" }
console.log(base.umur); // 17

...base menyalin tiap properti base ke object baru.
Properti ditulis dari kiri ke kanan. Kalau ada key yang sama, yang ditulis belakangan menang, jadi umur: 18 menimpa 17 dari base.
base sendiri gak berubah.

Rest: kumpulkan sisanya jadi array

function total(first, ...rest) {
  console.log(first); // 1
  console.log(rest);  // [2, 3, 4]
}

total(1, 2, 3, 4);

...rest di daftar parameter mengumpulkan semua argumen sesudah first jadi satu array.
Kalau gak ada sisa, rest tetap array, cuma kosong: [].
Rest harus jadi parameter terakhir.

Karena rest selalu array, semua alat array bisa dipakai. reduce melipat isinya jadi satu nilai: mulai dari 0, tiap putaran menambahkan n ke total:

function rataRata(...nilai) {
  const jumlah = nilai.reduce((total, n) => total + n, 0);
  return jumlah / nilai.length;
}

console.log(rataRata(80, 90, 100)); // 90

Rest juga dipakai waktu membongkar array: const [pertama, ...sisanya] = [1, 2, 3, 4] bikin pertama berisi 1 dan sisanya berisi [2, 3, 4].

Spread atau rest? Lihat posisinya

Di tempat nilai dipakai, yaitu di dalam [ ], { }, atau argumen pemanggilan seperti Math.max(...angka), titik tiga membuka: itu spread.
Di tempat nilai diterima, yaitu parameter fungsi atau sisi kiri =, titik tiga mengumpulkan: itu rest.

⚠️ Jebakan yang sering ketemu

Lupa titik tiga waktu menggabung. [a, b] bikin array berisi dua array, [[1, 2], [3, 4]]. Tulis [...a, ...b].
Rest bukan parameter terakhir. function f(...sisa, akhir) bikin SyntaxError.
reduce tanpa nilai awal. [].reduce((t, n) => t + n) bikin TypeError, karena array kosong gak punya isi buat dijadikan awalan. Tambah , 0 di akhir.

TL;DR: ... punya dua tugas. Di tempat nilai dipakai, dia spread: membuka isi array ([...a, ...b]), teks ([..."halo"]), atau object ({ ...base, umur: 18 }, yang belakangan menang). Di tempat nilai diterima, dia rest: mengumpulkan sisa argumen jadi array (function f(first, ...rest)), dan harus jadi parameter terakhir. Spread selalu bikin array atau object baru, aslinya gak berubah.