Cara membuat variabel tidak dapat diubah dalam javascript

ES6 memperkenalkan deklarasi baru yang disebut const_ untuk mendeklarasikan variabel sebagai memegang konstanta (i. e. tidak berubah) nilai

Berikut adalah definisi const_ dari dokumen web MDN

Konstanta adalah cakupan blok, seperti variabel yang didefinisikan menggunakan pernyataan let. Nilai konstanta tidak dapat diubah melalui penugasan ulang, dan tidak dapat dideklarasikan ulang

Artinya adalah jika Anda mendeklarasikan variabel sebagai const, itu menjadi nilai hanya baca dan Anda tidak dapat mengubah nilainya setelah penugasan awal. Melakukannya akan menimbulkan kesalahan seperti yang ditunjukkan di bawah ini

Namun hal yang menarik terjadi ketika kita mendeklarasikan objek sebagai nilai const
Meskipun Anda tidak dapat mengubah nilai objek, Anda masih dapat memperbarui nilai propertinya

Seperti yang terlihat pada gambar di atas, variabel yang disebut stationaryBox dinyatakan sebagai const. Jadi, saat Anda mencoba mengganti nilai objek, itu memberi Anda kesalahan. Namun Anda masih dapat mengakses nilai properti objek (seperti kunci pencils pada contoh di atas) dan memperbaruinya satu per satu. Hal yang sama terjadi ketika mendeklarasikan array sebagai const

Lalu bagaimana Anda benar-benar mencegah suatu objek diperbarui?

Ada beberapa cara untuk melakukannya sehubungan dengan deklarasi const

1) Menggunakan deskriptor properti objek

Setiap properti objek didefinisikan oleh 3 deskriptor
a) dapat dihitung. jika benar, properti akan dicantumkan dalam loop
b) dapat ditulis. jika benar, nilai properti dapat diubah
c) dapat dikonfigurasi. jika benar, deskriptor properti dapat diubah

Jadi kita dapat mencegah objek diperbarui dengan mengatur nilai descriptor ke

const stationaryBox = {
  pencils: 2,
  pens: 3,
  eraser: 1
};Object.freeze(stationaryBox);

const stationaryBox = {
  pencils: 2,
  pens: 3,
  eraser: 1
};Object.defineProperties(stationaryBox, {
  pencils: {enumerable: true, writable: false, configurable: false},
  pens: {enumerable: true, writable: false, configurable: false},
  eraser: {enumerable: true, writable: false, configurable: false}
});

2) Menggunakan Objek. membekukan()

Alih-alih menyetel

const stationaryBox = {
  pencils: 2,
  pens: 3,
  eraser: 1
};Object.freeze(stationaryBox);

const stationaryBox = {
  pencils: 2,
  pens: 3,
  eraser: 1
};Object.freeze(stationaryBox);

const stationaryBox = {
  pencils: 2,
  pens: 3,
  eraser: 1
};Object.freeze(stationaryBox);

const stationaryBox = {
  pencils: 2,
  pens: 3,
  eraser: 1
};Object.freeze(stationaryBox);

Jika Anda hanya ingin mencegah penambahan properti baru, Anda dapat menggunakan

const stationaryBox = {
  pencils: 2,
  pens: 3,
  eraser: 1
};Object.freeze(stationaryBox);

const stationaryBox = {
  pencils: 2,
  pens: 3,
  eraser: 1
};Object.freeze(stationaryBox);

Dalam JavaScript, nilai primitif tidak dapat diubah — setelah nilai primitif dibuat, nilai tersebut tidak dapat diubah, meskipun variabel yang menahannya dapat dipindahkan ke nilai lain. Sebaliknya, objek dan larik dapat diubah secara default — properti dan elemennya dapat diubah tanpa menetapkan ulang nilai baru

Mungkin bermanfaat untuk menggunakan objek yang tidak dapat diubah karena beberapa alasan

• Untuk meningkatkan kinerja (tidak ada perencanaan untuk perubahan objek di masa mendatang)
• Untuk mengurangi penggunaan memori (buat referensi objek alih-alih mengkloning seluruh objek)
• Keamanan utas (beberapa utas dapat mereferensikan objek yang sama tanpa mengganggu satu sama lain)
• Beban mental pengembang yang lebih rendah (keadaan objek tidak akan berubah dan perilakunya selalu konsisten)

Perhatikan bahwa Anda dapat dengan mudah membuktikan mutabilitas. sebuah objek bisa berubah selama ia menawarkan satu cara untuk mengubah propertinya. Di sisi lain, kekekalan sulit dibuktikan jika tidak ada semantik bahasa untuk mengamankannya — ini adalah masalah kontrak pengembang. Misalnya, Object.freeze() adalah metode tingkat bahasa untuk membuat objek tidak dapat diubah dalam JavaScript

Kekekalan dalam JavaScript adalah topik yang semakin banyak didiskusikan. Tentu saja, kita semua sangat setuju bahwa ketidakberubahan adalah ide yang sangat bagus - tetapi mengapa?

Sebelum kita terjun ke topik yang sebenarnya, mari kita lihat teori di baliknya. Ini terutama tentang sistem tipe JavaScript dan bagaimana mesin menangani tipe yang berbeda. Dan ya, JavaScript memang memiliki sistem tipe, meskipun lemah. Ada dua jenis berbeda dalam JavaScript. primitif dan komposit. Tipe primitif adalah, misalnya, string, angka, atau boolean. Jenis komposit adalah array dan objek. Perbedaan utama antara kedua tipe ini adalah Anda menetapkan tipe primitif berdasarkan nilai dan tipe komposit berdasarkan referensi. Cara terbaik untuk melihat efek dari tugas adalah dengan melihat contoh konkret di Listing 1

Daftar 1. Perubahan Struktur Data

let str = 'Hello World!';
let obj = {
  name: 'Klaus',
};
 
function mutate(s, o) {
  s = 'Good morning';
  obj.name = 'Peter';
 
  console.log(s);
  console.log(obj);
}
 
mutate(str, obj);
 
console.log(str);
console.log(obj);

Kode pertama mendefinisikan dua variabel. string dan objek. Fungsi mutate memiliki dua parameter. string dan objek. Fungsi memodifikasi kedua argumen. String, yang diteruskan oleh nilai, diganti dengan nilai Selamat pagi, dan properti nama objek diubah menjadi nilai Peter. Untuk memeriksanya, kami mencetak kedua nilai ke konsol. Terakhir, dalam contoh, kita memanggil fungsi dan menulis kedua nilai ke konsol. Anda dapat melihat keluaran skrip di Listing 2, terlepas dari apakah Anda menjalankannya di browser atau melalui Node.js. js

Daftar 2. Keluaran dari Contoh Kita

Good morning
{ name: 'Peter' }
Hello World!
{ name: 'Peter' }

Keluaran pertama adalah string Selamat pagi, jadi argumen pertama memiliki nilai baru, seperti properti name dari objek yang diteruskan. Keluaran di luar fungsi terlihat sedikit berbeda. Variabel primitif tetap tidak berubah pada nilai aslinya dan objek mewarisi modifikasi dari fungsi. Alasan untuk ini adalah bahwa ketika Anda memanggil fungsi, untuk nilai primitif Anda meneruskan salinan nilai ke fungsi, dan untuk tipe komposit Anda cukup meneruskan referensi ke area memori objek. Ini berarti bahwa perubahan fungsi memodifikasi objek aslinya. Anda secara teoritis dapat memanfaatkan kekhasan JavaScript ini dan menghilangkan nilai kembalian dari fungsi. Masalah pada titik ini adalah bahwa suatu fungsi memodifikasi lingkungannya dengan cara ini tanpa terlihat langsung dari tanda tangannya. Manipulasi dengan demikian merupakan efek samping dari fungsi tersebut. Dalam kasus individual, efek samping seperti itu masih bisa baik-baik saja, tetapi jika aplikasi tumbuh atau fungsionalitas dialihkan ke perpustakaan terpisah, efek samping tidak lagi sesuai, karena membawa potensi kesalahan yang besar.

Pada titik ini, tentu saja, kita dapat mengajukan pertanyaan. Tidak bisakah sesuatu dilakukan tentang mutabilitas objek?

Lindungi Objek Terhadap Perubahan dengan Membekukannya

Jawaban singkat dan sederhananya adalah. ya, adalah mungkin untuk melindungi objek dari modifikasi. Standar JavaScript menyediakan Objek. membekukan metode untuk kasus tersebut. Anda meneruskan objek yang ingin Anda lindungi dan setelah itu tidak ada lagi perubahan yang mungkin dilakukan. Sebagai contoh kita, ini berarti Anda perlu menyisipkan baris Object. freeze(obj), seperti pada Listing 3

Daftar 3. Lindungi Objek Terhadap Perubahan

let obj = { name: 'Klaus' };
Object.freeze(obj);
 
function mutate(o) {
  o.name = 'Peter';
  console.log(o);
}
 
mutate(obj);
console.log(obj);

Hasil dari perubahan ini membutuhkan waktu untuk membiasakan diri. Upaya untuk memanipulasi objek diabaikan begitu saja; . Sekarang Anda dapat melangkah lebih jauh dan memeriksa apakah objek tersebut hanya-baca. Untuk ini, Anda dapat menggunakan Object. metode isFrozen(). Namun, ini mengharuskan Anda untuk menganggap bahwa objek berpotensi hanya-baca untuk semua perubahan. Jadi itu juga bukan pilihan. Alternatif sebenarnya terletak pada bentuk lain dari kekekalan

Struktur Data yang Tidak Dapat Diubah

Gagasan tentang struktur data yang tidak dapat diubah adalah bahwa Anda tidak mengerjakan struktur data asli, seperti pada contoh, tetapi membuat salinan dan mengubahnya. Sekarang Anda mungkin bertanya-tanya apakah benar-benar ide yang bagus untuk menyalin objek berulang kali daripada hanya mengubah nilai. Pada pemeriksaan lebih dekat, pendekatan ini agak intensif memori. Namun, ada alasan yang sangat bagus untuk menyalin struktur objek. Bayangkan sebuah struktur objek dengan beberapa tingkat kedalaman dan Anda membuat perubahan di salah satu tingkat kedalaman ini. Sekarang mari kita asumsikan sebuah algoritme yang memperbarui antarmuka grafis setiap kali Anda mengubah struktur objek. Agar ini berfungsi dengan benar, ia harus memeriksa semua cabang pohon objek untuk perubahan. Namun, jika Anda menyalin seluruh struktur objek, algoritme mengetahui bahwa telah terjadi perubahan. Dan inilah prinsipnya, meskipun jauh lebih elegan, di mana React, dan manajemen negaranya, bekerja

Tapi kembali ke contoh kita. Saat Anda membuat salinan di dalam fungsi, Anda juga perlu memastikan bahwa salinan tersebut dikembalikan ke kode panggilan sehingga dapat bekerja dengannya (Listing 4)

Daftar 4. Struktur Data yang Tidak Dapat Diubah

let obj = { name: 'Klaus' };
 
function mutate(o) {
  let copy = { ...o };
  copy.name = 'Peter';
 
  console.log(copy);
  return copy;
}
 
mutate(obj);
 
console.log(obj);

Dalam contoh Anda dapat melihat cara membuat salinan objek menggunakan operator spread, i. e. tiga titik. Namun, sangat hati-hati diperlukan di sini, karena operasi ini hanya membuat salinan datar dari objek. Jadi, jika suatu objek atau larik memiliki substruktur itu sendiri, mereka hanya disalin dengan referensi dan masalahnya hanya diselesaikan secara dangkal

Cara lain untuk menyalin objek dalam JavaScript adalah dengan menyalahgunakan JSON. merangkai dan JSON. mengurai metode untuk melakukan sesuatu yang sebenarnya tidak dimaksudkan. Jadi, pertama-tama Anda dapat mengonversi objek Anda menjadi string JSON menggunakan JSON. stringify dan kemudian kembali ke objek menggunakan JSON. parse, dan Anda mendapatkan salinan yang dalam dengan sedikit kerugian karena semua metode objek hilang. Jadi itu juga bukan solusi yang masuk akal untuk masalah kita

Solusi bersihnya adalah dengan menulis fungsi yang membuat salinan mendalam dari objek atau struktur larik. Untungnya, ini bukan masalah yang eksotis, jadi beberapa orang telah mencoba solusinya. Sekarang dunia JavaScript tidak akan seperti ini jika tidak ada lusinan solusi yang bersaing sekarang, jadi sekarang saya akan menunjukkan kepada Anda tiga perwakilan yang mendekati masalah dengan cara yang berbeda. Immutable, Immer, dan immutability-helper

Abadi – Solusi Besar dan Menyeluruh

Masalah dengan kekekalan dan JavaScript adalah bahasanya tidak benar-benar mendukung konstruk ini. Library Immutable memecahkan masalah dengan mendefinisikan tipe datanya sendiri, seperti Set, Map, dan Collection. Tipe data ini menyediakan metode yang memastikan operasi pada tipe data tidak dapat diubah. Contoh kita dapat diimplementasikan dengan tipe data Map dan kemudian terlihat seperti Listing 5

Daftar 5. Tidak Berubah dalam Penggunaan

const { Map } = require('immutable');
 
let obj = Map({ name: 'Klaus' });
 
function mutate(o) {
  let copy = o.set('name', 'Peter');
 
  console.log(copy.toJSON());
  return copy;
}
 
mutate(obj);
 
console.log(obj.toJSON());

Agar contoh berfungsi, Anda perlu menginstal Immutable menggunakan perintah npm i immutable dan menjalankan kode sumber contoh melalui Node. js. Anda dapat meneruskan struktur awal ke tipe Peta dan kemudian menetapkan nilai menggunakan metode seperti set. Sebagai imbalannya, Anda mendapatkan objek baru yang dimodifikasi dari tipe Peta

Kerugian dari Immutable adalah Anda tidak dapat lagi menggunakan tipe JavaScript, tetapi harus terbiasa dengan Immutable. Selain itu, ini juga berarti bermigrasi dari Immutable biasanya berarti banyak pekerjaan

Immer – Alternatif Ringan

Immer mengambil pendekatan berbeda untuk Immutable dengan mengandalkan tipe data JavaScript asli dan sebagai gantinya hanya menyediakan satu fungsi dengan hasil. Immer diinstal menggunakan perintah npm install immer. Daftar 6 berisi kode sumber dari contoh kami, yang telah diadaptasi ke Immer

Daftar 6. Immer untuk Struktur Data yang Tidak Dapat Diubah

const produce = require('immer').produce;
 
let obj = { name: 'Klaus' };
 
function mutate(o) {
  let copy = produce(o, (draft) => {
    draft.name = 'Peter';
  });
 
  console.log(copy);
  return copy;
}
 
mutate(obj);
 
console.log(obj);

Anda meneruskan objek asli sebagai argumen pertama ke fungsi produksi dan fungsi berisi operasi yang ingin Anda lakukan pada objek sebagai yang kedua. Immer kemudian memastikan bahwa operasi ini tidak dilakukan pada struktur data aktual, tetapi pada salinan yang Anda terima sebagai nilai kembalian dari fungsi produksi

immutability-helper – Kekekalan dengan Perintah

Dalam beberapa hal, paket immutability-helper mirip dengan Immer. Perbedaan antara keduanya adalah bahwa dengan immutability-helper Anda memiliki akses ke sekumpulan perintah yang cukup terbatas untuk memanipulasi struktur. Setelah menginstal paket dengan perintah npm install immutability-helper, Anda dapat menyesuaikan kode contoh kami seperti yang ditunjukkan pada Listing 7

Daftar 7. Membuat Perubahan pada Objek dengan immutability-helper

const update = require('immutability-helper');
 
let obj = { name: 'Klaus' };
 
function mutate(o) {
  let copy = update(o, { name: { $set: 'Peter' } });
 
  console.log(copy);
  return copy;
}
 
mutate(obj);
 
console.log(obj);

Dengan immutability-helper Anda menentukan dengan perintah bagaimana Anda ingin memodifikasi objek sumber. Anda melakukan ini berdasarkan struktur aslinya. Dalam contoh kita, kita berbicara tentang perubahan pada properti nama. Alih-alih nilai properti, Anda menentukan objek dengan kunci $set untuk menetapkan nilai diikuti dengan nilai baru

Kesimpulan

Seperti yang telah Anda lihat, ada kasus yang bagus untuk ketidakberubahan dalam JavaScript, bahkan jika itu tidak didukung secara native oleh bahasa tersebut. Namun, tidak ada alasan untuk menulis perpustakaan sendiri yang menyediakan kekekalan untuk JavaScript. Beberapa pengembang telah melakukan ini sebelum Anda dengan cara yang kurang lebih berhasil. Dari banyaknya solusi potensial, saya telah memilih tiga yang berbeda dan sangat populer dan menyajikannya kepada Anda

Kesimpulan saya. Immutable mengambil langkah terlalu jauh untuk keinginan saya dengan mendefinisikan struktur datanya sendiri yang harus Anda gunakan di seluruh aplikasi, yang membuatnya hampir tidak mungkin untuk mengganti perpustakaan di lain waktu

Immer dan immutability-helper, di sisi lain, merupakan solusi ringan dan juga dapat ditukar dalam keadaan darurat. Satu-satunya pertanyaan di sini adalah apakah Anda lebih suka menggunakan cara Immer dan menentukan perubahan pada struktur data dalam suatu fungsi atau apakah Anda lebih suka menjelaskan modifikasi menggunakan perintah immutability-helper

Saya akan menyarankan untuk mencoba perpustakaan yang berbeda, dan lebih disukai tidak harus dengan contoh sepele seperti yang telah saya tunjukkan kepada Anda, dan kemudian memutuskan solusinya

Bagaimana cara membuat variabel tidak dapat diubah di js?

Bagaimana cara membuat nilai tidak berubah dalam JavaScript?

Apa yang digunakan untuk membuat variabel yang tidak dapat diubah dalam JavaScript?

Bisakah variabel tidak berubah?