Update array yang tidak dapat diubah dengan Array.prototype.with

Jad Joubran

Perayaan: Fitur web ini kini tersedia di ketiga mesin browser utama.

Baru-baru ini, browser mendapatkan metode interoperabilitas baru yang dapat Anda panggil di Array: Array.prototype.with().

Browser Support

• 110
• 110
• 115
• 16

Source

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 dipanggil dengan index yang ditetapkan ke value baru yang Anda berikan.

Contoh berikut menunjukkan array usia. Anda ingin membuat salinan baru dari 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)

Memecah kode:: ages.with(...) menampilkan salinan variabel ages tanpa mengubah array asli. ages.with(1, …) menggantikan item kedua (index = 1). ages.with(1, 16) menetapkan item kedua ke 16.

Dengan cara ini, Anda dapat membuat salinan baru array dengan modifikasi.

Hal ini cukup berguna saat Anda ingin memastikan bahwa array asli tetap tidak berubah, dan artikel ini membahas beberapa kasus penggunaan untuk hal ini. Namun, untuk saat ini, lihat apa yang akan terjadi jika Anda menggunakan notasi 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 ini karena saat Anda menetapkan ages = newAges, JavaScript tidak menyalin array, tetapi membuat referensi ke array lain. Jadi, setiap perubahan pada salah satunya juga akan memengaruhi yang lainnya karena keduanya mengarah ke array yang sama.

Array.prototype.with() dan imutabilitas

Imutabilitas adalah inti dari banyak library dan framework frontend, di antaranya: React (dan redux), serta Vue

Selain itu, library dan framework lain tidak selalu memerlukan keabadian, tetapi mendorongnya untuk performa yang lebih baik: 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 tentang cara .with() dapat digunakan di React bersama dengan useState untuk memperbarui array item secara tidak dapat diubah:

Karena metode .with() menampilkan salinan array, Anda dapat menggabungkan beberapa panggilan .with() atau bahkan metode array lainnya. Contoh berikut menunjukkan cara menaikkan 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 baru lainnya yang tidak dapat diubah

Tiga metode lainnya baru-baru ini menjadi dapat beroperasi:

• 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 setara. Metode ini juga dapat digunakan jika imutabilitas diharapkan atau lebih disukai.

Kesimpulannya, update yang tidak dapat diubah dapat dicapai dengan lebih mudah di JavaScript dengan salah satu dari empat metode yang disajikan dalam artikel ini. Secara khusus, metode .with() mempermudah pembaruan satu elemen array tanpa mengubah array asli.