Javascript - Cara Clone Object

Halo semuanya, di postingan kali ini, kita akan bahas seputar tentang variabel Object yang ada di Javascript. Khususnya tentang cara melakukan duplikasi atau cloning variabel Object ke variabel lainnya. 

Berbeda dengan pada PHP, pendeklarasian Object pada Javascript sangatlah mudah. Cara pendeklarasiannya bisa dilihat di contoh berikut.

var data = {

    namaDepan: 'Fun',

    namaBelakang: 'Share'

}

Snippet coding diatas merupakan pendeklarasian variabel data berupa object yang memiliki property namaDepan dan namaBelakang dengan nilai yaitu Fun dan Share.

 

Berbeda dengan tipe data lainnya, ketika variabel bertipe data object di copy ke variabel lain, yang tercopy adalah reference nya, bukan nilainya. Hal ini tentunya menimbulkan masalah ketika kita hendak memodifikasi variabel tersebut. Langsung aja ke contohnya biar ga bingung.

var data = {

    namaDepan: 'Fun',

    namaBelakang: 'Share'

}

console.log('Data: ' + JSON.stringify(data))

var dataBaru = data

dataBaru.namaDepan = 'Funtastic'

console.log('Data: ' + JSON.stringify(data))

console.log('DataBaru: ' + JSON.stringify(dataBaru))

Dari snippet diatas, jika dijalankan akan mendapatkan hasil:

Data: {"namaDepan":"Fun","namaBelakang":"Share"}
Data: {"namaDepan":"Funtastic","namaBelakang":"Share"}
DataBaru: {"namaDepan":"Funtastic","namaBelakang":"Share"}

Berdasarkan contoh di atas, ketika kita mengganti variabel dataBaru, maka nilai yang ada di variabel data ikut termodifikasi. Hal ini disebabkan karena dataBaru mengcopy reference data. 

 

Agar kita bisa mengclone nilai dari satu variabel object ke variabel lainnya, terdapat 3 cara (berdasarkan referensi link ini), yaitu: menggunakan spread, menggunakan Object.assign, atau menggunakan JSON.parse. Sebagai contohnya, bisa dilihat di bawah ini.

// Menggunakan spread

var dataBaru = {...data}

// Menggunakan Object.assign

var dataBaru = Object.assign({}, data)

// Menggunakan JSON.parse

var dataBaru = JSON.parse(JSON.stringify(data))

Dengan menggunakan salah satu dari ketiga cara di atas, hasil keluaran yang dihasilkan akan sesuai dengan ekspektasi kita, yaitu:

Data: {"namaDepan":"Fun","namaBelakang":"Share"}
Data: {"namaDepan":"Fun","namaBelakang":"Share"}
DataBaru: {"namaDepan":"Funtastic","namaBelakang":"Share"}

Perlu diperhatikan lagi, cara dengan menggunakan spread dan Object.assign hanya berlaku pada variabel bertipe data Object biasa. Jika pada object tersebut terdapat object atau array lainnya, maka object atau array tersebut akan mengcopy referencenya saja. Untuk menangani hal ini, kita perlu menggunakan cara JSON.parse pada variabel dengan nested object.

var data = {

    nama: {

        depan: 'Fun',

        belakang: 'Share'

    },

    deskripsi: 'Clone object'

}

console.log('Data: ' + JSON.stringify(data));

// Pilih salah satu

var dataBaru = {...data}                           // Menggunakan spread

// var dataBaru = Object.assign({}, data)          // Menggunakan Object.assign

// var dataBaru = JSON.parse(JSON.stringify(data)) // Menggunakan JSON.parse

dataBaru.nama.depan = 'Funtastic';

dataBaru.deskripsi = '';

console.log('Data: ' + JSON.stringify(data));

console.log('DataBaru: ' + JSON.stringify(dataBaru));

Hasil keluaran dari coding di atas jika menggunakan spread dan Object.assign akan bernilai:

Data: {"nama":{"depan":"Fun","belakang":"Share"},"deskripsi":"Clone object"}
Data: {"nama":{"depan":"Funtastic","belakang":"Share"},"deskripsi":"Clone object"}
DataBaru: {"nama":{"depan":"Funtastic","belakang":"Share"},"deskripsi":""}

Sedangkan jika kita menggunakan JSON.parse, maka hasilnya akan sesuai dengan ekspektasi, yaitu:

Data: {"nama":{"depan":"Fun","belakang":"Share"},"deskripsi":"Clone object"}
Data: {"nama":{"depan":"Fun","belakang":"Share"},"deskripsi":"Clone object"}
DataBaru: {"nama":{"depan":"Funtastic","belakang":"Share"},"deskripsi":""}

Kesimpulannya, untuk lebih mantep dan yakin, kita bisa menggunakan cara JSON.parse untuk melakukan copy atau cloning variabel Object, tanpa perlu memikirkan isi dari variabel tersebut.

Sekian postingan kali ini. Semoga membantu bagi kalian yang lagi kebingungan kenapa variabel object kalian ikut termodifikasi. Selamat membaca dan mencoba.

Salam Share,

Funtastic Share