Program JavaScript untuk Mengkloning Objek JS

Objek JavaScript adalah tipe data kompleks yang dapat berisi berbagai tipe data. Sebagai contoh,

const person = {
    name: 'John',
    age: 21,
}

Sini, person adalah sebuah objek. Sekarang, Anda tidak dapat mengkloning objek dengan melakukan sesuatu seperti ini.

const copy = person;
console.log(copy); // {name: "John", age: 21}

Pada program di atas, copy variabel memiliki nilai yang sama dengan person obyek. Namun, jika Anda mengubah nilai file copy objek, nilai dalam person objek juga akan berubah. Sebagai contoh,

copy.name = 'Peter';
console.log(copy.name); // Peter
console.log(person.name); // Peter

Perubahan terlihat pada kedua benda karena benda adalah jenis referensi. Dan keduanya copy dan person menunjuk ke objek yang sama.


Contoh 1. Mengkloning Objek Menggunakan Object.assign ()

// program to clone the object

// declaring object
const person = {
    name: 'John',
    age: 21,
}

// cloning the object
const clonePerson = Object.assign({}, person);

console.log(clonePerson);

// changing the value of clonePerson
clonePerson.name = 'Peter';

console.log(clonePerson.name);
console.log(person.name);

Keluaran

{name: "John", age: 21}
Peter
John

Itu Object.assign() metode adalah bagian dari ES6 standar. Itu Object.assign() metode melakukan salin dalam dan menyalin semua properti dari satu atau lebih objek.

Catatan: kosong {} sebagai argumen pertama memastikan bahwa Anda tidak mengubah objek asli.


Contoh 2: Mengkloning Objek Menggunakan Sintaksis Spread

// program to clone the object
// declaring object
const person = {
    name: 'John',
    age: 21,
}

// cloning the object
const clonePerson = { ... person}

console.log(clonePerson);

// changing the value of clonePerson
clonePerson.name = 'Peter';

console.log(clonePerson.name);
console.log(person.name);

Keluaran

{name: "John", age: 21}
Peter
John

Sintaks penyebaran ... diperkenalkan di versi yang lebih baru (ES6).

Sintaks penyebaran dapat digunakan untuk membuat salinan objek yang dangkal. Artinya itu akan menyalin objek. Namun, objek yang lebih dalam dirujuk. Sebagai contoh,

const person = {
    name: 'John',
    age: 21,

    // the inner objects will change in the shallow copy
    marks: { math: 66, english: 73}
}

// cloning the object
const clonePerson = { ... person}

console.log(clonePerson); // {name: "John", age: 21, marks: {…}}

// changing the value of clonePerson
clonePerson.marks.math = 100;

console.log(clonePerson.marks.math); // 100
console.log(person.marks.math); // 100

Di sini, ketika nilai benda dalam math diubah menjadi 100 dari clonePerson objek, nilai math kunci dari person objek juga berubah.


Contoh 3: Menggandakan Objek Menggunakan JSON.parse ()

// program to clone the object
// declaring object
const person = {
    name: 'John',
    age: 21,
}

// cloning the object
const clonePerson = JSON.parse(JSON.stringify(person));

console.log(clonePerson);

// changing the value of clonePerson
clonePerson.name = 'Peter';

console.log(clonePerson.name);
console.log(person.name);

Keluaran

{name: "John", age: 21}
Peter
John

Pada program di atas, JSON.parse() metode yang digunakan untuk mengkloning suatu objek.

Catatan: JSON.parse() hanya bekerja dengan Number dan String objek literal. Ini tidak bekerja dengan objek literal dengan function atau symbol properti.