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

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

Dukungan Browser

  • Chrome: 110.
  • Edge: 110.
  • Firefox: 115.
  • Safari: 16.

Sumber

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 himpunan (array) saat 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 memodifikasi array asli. ages.with(1, …) menggantikan item kedua (index = 1). ages.with(1, 16) menetapkan item kedua ke 16.

Ini adalah cara Anda dapat membuat salinan baru array dengan modifikasi.

Fungsi ini cukup berguna ketika Anda ingin memastikan bahwa {i>array <i}asli tetap ada tidak berubah, dan artikel ini membahas beberapa kasus penggunaan untuk hal tersebut. 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 saat Anda menetapkan ages = newAges, JavaScript tidak menyalin array, tetapi melainkan membuat referensi ke {i>array<i} lainnya. Jadi, setiap perubahan pada satu juga akan mempengaruhi yang lain karena keduanya mengarah ke {i>array<i} yang sama.

Array.prototype.with() dan ketetapan

Ketetapan adalah inti dari banyak library dan framework frontend, beberapa: React (dan redux), dan Vue

Selain itu, library dan framework lain tidak selalu memerlukan ketetapan 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 contoh Codepen tentang cara .with() dapat digunakan dalam kombinasi React dengan useState untuk memperbarui array item secara permanen:

Karena metode .with() menampilkan salinan array, Anda dapat membuat rantai beberapa Panggilan .with() atau bahkan metode array lainnya. Contoh berikut menunjukkan menambah usia kedua dan ketiga dari {i>array:<i}

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 lain baru-baru ini memiliki kemampuan interoperabilitas:

Ketiga metode ini, menurut MDN, adalah versi penyalinan rekan-rekan. Metode ini juga dapat digunakan ketika ketetapan yang diharapkan atau lebih disukai.

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