Object Spread di JavaScript: Clone, Merge, dan Override

Spread membentangkan object ke object lain

Sintaks object spread, yaitu tiga titik di depan sebuah object, menyalin property enumerable milik object itu sendiri ke object literal di sekitarnya. Inilah jalan terpendek untuk clone, merge, dan membuat salinan yang sudah diubah tanpa menyentuh object aslinya.

const user = { name: "Rosa", role: "admin" };
const copy = { ...user };

console.log(copy);
console.log(copy === user);

copy punya key dan nilai yang sama seperti user, tapi ia object yang berbeda. Mengubah salah satunya tidak memengaruhi yang lain, setidaknya di tingkat atas. Kita akan kembali ke catatan ini sebentar lagi.

Cara memikirkannya: { ...obj } berarti "tuangkan property obj ke object literal baru ini." Apa pun yang kamu tulis di samping spread ikut menjadi bagian dari hasilnya.

Clone dan override dalam satu langkah

Pola yang paling umum adalah melakukan spread pada sebuah object, lalu menambahkan atau menimpa beberapa property. Key yang ditulis belakangan yang menang, jadi tulis spread lebih dulu dan override sesudahnya:

const user = { name: "Rosa", role: "admin", active: true };

const updated = { ...user, role: "editor" };

console.log(user.role);
console.log(updated.role);

user tidak tersentuh. updated adalah object baru dengan role yang sudah diganti. Pola update immutable ini muncul di mana-mana dalam JavaScript modern: state updater di React, reducer di Redux, dan kode apa pun yang lebih suka tidak mengubah data di tempat.

Balik urutannya, dan kamu mendapat perilaku sebaliknya:

const user = { name: "Rosa", role: "admin" };

const withDefault = { role: "guest", ...user };

console.log(withDefault.role);

Di sini role: "guest" ditulis lebih dulu, jadi user.role menimpanya. Ini berguna saat kamu ingin nilai default yang bisa ditimpa oleh object yang di-spread.

Menggabungkan object

Spread dua object (atau lebih) ke literal baru untuk menggabungkannya. Kalau ada key yang bentrok, object yang belakangan menimpa object sebelumnya:

const defaults = { theme: "light", fontSize: 14, debug: false };
const userPrefs = { theme: "dark", fontSize: 16 };

const settings = { ...defaults, ...userPrefs };

console.log(settings);

theme dan fontSize berasal dari userPrefs; debug lolos dari defaults. Tiga object? Empat? Aturannya sama: baca dari kiri ke kanan, tulisan terakhir yang menang.

Ini pengganti modern untuk Object.assign({}, defaults, userPrefs). Keduanya melakukan hal yang sama, tapi versi spread lebih mudah dibaca dan tidak menggoda kamu ke bug umum menulis Object.assign(defaults, userPrefs), yang mengubah defaults.

Spread adalah shallow copy

Bagian inilah yang sering menjebak orang. Spread menyalin property tingkat atas dari sebuah object. Kalau nilai sebuah property juga berupa object atau array, yang disalin adalah referensinya, bukan isinya.

const user = {
  name: "Rosa",
  address: { city: "Lisbon", zip: "1100" }
};

const copy = { ...user };

copy.address.city = "Porto";

console.log(user.address.city);
console.log(copy.address.city);

Mengubah copy.address.city ikut mengubah user.address.city, karena kedua object memakai object address yang sama. Spread hanya memberi kita pembungkus luar yang baru.

Kalau kamu perlu mengubah sesuatu yang bersarang, lakukan spread pada setiap tingkat yang ingin kamu ubah:

const user = {
  name: "Rosa",
  address: { city: "Lisbon", zip: "1100" }
};

const updated = {
  ...user,
  address: { ...user.address, city: "Porto" }
};

console.log(user.address.city);
console.log(updated.address.city);

Untuk deep clone sungguhan dari data apa pun, pakai structuredClone(obj). Fungsi ini menangani object bersarang, array, tanggal, map, dan set, dan sudah tersedia di setiap runtime modern.

Spread vs. rest

Keduanya memakai tiga titik yang sama, tapi melakukan hal yang berlawanan. Spread membentangkan; rest mengumpulkan.

const user = { name: "Rosa", role: "admin", active: true };

// Rest: collect leftover properties into a new object.
const { name, ...others } = user;
console.log(name);
console.log(others);

// Spread: pour properties into a new literal.
const clone = { ...others, name };
console.log(clone);

Patokannya: kalau ... ada di sisi kiri = (destructuring), itu rest. Kalau ada di dalam object atau array literal di sisi kanan, itu spread.

Menghapus property secara immutable

Menggabungkan rest destructuring dengan spread memberi cara yang rapi untuk membuat salinan object dengan satu key dihapus, tanpa delete dan tanpa mutasi:

const user = { name: "Rosa", role: "admin", tempToken: "abc123" };

const { tempToken, ...safe } = user;

console.log(safe);
console.log(user.tempToken);

tempToken ditarik keluar ke variabelnya sendiri (yang kamu abaikan), dan sisanya masuk ke safe. user yang asli tidak tersentuh.

Yang tidak disalin oleh spread

Beberapa detail halus yang perlu kamu tahu:

• Property non-enumerable tidak disalin. Sebagian besar property yang kamu buat bersifat enumerable secara default, tapi property yang didefinisikan dengan Object.defineProperty dan beberapa bawaan tidak.
• Prototype tidak disalin. { ...instance } memberimu object biasa, bukan instance dari class aslinya. Method yang didefinisikan di prototype class tidak akan ada di salinannya.
• Getter dievaluasi. Melakukan spread pada object yang punya getter akan memanggil getter itu sekali dan menyimpan nilai kembaliannya sebagai property biasa di object baru.

class Point {
  constructor(x, y) { this.x = x; this.y = y; }
  distance() { return Math.hypot(this.x, this.y); }
}

const p = new Point(3, 4);
const copy = { ...p };

console.log(copy.x, copy.y);
console.log(copy instanceof Point);
console.log(typeof copy.distance);

copy punya x dan y, tapi ia object biasa: distance tinggal di Point.prototype, yang tidak disentuh oleh spread. Kalau kamu perlu clone instance sebuah class, biasanya class itu harus menyediakan method clone sendiri.

Berikutnya: method array

Spread adalah satu bagian dari perkakas data immutable. Bagian besar lainnya adalah method array, seperti map, filter, reduce, dan kawan-kawannya, yang menghasilkan array baru alih-alih mengubah array aslinya. Itulah halaman berikutnya.