JavaScript ES6+ İpuçları #8: Object.groupBy() ile Dizileri Gruplamak
JavaScript ES6+ serisindeki bir önceki yazı: JavaScript ES6+ İpuçları #7: at() Metoduyla İstenilen İndeksteki Değere Erişmek
Pandemi dönemi ve sonrasında JavaScript ES6+, Webpack, Cypress, Axios gibi farklı konularda seri yazılar yazmıştım. Diğerleri gündelik hayat pratiklerine ve deneyimlere dayanırken JavaScript ES6+ yazıları, JavaScript’e seneler sonra gelecek özelliklere bugünden bakmayı sağlıyordu. O yüzden yazmadan önceki hazırlıkları ve uyumluluk kontrolleriyle en çok keyif aldığım yazılardı.
Geçtiğimiz günlerde TC39 proposal’larına bakarken bu seriye son yazıyı neredeyse üç sene önce yazdığımı fark ettim ve dayanamayıp yeni özelliklerden birinden kısaca bahsetmek istedim.
Object.groupBy()
TC39 proposal akışında Stage 4'de, yani standartlaşmaya hazır olan bu özelliğin ismi array grouping. Bir diğer ismiylegroupBy
. SQL ile yolu kesişmiş olanların aşina oldukları bir özellik. Yaptığı iş de isminden anlaşılacağı üzere oldukça basit, eldeki veriyi, verinin içerisindeki bir değere veya kritere göre gruplamak.
Elimizde aşağıdaki gibi bir cihaz listesi olduğunu ve bu listedeki cihazları, kullandıkları çipsetlere göre gruplamak istediğimizi varsayalım.
JavaScript’de groupBy
özelliğinin olmadığı dünyada bunu yapmak istediğimizde, işimizi görecek fakat karmaşık ve okuması güç fonksiyonlar yazabiliyor veya Lodash gibi utility kütüphanelerindeki dizi fonksiyonlarından faydalanabiliyorduk.
Object.groupBy()
, verilen değeri key, bu değere göre gruplanan verilerin oluşturduğu dizileri de value olarak kullanıldığı bir obje dönerek bu işi pratik şekilde hallediyor. Eğer key olarak değer değil de index kullanmak istenirse de Map.groupBy()
aynı işi yapıyor.
Majör web tarayıcılarının JavaScript motorlarına, 2023'ün son çeyreğindeki güncellemelerle birlikte (Chrome için 117 ve üstü, Safari için 17.4 ve üstü) dahil olan özelliğe, daha eski tarayıcılarda da sahip olmak için her zamanki gibi yine polyfill kullanmak gerekiyor.
Kaynaklar
- https://github.com/tc39/proposal-array-grouping
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy
JavaScript ES6+ serisindeki bir sonraki yazı: JavaScript ES6+ İpuçları #9: JSON.parseImmutable ile Değişmezlik Sağlamak