Browser baru-baru ini mendapatkan metode interoperabilitas baru yang dapat Anda panggil di Array:
Array.prototype.with().
Artikel ini membahas cara kerja metode ini dan cara menggunakannya untuk memperbarui array tanpa mengubah array asli.
Pengantar Array.prototype.with(index, value)
Metode Array.prototype.with(index, value) menampilkan salinan array yang dipanggilnya dengan index yang ditetapkan ke value baru yang Anda berikan.
Contoh berikut menunjukkan array usia. Anda ingin membuat salinan baru array sambil mengubah usia kedua dari 15 menjadi 16:
const ages = [10, 15, 20, 25];
const newAges = ages.with(1, 16);
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)
Menguraikan kode:: ages.with(...) menampilkan salinan variabel ages
tanpa mengubah array aslinya. ages.with(1, …) menggantikan item kedua
(index = 1). ages.with(1, 16) menetapkan item kedua ke 16.
Inilah cara Anda membuat salinan baru array dengan modifikasi.
Hal ini cukup berguna ketika Anda ingin memastikan bahwa array asli tidak berubah, dan artikel ini membahas beberapa kasus penggunaannya. Tapi, untuk saat ini, lihat apa yang akan terjadi jika Anda menggunakan notasi tanda kurung:
const ages = [10, 15, 20, 25];
const newAges = ages;
newAges[1] = 16;
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 16, 20, 25] (Also changed 🙁)
Seperti yang dapat Anda lihat, variabel ages juga diubah dalam contoh ini. Hal itu karena jika Anda menetapkan ages = newAges, JavaScript tidak menyalin array, melainkan membuat referensi ke array lainnya. Jadi, setiap perubahan di satu elemen juga akan
memengaruhi yang lain karena keduanya mengarah ke array yang sama.
Array.prototype.with() dan immutability
Ketetapan adalah inti dari banyak library dan framework frontend, contohnya React (dan redux), serta Vue
Selain itu, library dan framework lain tidak selalu memerlukan kemampuan yang tidak dapat diubah, tetapi mendorongnya untuk meningkatkan performa: Angular dan Lit
Jadi, developer sering kali harus menggunakan metode lain yang menampilkan salinan array yang mengorbankan keterbacaan kode:
const ages = [10, 15, 20, 25];
const newAges = ages.map((age, index) => {
if (index === 1) {
return 16;
}
return age;
});
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (Remains unchanged)
Berikut adalah contoh Codepen yang menunjukkan bagaimana .with() dapat digunakan di React bersama dengan useState untuk memperbarui array item secara permanen:
Karena metode .with() menampilkan salinan array, Anda dapat merangkai beberapa panggilan .with() atau bahkan metode array lainnya. Contoh berikut menunjukkan
penambahan usia kedua dan ketiga dari array:
const ages = [10, 15, 20, 25];
const newAges = ages.with(1, ages[1] + 1).with(2, ages[2] + 1)
console.log(newAges); // [10, 16, 21, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)
Metode tetap baru lainnya
Tiga metode lainnya baru-baru ini menjadi dapat dioperasikan:
Array.prototype.toReversed()yang membalikkan array tanpa mengubah array asli.Array.prototype.toSorted()yang mengurutkan array tanpa mengubah array asli.Array.prototype.toSpliced()yang berfungsi seperti.splice(), tetapi tanpa mengubah array asli.
Menurut MDN, ketiga metode ini adalah versi penyalinan dari metode yang sama. Metode ini juga dapat digunakan jika immutabilitas diharapkan atau lebih disukai.
Kesimpulannya, pembaruan yang tidak dapat diubah dapat dicapai dengan lebih mudah di
JavaScript dengan salah satu dari empat metode yang ditampilkan dalam artikel ini. Secara khusus,
metode .with() memudahkan pembaruan satu elemen array
tanpa mengubah array asli.