Javascript Array Fonksiyonları

December 22, 2020

Selamlar 🖖 Bugün dilim döndüğünce javascripte kullanılan temel array fonksiyonlarından bahsetmek istiyorum.

Günümüzde front-end tarafında kullanılan birçok framework ve library bulunuyor. React JS, Angular ve Vue JS bunların en temelleridir. Hangisini öğrenmemiz lazım ? Nasıl öğrenebilirim ? Hangisi daha iyi ? Frontend dünyasında bunlar gibi birçok sorular ile karşılaşmaktayız. Aslında temelde hepsi aynı işi yapıyor. Hepsinin iyi ve diğerine göre eksi tarafları var. Ama sonuçta hepsi javascript üzerine inşa edilmiştir. Aslında iyi bir javascript bilgisi ile istediğinizi öğrenmek çokta zor değil. Bunun için javascript bilgimizi her zaman daha iyiye taşımamız gerekiyor. Bende bugün javascripte kullanılan temel array fonksiyonlarından bahsedicem. Peki bunlar hangileri ?

find()
findIndex()
filter()
map()
some()
every()
startsWith()
endsWith()
flat()

find()

Find fonksiyonu array içerisindeki istediğimiz datayı bulmamız da bize yardımcı olur. Yani find fonksiyonunda belli bir kriter veririz. O kritere uyan item bize geri döner. Bu fonksiyonda dikkat edilmesi gereken, kriteri sağlayan ilk array elemanını bize geri döndürmesidir.

array.find(item => item.id = "123456")

Yukarıda ki kod array içerisinde ki elemanlardan id si “123456” olan ilk veriyi bize geri döndürür. Eğer elemanlardan id si “123456” olan yok ise bize geriye undefined döndürür. Böylece bulunmayan durumlarda uygulamamız nasıl hareket edicek belirleyebiliriz.

findIndex()

findIndex() fonksiyonu array içerindeki kritere uyan datanın index numarasını bize geri döndürür.

array.findIndex(item => item.id == "123456")

Yukarıda ki kod array içerisinde ki elemanlardan id si “123456” olan ilk verinin index numarasını bize geri döndürür. Eğer elemanlardan id si “123456” olan yok ise bize geriye -1 döndürür.

filter()

filter() fonsiyonu arrayi filtrelemek için kullanılır. Örneğin elimizde 60 tane item olan bir array olsun. Her item da boolean tipinde status bilgisi var. Biz yalnızca status=”success” olanları uygulamamızda göstermek istiyoruz. Bu durumda filter fonksiyonunu şu şekilde kullanabiliriz.

array.filter(item => item.status == "success")

Bu kod bize array deki status==”success” olan bütün field ları geri döndürür. find fonksiyonu ile karıştırılmamalıdır. Dikkat edilmesi gereken, find() fonksiyonu kriteri sağlayan ilk alanı geri döndürür. Ama filter fonksiyonu ise kriteri sağlayan bütün alanları geri döndürür.

Ayrıca sadece bir adet kriter belirtmek zorunda değiliz. Mesela status=”success” olan ve gender=”male” olan alanları elde etmek isteyebiliriz. Bu durumda kodumuzu şu şekilde yazabiliriz.

array.filter(item => item.status == "success" && item.gender == "male")

map()

map() fonksiyonu ise array den yeni bir array elde etmeye yarar. Aslında ne demek istedim ? Elimizde birçok alanı olan bir array olsun. Her item de age, gender, status, name, lastName, online gibi alanlarımız olduğunu düşünelim. Bize sadece name alanları gerekiyor olsun. İşte tamda burada map() fonksiyonunu kullanıcağız.

array.map(item => item.name)

Yukarıdaki kod ile array de sadece name alanlarını elde etmiş oluruz.

some()

some() fonksiyonuda array lerde çok kullanılan fonksiyonlardandır. Some fonksiyonu array içerisinde belirttiğimiz kriterlerden birine uyan bir tane değer var ise true yok ise false döndürür. Mesela elimizde bir array olsun. Array in içindeki objelerde name=”ozgunozdemir” olan bir field var mı ? bunun kontrolünü some fonksiyonu ile yapabiliriz.

array.some(item => item.name == "ozgunozdemir")

Bu kod ile eğer name alanı ozgunozdemir olan bir tane bile item var ise değer true döner.

every()

every() fonksiyonu ise some fonksiyonun tam tersidir. Array içerisinde belirttiğimiz kriterlerden birine uymayan bir tane bile değer var ise false döner. Eğer bütün item lar bütün kriterleri sağlıyor ise every fonksiyonu o zaman true değerini döner.

array.some(item => item.name == "ozgunozdemir")

Bütün item ların name alanı “ozgunozdemir” ise fonsiyon true değerini döndürür. Eğer bir tane bile name alanı “ozgunozdemir” olmayan değer var ise false değerini every fonksiyonu geri döner.

startsWith()

startsWith() fonksiyonu aslında bir array fonksiyonu değildir. Ama array lerde sıkça kullanılmaktadır. Bir metin belirtilen kelime ile başlayıp başlamadığının bize bildirir. Peki nasıl kullanılır. Aslında örnek ile daha iyi anlayabiliriz.

let name = "Ozgun Ozdemir"
name.startsWith("Oz")

Eğer name “Oz” string ile başlıyor ise true değerini döner. Eğer başlamıyor ise false değerini döner. Yani yukarıda ki örnek de name “Oz” değeri ile başladığı için true değeri bize döner.

endsWith()

endsWith() fonksiyonuda aslında bir array fonksiyonu değildir. startsWith() fonksiyonun tersine bu fonksiyonda metnin belirtilen değer ile bitirilip bitirilmediğini kontrol eder. Yine örnek ile daha iyi anlayabiliriz.

let name = "Ozgun Ozdemir"
name.endsWith("mir")

Eğer name “mir” string ile bitiyor ise true değerini döner. Eğer bitmiyor ise false değerini döner. Yani yukarıda ki örnek de name “mir” değeri ile bittiği için true değeri bize döner.

flat()

flat() fonksiyonu ise array i tek bir düz array haline getirmeye yarıyor. Yine örnek ile çok daha iyi anlayabileceğinizden eminim.

let array = [1,2,3,4,5,6,7,[8,9]]
array.flat()

Yukarıda ki örnekte array isimli array imizi 8 ve 9 alanlarını barındıran array den flat ile kurtarabiliriz. Sonuçta array.flat() ile bizim array imiz array = [1,2,3,4,5,6,7,8,9] şeklini alır.

Yukarıda javascripte sıkça kullanılan bazı array fonksiyonlarına yer verdim. Dilim döndüğünce sizlere anlatmaya çalıştım. Umarım faydalı olabilmişimdir.

Tekrardan görüşmek üzere 👋

Kaynaklar: