Pengantar Mutasi Objek dalam JavaScript – Beragampengetahuan

Dalam pemrograman, mutasi objek berarti bahwa keadaan atau data objek bermutasi setelah pembuatan. Dengan kata lain, operasi untuk mengubah properti objek di JavaScript disebut mutasi objek. Mutasi objek secara langsung mengubah nilai objek, membuatnya menantang, terutama dalam aplikasi di mana banyak operasi dapat dibaca atau ditulis ke objek pada saat yang sama.

Artikel ini membahas mutasi objek dalam JavaScript dan menggunakan contoh kode yang relevan bila perlu.

Tipe data dalam javascript

Jenis data mewakili jenis data yang dapat disimpan oleh variabel atau objek. JavaScript mendukung dua kategori tipe data yang berbeda: jenis asli dan yang ditentukan pengguna atau referensi.

Tipe data asli

Dalam JavaScript, semua tipe data primitif secara inheren tidak berubah, yaitu, Anda tidak dapat mengubahnya setelah Anda membuatnya. Contoh angka, boolean, string, bigints, tidak terdefinisi, kosong, simbol, dan objek adalah tipe primitif.

Tipe data yang ditentukan pengguna atau referensi

Jenis data yang ditentukan pengguna atau tipe data referensi adalah objek yang dibuat menggunakan tipe primitif atau kombinasi tipe primitif dan tipe yang ditentukan pengguna. Contoh khas jenis yang ditentukan pengguna atau referensi adalah objek dan array.

Cara mengalokasikan dan menugaskan kembali variabel dalam javascript

Saat Anda menetapkan variabel tipe asli ke variabel tipe asli, kedua variabel memiliki nilai yang sama, tetapi mereka disimpan di lokasi penyimpanan yang berbeda. Misalnya, misalkan Anda memiliki dua variabel varA Dan varB Anda kemudian menetapkan satu variabel ke yang lain dengan cara berikut:

var varA = 100; 

var varB = varA; 

console.log(varB);

Saat Anda menjalankan kode sebelumnya, angka 100 akan ditampilkan di konsol. Sekarang Anda mengubah nilai salah satu dari dua variabel (katakanlah varB) Seperti yang ditunjukkan di bawah ini.

var varA = 100; 

var varB = varA; 

varB = 500; 

console.log(varA);

Perhatikan nilai variabel varB Diubah menjadi 500. varAitu masih akan menampilkan 100. Ini karena variabel -variabel ini varA Dan varB Disimpan di dua lokasi memori yang berbeda. Karena itu, jika Anda mengubah salah satu dari mereka, nilai yang baru atau yang diubah tidak akan mencerminkan variabel lain.

Apa mutasi objek dalam javascript?

Dalam JavaScript, tipe data suatu objek dapat termasuk salah satu dari dua kategori ini: asli atau non-probabilitas. Meskipun tipe aslinya tidak berubah, yaitu Anda tidak dapat mengubahnya setelah dibuat, Anda dapat mengubah tipe non-primer, yaitu objek dan array. Objek selalu memungkinkan nilainya berubah. Oleh karena itu, Anda dapat mengubah status lapangan dari tipe yang dapat berubah tanpa membuat instance baru.

Mutasi objek dapat menyebabkan beberapa masalah, seperti berikut:

• Objek mutasi sering mengarah pada kondisi rasial karena masalah konkurensi dan keselamatan utas
• Mutasi memperkenalkan kompleksitas dalam kode sumber karena prediktabilitas dan masalah keamanan utas
• Mutasi sering menyebabkan kesalahan yang sulit diidentifikasi dalam kode sumber aplikasi
• Mutasi membuat kode pengujian dan debugging menjadi sulit, karena kode pelacakan yang mengeksploitasi mutasi menjadi tantangan

Contoh kode yang menunjukkan mutasi objek

Mutasi objek dapat terjadi dalam salah satu situasi berikut:

• Tambahkan, Edit atau Hapus Atribut
• Menggunakan metode yang dapat menunjukkan mutasi

Ketika Anda mengubah sifat objek secara langsung atau tidak langsung, Anda pada dasarnya bermutasi objek. Cuplikan kode berikut menunjukkan cara bermutasi objek dengan mengubah propertinya.

const author = { id: 1, name: "Joydip Kanjilal"}; 

author.id = 2; author.city = "Hyderabad, INDIA"; 

console.log(author);

Dalam kode sebelumnya, kami membuat objek yang disebut penulis, yang berisi dua properti, yaitu. id Dan name. Dan id Atribut digunakan untuk penyimpanan id Direkam oleh penulis name Nama toko properti penulis. Perhatikan bagaimana kami bermutasi objek penulis dengan mengubah nilai yang terkait dengan nilai itu id milik. Selanjutnya, kami menambahkan properti baru yang disebut City ke objek penulis dan menetapkan nilai ke properti.

Saat Anda menjalankan kode sebelumnya, properti objek penulis dan nilainya ditampilkan sebagai berikut:

{ name: 'Joydip Kanjilal', city: 'Hyderabad, INDIA' }

Ketika Anda meneruskan objek ke fungsi atau menetapkannya ke variabel di JavaScript, Anda sebenarnya memberikan referensi ke objek, bukan salinannya. Ini berarti bahwa setiap perubahan yang Anda buat ke objek baru yang dibuat dengan meneruskan objek atau menetapkannya ke variabel yang berlaku untuk semua referensi ke objek aktual.

Pertimbangkan kode berikut yang menunjukkan cara membuat objek di JavaScript dan kemudian menetapkannya ke variabel.

const objA = { id: 1, name: 'Joydip Kanjilal', 

city: 'Hyderabad, INDIA', pincode: 500089 } 

const objB = objA; 

objB.pincode = 500034; 

console.log(objA);

Dalam kode sebelumnya, objek objA Ditugaskan ke objBdan nilai atribut pincode objA Diubah, yaitu, objek objA Mutasi. Saat menjalankan program, data berikut akan ditampilkan.

{ id: 1, name: 'Joydip Kanjilal', city: 'Hyderabad, INDIA', pincode: 500034 }

Perhatikan bahwa nilai properti Pincode telah diubah.

Mencegah mutasi objek dalam javascript

Dalam JavaScript, Anda dapat mencegah mutasi dalam berbagai cara, seperti:

• Gunakan kloning objek untuk memanfaatkan Object.assign() Metode atau operator propagasi (…)
• menggunakan Object.seal() Metode untuk mencegah objek menambah atau menghapus sifat
• menggunakan Object.freeze() Metode untuk mencegah penambahan, mengedit atau menghapus sifat objek

Menggunakan klon

Lihat kode berikut yang menunjukkan cara mengkloning objek di JavaScript menggunakan operator propagasi.

let originalObj = { x: 10, y: 100 }; let clonedObj = { ...originalObj };

Di sini, nama objek yang dikloning adalah clonedObjitu sama dengan objek asli dengan namanya originalObj. Oleh karena itu, jika nilai -nilai dari dua properti dari kedua objek ini ditampilkan, hasilnya akan sama.

Sekarang, ubah nilai salah satu properti bernama Objek Kloned, clonedObj Seperti yang ditunjukkan di bawah ini, nilai yang Anda butuhkan ditunjukkan di bawah ini.

Sekarang, tulis kode berikut untuk menampilkan nilai atribut bernama x Terkait dengan dua objek originalObj Dan clonedObj.

console.log(originalObj.x); 

console.log(clonedObj.x);

Saat Anda menjalankan program, Anda akan mengamati nilai atribut x Tidak ada perubahan pada objek asli. Nilai -nilai ini akan ditampilkan pada konsol sebagai berikut:

Gunakan metode Object.freeze ()

ini Object.freeze() Metode dapat membuat objek tidak dapat diubah dengan mencegah perubahan apa pun pada sifatnya.

const author = { id: 1, name: "Joydip Kanjilal", 
city: "Hyderabad", state: "Telengana", 
country: "India", pincode: 500089};

Object.freeze(author);
author.city = "Bangalore";
author.state = "Karnataka";
author.pincode = 560010; 
console.log(author);

Saat Anda menjalankan kode sebelumnya, hasilnya akan mirip dengan ini:

{
  id: 1,
  name: 'Joydip Kanjilal',
  city: 'Hyderabad',
  state: 'Telangana',
  country: 'India',
  pincode: 500089
}

Seperti yang dapat Anda lihat dari output, tidak ada efek bahkan jika Anda telah menetapkan nilai ke kota properti dan negara bagian serta pincode. Oleh karena itu, tidak ada perubahan pada data yang terkandung dalam properti objek apa pun.

Gunakan metode objek.seal ()

Anda juga bisa menggunakan Object.seal() Cara untuk mencegah mutasi objek dalam JavaScript. Metode ini akan memungkinkan Anda untuk mengubah nilai properti yang ada, tetapi Anda tidak dapat memodifikasi atau menghapus properti objek apa pun. Contoh kode berikut menggambarkan ini:

const author = { id: 1, name: "Joydip Kanjilal", 
city: "Hyderabad", state: "Telangana", 
country: "India", pincode: 500089};

Object.seal(author);
author.city = "Bangalore";
author.state = "Karnataka";
author.pincode = 560005;
author.booksauthored = 3;
console.log(author);

Pada segmen kode sebelumnya, meskipun modifikasi akan diizinkan untuk dibuat ke atribut objek penulis yang disebutkan, penambahan dan penghapusan atribut objek tidak diizinkan. Saat Anda menjalankan program, Anda akan menemukan bahwa nilai atribut yang dimodifikasi tercermin dalam hasilnya, tetapi pernyataan yang menambah atau menghapus atribut diabaikan. Begini keluarannya di konsol:

{
  id: 1,
  name: 'Joydip Kanjilal',
  city: 'Bangalore',
  state: 'Karnataka',
  country: 'India',
  pincode: 560005
}

Gunakan metode object.defineproperty ()

Anda juga bisa menggunakan Object.defineProperty() Metode dalam JavaScript dapat mengontrol mutasi properti tunggal dari suatu objek. Cuplikan kode berikut menunjukkan cara menggunakan metode ini untuk tidak mengizinkan perubahan pada nilai yang terkandung dalam properti terbatas.

const author = { id: 1, name: "Joydip Kanjilal"};
Object.defineProperty(author, "booksauthored", 
{
  value: 3,
  writable: false,
});

author.booksauthored = 5;
console.log(author.booksauthored);

Saat Anda menjalankan kode sebelumnya, Anda akan melihat nomor 3 yang ditampilkan di konsol.

Poin -poin penting

• JavaScript membagi jenis objek menjadi dua kategori yang berbeda: primitif (mutable) dan objek (tidak berubah).
• Istilah mutasi objek mengacu pada operasi yang berubah atau berubah setelah objek dibuat.
• Meskipun nilai asli, seperti angka, dll. Tidak dapat diubah, Anda selalu dapat mengubahnya setelah membuat objek.
• Karena string di JavaScript tidak dapat diubah, mereka tidak dapat diubah setelah dibuat.
• Meskipun mutasi itu sendiri tidak buruk, Anda harus mengelolanya dengan hati -hati untuk mengurangi kesalahan dalam aplikasi Anda.
• Anda dapat mengurangi atau menghilangkan mutasi dalam JavaScript dengan mengikuti praktik yang disarankan dan memanfaatkan struktur data yang tidak dapat diubah.