Menggabungkan Objek di JavaScript: Object.assign vs Spread

Menggabungkan dua objek di JavaScript sering muncul saat mengolah respons API, menggabungkan data form, atau memperbarui state aplikasi. Ada dua cara utama yang biasa dipakai: Object.assign dan spread operator (...). Keduanya menghasilkan objek gabungan, tetapi perilakunya berbeda pada kasus tertentu.

Object.assign: menggabungkan ke objek target

Metode Object.assign(target, ...sources) menyalin properti dari satu atau lebih objek sumber ke objek target. Objek target ikut berubah dan dikembalikan oleh metode ini.

const user = { name: 'Budi', age: 28 };
const address = { city: 'Bandung', zip: '40123' };

const merged = Object.assign({}, user, address);
console.log(merged);
// { name: 'Budi', age: 28, city: 'Bandung', zip: '40123' }
console.log(user); // tetap { name: 'Budi', age: 28 }

Memberi {} sebagai argumen pertama penting agar objek asli tidak berubah. Tanpa itu, Object.assign(user, address) akan menimpa user secara langsung.

Spread operator: menyalin properti ke objek baru

Spread operator menyebarkan properti dari objek sumber ke dalam objek literal baru. Hasilnya selalu objek baru, dan objek asli tidak tersentuh.

const user = { name: 'Budi', age: 28 };
const address = { city: 'Bandung', zip: '40123' };

const merged = { ...user, ...address };
console.log(merged);
// { name: 'Budi', age: 28, city: 'Bandung', zip: '40123' }

Karena tidak memerlukan argumen target, spread sering dianggap lebih ringkas. Namun, spread hanya bekerja pada objek literal dan tidak bisa dipakai untuk menyalin ke objek yang sudah ada.

Perbedaan kunci yang perlu diketahui

Meskipun hasil akhirnya sering sama, ada beberapa perbedaan yang memengaruhi pilihan Anda.

• Mutasi objek target: Object.assign mengubah argumen pertama, sedangkan spread selalu membuat objek baru.
• Properti dengan nama sama: properti dari sumber terakhir akan menimpa sumber sebelumnya. Urutan argumen menentukan nilai akhir.
• Simbol dan getter: keduanya menyalin properti simbol dan getter, tetapi spread menyalin nilai getter saat itu juga, sedangkan Object.assign mempertahankan referensi getter.
• Dukungan browser: Object.assign tersedia sejak ES2015 dan lebih luas di lingkungan lama. Spread untuk objek baru didukung penuh di ES2018.

Kapan memakai Object.assign?

Gunakan Object.assign ketika Anda perlu menggabungkan properti ke objek yang sudah ada, misalnya menambahkan konfigurasi default ke objek opsi.

const defaultOptions = { theme: 'light', lang: 'id' };
const userOptions = { theme: 'dark' };

const finalOptions = Object.assign({}, defaultOptions, userOptions);
// { theme: 'dark', lang: 'id' }

Pola ini umum di pustaka JavaScript yang menerima objek opsi dari pengguna.

Kapan memakai spread operator?

Spread lebih nyaman ketika Anda ingin membuat objek baru tanpa mengubah sumbernya, seperti saat memperbarui state di aplikasi berbasis komponen.

const state = { count: 0, user: 'Budi' };
const newState = { ...state, count: state.count + 1 };
// { count: 1, user: 'Budi' }

Spread juga berguna saat menggabungkan banyak objek sekaligus dengan sintaks yang ringkas.

Contoh kasus: menggabungkan data dari API

Misalnya Anda menerima dua respons API yang perlu digabung menjadi satu objek profil pengguna. Anda bisa memilih salah satu metode sesuai kebutuhan.

const profile = { id: 1, name: 'Budi' };
const contact = { email: '[email protected]', phone: '08123456789' };

// Dengan Object.assign
const mergedProfile = Object.assign({}, profile, contact);

// Dengan spread
const mergedProfile2 = { ...profile, ...contact };

Jika data ini nantinya disimpan ke penyimpanan lokal, pertimbangkan juga format yang sesuai. Baca panduan memilih antara localStorage, sessionStorage, dan cookie untuk menentukan tempat penyimpanan yang tepat.

Ringkasan

Object.assign cocok untuk menggabungkan ke objek yang sudah ada dan mengubahnya, sedangkan spread operator lebih aman untuk membuat objek baru tanpa efek samping. Pilih berdasarkan apakah Anda perlu memutasi objek target atau tidak. Keduanya sama-sama berguna, dan pemahaman tentang urutan properti akan membantu menghindari bug saat menggabungkan objek.

Pertanyaan yang Sering Diajukan

Apakah spread operator bisa menggantikan Object.assign sepenuhnya?

Tidak selalu. Spread tidak bisa menyalin ke objek target yang sudah ada, sehingga Object.assign masih diperlukan untuk kasus seperti itu.

Bagaimana jika ada properti dengan nama yang sama?

Properti dari sumber terakhir akan menimpa properti sebelumnya. Urutan argumen menentukan nilai akhir.

Apakah penggabungan objek memengaruhi objek asli?

Tergantung metode. Object.assign mengubah argumen pertama jika bukan objek kosong, sedangkan spread selalu membuat objek baru tanpa mengubah sumber.