Tarayıcılar yakın zamanda Diziler üzerinde çağırabileceğiniz yeni bir birlikte çalışabilirlik yöntemi kazandı:
Array.prototype.with().
Bu makalede, bu yöntemin işleyiş şekli ve orijinal diziyi değiştirmeden bir diziyi güncellemek için nasıl kullanılacağı incelenmektedir.
Array.prototype.with(index, value) Tanıtımı
Array.prototype.with(index, value) yöntemi, sağladığınız yeni value değerine ayarlanmış index ile çağrıldığı dizinin bir kopyasını döndürür.
Aşağıdaki örnekte bir yaş dizisi gösterilmektedir. İkinci yaşı 15'ten 16'ya çevirirken dizinin yeni bir kopyasını oluşturmak istiyorsunuz:
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)
Kodun dökümü: ages.with(...), orijinal diziyi değiştirmeden ages değişkeninin bir kopyasını döndürür. ages.with(1, …), ikinci öğenin (index = 1) yerini alır. ages.with(1, 16), ikinci öğeyi 16 öğesine atar.
Dizinin yeni bir kopyasını değiştirerek bu şekilde oluşturabildiniz.
Bu, orijinal dizinin değişmediğinden emin olmak istediğinizde oldukça kullanışlıdır. Bu makalede, bu durumun bazı kullanım alanları ele alınmaktadır. Ama şu an için, köşeli parantez gösterimini kullansaydınız neler olacağına bir göz atalım:
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 🙁)
Gördüğünüz gibi, bu örnekte ages değişkeni de değiştirilmiştir. Bunun nedeni, ages = newAges atadığınızda JavaScript'in diziyi kopyalamaması, bunun yerine diğer diziye referans oluşturmasıdır. Dolayısıyla, birindeki herhangi bir değişiklik diğerini de etkiler. Çünkü her ikisi de aynı diziyi gösterir.
Array.prototype.with() ve sabitlik
Değişmezlik çoğu ön uç kitaplığı ve çerçevesinin merkezinde yer alır. Birkaç örnek verecek olursak: React (ve redux) ve Vue
Ayrıca diğer kitaplıklar ve çerçeveler de değişmezlik gerektirmez ancak daha iyi performans için teşvik eder: Angular ve Lit
Bu nedenle, geliştiriciler genellikle kod okunabilirliğinden ödün veren dizilerin kopyalarını döndüren başka yöntemler kullanmak zorunda kalırlar.
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)
.with() öğesinin bir öğe dizisini sabit bir şekilde güncellemek için useState ile birlikte React'te nasıl kullanılabileceğini gösteren bir Codepen örneği aşağıda verilmiştir:
.with() yöntemi dizinin bir kopyasını döndürdüğünden birden fazla .with() çağrısını, hatta diğer dizi yöntemlerini zincirleyebilirsiniz. Aşağıdaki örnekte, diziden ikinci ve üçüncü yaşların artırılması gösterilmektedir:
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)
Diğer sabit yeni yöntemler
Diğer üç yöntem de yakın zamanda birlikte çalışabilir hale geldi:
Array.prototype.toReversed()ise orijinal diziyi değiştirmeden diziyi ters çevirir.Array.prototype.toSorted()ise diziyi orijinal diziyi değiştirmeden sıralar.Array.prototype.toSpliced()ise.splice()gibi çalışır ancak orijinal diziyi değiştirmez.
MDN'ye göre bu üç yöntem, benzerlerinin kopyalama sürümünü oluşturuyor. Bu yöntemler, değişmezliğin beklendiği veya tercih edildiği durumlarda da kullanılabilir.
Sonuç olarak değişmez güncellemeler, bu makalede sunulan dört yöntemden biriyle JavaScript'te daha kolay gerçekleştirilebilir. Özellikle .with() yöntemi, orijinal diziyi değiştirmeden dizinin tek bir öğesini güncellemeyi kolaylaştırır.