Eğer pure / vanilla javascript kullanıyorsanız, yani herhangi bir 3. parti plugin ya da framework (örneğin jQuery, Vue.js, React vb.) kullanmıyorsanız, arrayleri manipüle edebilmek için aslında çok güzel özelliklere sahipsiniz. Bunun farkında olmayıp sadece jQuery ile arrayler içerisinde işlem yapılabildiğini düşünüyorsanız, bu yazıda neredeyse hepsinin Javascript’te de birer karşılığı olduğunu göreceksiniz.
Neden Javascript ve Array Fonksiyonları?
Neden pure Javascript’in ekipmanlarından faydalanmalıyız? Cevap çok basit. Siz Jquery de yazsanız, Vue.Js ya da React ile de geliştirmeler yapsanız aslında bir Javascript kodu yazıyorsunuz. Ya da bunlar içerisinde de kendi syntaxlerinin yanı sıra yalın Javascript’i kullanıyorsunuz. O yüzden de Javascript’in tüm nimetlerinden faydalanmayı bilirseniz, Javascript temelli giriştiğiniz tüm projelerde de rahatlıkla ilerleyebilirsiniz. Kullandığınız Framework’e ya da Plugin’e bağımlı kalmadan da geliştirmeler yapmaya devam edersiniz.
Bu proje içerisinde sırasıyla şu fonksiyon örnekleri olacak:
- Find
- Filter
- Some
- Every
- Map
- Sort
- Reduce
- …
Birçok farklı fonksiyon var ve bunları da belki yazının devamında ekleyebilirim. Ancak, ilk aşamada bunlar üzerinden gideceğiz.
Arrow Functions
Ayrıca, örnekler içerisinde Arrow Function kullanımı hakkında da güzel bir tecrübe edinebilirsiniz. Tek satırda basit bir sorgu ile array içerisinden sonuçlar elde edebileceksiniz. ASP.NET Core kullananlar için Array Function çok kolay olabilir çünkü Linq ile sürekli olarak veriler üzerinden manipülasyon yapıyorlar. Hatta PHP’de de (millattan önce zamanlarda PHP ile bir şeyler yazdığım zamanlardan hatırladığım kadarıyla) çoook uzun yıllardır benzer bir yapı mevcut.
.find() ve .filter() Farkı
Hemen aklımızda kalması için basit bir örnek ile başlayalım. Eğer array içerisinden sadece bir elemanı seçeceksek, .find() kullanıyoruz. Eğer ki birden fazla elemanı olan bir liste döndüreceksek ise .filter() kullanıyoruz. First() ve ToList() arasındaki fark kadar temiz :)
Unutmadan hemen söyleyeyim, find() ile array içerisinden bir sonuç çıkartamazsak, sonucumuz undefined olacaktır. Bu yüzden de
console.log(yas100 || 'sonuç yok')sonucumuzu console.log ile yazdırırken, sonuç bulunamazsa ekrana ne döneceğimizi de belirtebiliriz. Örneğin biz burada sonuç yoksa sonuç yok demişiz :)
Fonksiyonların Detayları
Yazının sonunda her fonksiyonun linkini bulabilirsiniz. Eklemeler yaptıkça bu yazının linklerini de güncelliyor olacağım.
Github Projesi ve Örnek Kodlar
Bu yazıda geçen tüm kodlara ve örneklere https://github.com/mustafacagri/javascript-array-functions adresinden ulaşabilirsiniz. Aklınıza gelen farklı yöntemler ya da örnek olması halinde de lütfen Pull Request yaparak projeye katkı sağlamaktan çekinmeyin. Çünkü açık kaynak güzeldir! Açık kaynağa destek ve katkı sağlamak ise çok daha güzeldir!