Array.prototype.with ile sabit dizi güncellemeleri

Jad Joubran

Kutlama: Bu web özelliği artık üç büyük tarayıcı motorunda da kullanılabiliyor.

Tarayıcılar kısa süre önce, dizilerde çağırabileceğiniz yeni bir birlikte çalışabilen yöntem kazandı: Array.prototype.with().

Browser Support

• 110
• 110
• 115
• 16

Source

Bu makalede, bu yöntemin işleyiş şekli ve orijinal diziyi değiştirmeden bir diziyi güncellemek için nasıl kullanılacağı ele alınmaktadır.

Array.prototype.with(index, value)'a giriş

Array.prototype.with(index, value) yöntemi, üzerinde çağrıldığı dizinin bir kopyasını döndürür. Bu kopya, sağladığınız yeni value ile ayarlanmış index değerini içerir.

Aşağıdaki örnekte bir yaş dizisi gösterilmektedir. İkinci yaşı 15'ten 16'ya değiştirirken 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)

Kodu inceleme: 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) yerine geçer. ages.with(1, 16), ikinci öğeyi 16'ye atar.

Bu şekilde, dizinin değiştirilmiş yeni bir kopyasını oluşturabilirsiniz.

Bu, orijinal dizinin değişmeden kalmasını istediğinizde oldukça kullanışlıdır. Bu makalede, bu durumun bazı kullanım alanları ele alınmaktadır. Ancak şimdilik köşeli parantez gösterimini kullansaydınız ne olacağına 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ştirildi. Bunun nedeni, ages = newAges atadığınızda JavaScript'in diziyi kopyalamaması, bunun yerine diğer diziye bir referans oluşturmasıdır. Bu nedenle, her ikisi de aynı diziye işaret ettiğinden birinde yapılan değişiklik diğerini de etkiler.

Array.prototype.with() ve değişmezlik

Değişmezlik, birçok ön uç kitaplığının ve çerçevesinin temelinde yer alır. Örneğin: React (ve Redux) ve Vue

Ayrıca, diğer kitaplıklar ve çerçeveler değişmezlik gerektirmese de daha iyi performans için bunu teşvik eder: Angular ve Lit

Bu nedenle, geliştiriciler genellikle kod okunabilirliğini azaltan ve dizilerin kopyalarını döndüren başka yöntemler kullanmak zorunda kalıyordu:

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)

Aşağıda, öğe dizisini değişmez şekilde güncellemek için .with() öğesinin React'te useState ile birlikte nasıl kullanılabileceğine dair bir Codepen örneği verilmiştir:

.with() yöntemi, dizinin bir kopyasını döndürdüğünden birden fazla .with() çağrısını veya hatta diğer dizi yöntemlerini zincirleyebilirsiniz. Aşağıdaki örnekte, dizideki ikinci ve üçüncü yaşların nasıl artırıldığı 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 yeni değişmez yöntemler

Yakın zamanda üç yöntem daha birlikte çalışabilir hale geldi:

• Array.prototype.toReversed() Bu işlev, orijinal diziyi değiştirmeden diziyi tersine çevirir.
• Array.prototype.toSorted() diziyi, orijinal diziyi değiştirmeden sıralar.
• Array.prototype.toSpliced() .splice() gibi çalışır ancak orijinal diziyi değiştirmez.

MDN'ye göre bu üç yöntem, benzerlerinin kopyalama sürümüdür. Bu yöntemler, değişmezliğin beklendiği veya tercih edildiği durumlarda da kullanılabilir.

Sonuç olarak, bu makalede sunulan dört yöntemden biriyle JavaScript'te değişmez güncellemeler daha kolay bir şekilde gerçekleştirilebilir. Özellikle .with() yöntemi, orijinal diziyi değiştirmeden dizinin tek bir öğesini güncellemeyi kolaylaştırır.