Spread Syntax — Copy, Gabung, dan Override Settings

Gabungkan daftar produk yang ada stok dengan daftar yang backorder jadi 1. Lapiskan hanya field yang diubah user di atas default settings. Dalam kasus seperti ini, kamu membangun array atau object baru dengan isinya tertata, sambil membiarkan data aslinya persis seperti semula.

Artikel ini membahas spread syntax untuk itu, dan value mana yang menang saat key yang sama muncul dua kali.

Menata Isi di Tempat — Spread Syntax

Mau menggabungkan daftar produk yang ada stok dengan daftar yang backorder jadi 1? Tambahkan satu per satu dengan push, dan array aslinya jadi ditulis ulang. Ini kasus di mana kamu mau membangun array baru dengan isinya tertata, sambil membiarkan daftar aslinya persis seperti semula.

Spread syntax (menulis ... sebelum sebuah value untuk menata isi array atau object di tempat) membiarkanmu menulis const allItems = [...inStock, ...backOrder]; untuk membangun array gabungan baru. Tulis cuma satu, seperti [...inStock], dan itu jadi copy — array terpisah dengan isi yang sama.

Object bekerja dengan cara yang sama, memakai { ...product }. Perhatikan ini cuma copy di level pertama — perilaku saat ada object atau array nested di dalamnya dibahas di artikel reference dan copying.

... berperan berbeda tergantung di mana kamu menulisnya. Di sisi kiri =, itu rest, membundel sisanya. Di dalam [] atau {} di sisi kanan, itu spread, menata isi. Simbolnya sama, tapi bundling dan spreading berjalan ke arah yang berlawanan.

const inStock = ["Wireless Mouse", "USB-C Hub"];
const backOrder = ["Monitor Arm"];

// Bangun array baru menata keduanya
const allItems = [...inStock, ...backOrder];
console.log(allItems.join(", "));   // Wireless Mouse, USB-C Hub, Monitor Arm

// Array aslinya tidak tersentuh
console.log(inStock.length);        // 2

// Kamu bisa mencampur value tunggal di tengah
const featured = ["This Week's Pick", ...inStock];
console.log(featured.length);       // 3

// Object bisa di-copy dengan cara yang sama
const product = { name: "USB-C Hub", price: 2480 };
const copied = { ...product };
console.log(copied.price);          // 2480

Bangun array tampilan dari 2 array — yang ada stok dan yang backorder. inStock dan backOrder sudah dideklarasikan.

① Bangun array baru menggabungkan keduanya, dan tampilkan digabung dengan ", ".

② Tampilkan jumlah array gabungannya.

③ Bangun array yang menambahkan "New Arrival" di depan array gabungan, dan tampilkan 2 item pertamanya digabung dengan ", ".

④ Bangun array baru yang meng-copy array yang ada stok, dan tampilkan jumlahnya.

(Kalau berjalan dengan benar, penjelasan akan muncul.)

Tulis ulang array atau object hasil copy dan lihat apa yang terjadi pada aslinya. inStock dan product sudah dideklarasikan.

① Bangun copy dari inStock, tambah "HDMI Cable" padanya, dan tampilkan jumlahnya.

② Tampilkan jumlah inStock aslinya.

③ Bangun copy dari product, ganti harganya jadi 1980, dan tampilkan.

④ Tampilkan harga product aslinya.

Melapisi Settings — yang Belakangan Menang

Settings sebuah app kadang disiapkan dengan 1 set default lengkap, lalu cuma field yang diubah user yang di-override. Cek dan assign tiap field yang berubah satu per satu, meski begitu, dan kamu perlu menambah kode tiap kali ada setting baru muncul.

Susun dua object spread, seperti { ...defaultSettings, ...userSettings }, dan key yang sama akan ditimpa dengan value mana pun yang ditulis belakangan. Key yang belum ditentukan user tetap di default-nya.

Urutan kamu menulisnya langsung jadi prioritasnya, jadi taruh default-nya dulu dan yang mau kamu prioritaskan setelahnya.

const defaultSettings = { theme: "light", itemsPerPage: 20, notifications: true };
const userSettings = { theme: "dark" };

const merged = { ...defaultSettings, ...userSettings };
console.log(merged.theme);           // dark (yang ditulis belakangan menang)
console.log(merged.itemsPerPage);    // 20 (hilang di sisi user, jadi default-nya tetap)

// Balik urutannya, dan default-nya yang menang sebagai gantinya
const reversed = { ...userSettings, ...defaultSettings };
console.log(reversed.theme);         // light

// Bahkan value undefined pun meng-override, selama key-nya ada di sisi belakangan
const partial = { theme: undefined };
const broken = { ...defaultSettings, ...partial };
console.log(broken.theme);           // undefined

Bahkan undefined pun Meng-override

Selama key-nya ada di sisi yang kamu lapiskan di atas, itu meng-override — bahkan kalau value-nya undefined. Lapiskan field kosong langsung dari form seperti ini di atas, dan default-nya hilang, digantikan undefined. Untuk field yang cuma mau kamu pakai saat memang punya value, cek satu per satu, seperti userSettings.theme ?? defaultSettings.theme.

Lapiskan perubahan user di atas default settings untuk membangun settings yang akan benar-benar kamu pakai. defaultSettings dan userSettings sudah dideklarasikan.

① Bangun object yang melapiskan settings user di atas default-nya, dan tampilkan apa adanya.

② Tampilkan theme dari hasil pelapisannya.

③ Bangun object dengan urutan pelapisan dibalik, dan tampilkan theme-nya.

④ Tampilkan apa yang terjadi pada setting notifications, yang tidak dipunyai sisi user, di hasil pelapisannya.