.concat() .every() .fill() .find() Metodlarına Yakından Bak

Melih Özkalay
4 min readFeb 19, 2021

Bugün sizlerle beraber JavaScript ‘de sık kullandığımız 4 farklı Array(Dizi) metodunu yakından inceleyeceğiz.

Başlamadan önce metot öğrenmekten çok daha önemli olduğunu düşündüğüm öğrenmeyi öğrenmekle ilgili birkaç noktadan bahsedip hemen başlığımıza geçeceğim. Kendi öğrenme sürecime katkı sağlaması için yazıyorum , Nobel ödüllü ünlü fizikçi Richard Feynman’ın öğrenme sürecinde anahtar etkinin öğretmek olduğunu savunduğu Feynman tekniği ile başlangıçta hemen herkes için zor olan bu süreci lehime çevirmeye çalışıyorum. Kendime öğretme mottosu ile çıktığım bu yolda umarım sizlerin de faydalanacağı içerik ve konularla beraber öğrenmeye devam ederiz.

Not : İlk öğrencim hiç ders kaçırmayacak gibi gözüküyor. :)

Feynman Tekniği ile ilgili daha fazla bilgi sahibi olmak isterseniz ilgili bağlantıyı da sizinle paylaşıyorum.

Konuyu fazla uzatmadan metodlarımıza geçelim.

.concat()

Bu bölümde iki ya da daha fazla Array (Dizi) ’yi .concat()metodu ile nasıl bir Array (Dizi)’de birleştireceğimizi öğreneceğiz.

Bir ya da daha fazla Array ( Dizi)’ yi bir dizide birleştirmek için .concat()metodunu kullanıyoruz ve böylece .concat()metodu yeni bir Array ( Dizi)’ ye return (döner) ediyor ve en önemli kısmı orijinal Array(Dizi)’yi bozmuyor, yani kopyalarını oluşturuyor diyebiliriz.

Örnek üzerinden inceleyelim ;

Yukarıdaki örnekte iki Array(Dizi)’nin elemanlarını .concat()`metodu ile birleştirmeyi başardık. Böylece ikinci Array(Dizi)’in elemanları birinciye eklenmiş oldu ve yeni bir dizi oluşturduk.

Peki ya 3 Array(Dizi)’yi birleştirmek istiyorsak ne yapacağız ?

Neyse ki .concat() metodu 2'den fazla değişkeni birleştirmenize olanak sağlıyor.

Harika ! .concat() metodu ile sadece Array(Dizi)’ leri değil kendi verdiğimiz değerleri de diziler ile birleştirebiliyoruz.

Son olarak ES6'da, birden çok diziyi aşağıdaki gibi birleştirmek için kullanılan spread operatörüne göz atalım;

2 farklı diziyi , 3 farklı diziyi , değerler ve dizileri birleştirmek için kullandığımız .concat() metodunu ve ES6'da kullanılan spread operator’ünü örneklerle inceledik. Umarım .concat() metodu ile ilgili aklımızda soru kalmamıştır. Şimdi sıradaki metotlarımızı incelemeye geçelim.

Kaynak :

.every()

.every() metodu ile bir dizideki tüm elemanların verilen fonksiyonun testini geçip geçmediği kontrol edilir. Eğer test ettiğimiz Array(Dizi) boş ise bu metot truedeğerini döndürür.

.every() metodu çağırıldığında Array(Dizi)’yi değiştirmez. Metodu çağırdığımızda ilgili dizinin tüm elemanları, fonksiyonun koşulunu sağlıyorsa, true , elemanlardan herhangi biri bu koşulu sağlamadığı anda ise false değerini döndürür.

Array.every(testFunction);

Hadi bu akşam bir partiye gideceğimizi hayal edin. Partiye 18 yaşından küçük arkadaşlarımız giremiyor maalesef .Yukarıdaki örnekte gördüğünüz iki sayı dizisinde 2 farklı grubun yaşlarını görüyoruz. .every() metodumuz da kapıda kimlik kontrolü yapan kişi olsun. Fonksiyonumuzun belirttiği kriterlere göre diziyi kontrol ediyor. Bu gruptaki herhangi biri 18 yaşından küçükse false değeri döndürüyor. Yani ikinci grubumuzda 18 yaşından küçük bir kaçağımız var. :)

ES6 ile birlikte işimiz daha da kolaylaşıyor. Hadi inceleyelim.

Bir şey fark ettiniz değil mi ? Arrow Function ile yazdığımız fonksiyonumuzda test için anonim olarak yazdığımız “number” ile fonsiyonu geçirebildik. Burda “number” dizi içerisinde test edilecek her bir elemanı temsil ediyor,“number” yerine kendi belirlediğiniz herhangi bir değerle de test işlemini gerçekleştirebilirsiniz. Denemekten çekinmeyin.

Kaynak :

.fill()

.fill() metodu Array(Dizi)’yi belirli bir değerle statik olarak doldurmak için kullanılır. Bu değer dizinin tamamını doldurabileceği gibi aynı zamanda dizinin belli bir bölümünü doldurmak için de kullanılır.

arr.fill(value, start, end)

.fill() metodu 3 parametre alır.

  • value: Dizimizde yer alan elemanların yerine geçecek değeri temsil eder. Metot içerisinde girilmesi zorunludur.
  • start: Dizinin belirli bir bölümünü doldurmak istiyorsak nereden başlayacağını belirtmek için girdiğimiz parametredir. Eğer bu değer belirtilmezse bu işlemi dizinin “0” indeksinden yani başından başlayarak gerçekleştirecektir. Girdiğiniz parametre değeri negatif olursa yine aynı şekilde işlemi “0” indeksinden başlayarak gerçekleştirecektir.
  • end: Dizinin değiştirmek istediğimiz bölümünün nerede son bulacağını belirtmek için kullandığımız parametredir. Bu parametrenin belirtilmemesi durumunda da dizinin son indeksine kadar bu işlemi gerçekleştirecektir. Negatif değer alması durumunda ise son bulacağı indeks değerini dizinin uzunluğunu end parametre değeriyle toplanması olarak ifade edebiliriz.( arr.length+end)

Kaynak:

.find()

ES5 ‘ de bir Array(Dizi)’de eleman bulmak için .indexOf() ya da .lastIndexOf() metodlarını kullanırız ancak bu metodlar dizide ilk eşleştiği elemanın indeksine döndükleri için oldukça sınırılıdırlar.

ES6 bu limitli kullanımı ortadan kaldırmak için bize .find() metodunu sundu. Böylece .find() metodu belirlenen fonsiyonu sağlayan ilk indekse dönüyor.

array.find(function(currentValue, index, arr),thisValue)
  • function: Her eleman için çalışacak olan Array(Dizi) fonksiyonu.
  • currentValue: Bu parametre mevcut elemanı tutar.
  • index: Geçerli elemanınindeksini tutan isteğe bağlı bir parametredir.
  • arr: Geçerli elemanın ait olduğu dizi nesnesini tutan isteğe bağlı bir parametredir.
  • thisValue: Bu parametre isteğe bağlıdır, fonksiyona thisdeğeri olarak kullanılacak bir değer aktarılacaksa, kullanılır aksi takdirde undefineddeğeri thisdeğeri olarak aktarılacaktır.

.find() metodu fonksiyonu ( function ) doğru değeri bulana kadar Array(Dizi)’nin her elemanı için yürütülür ve doğru değer bulduğunda durur.Aksi takdirde undefined dönecektir.

.find() metodu ile birlikte 4 farklı metodumuza biraz daha yakından bakma fırsatımız oldu. Elimden geldiğince açık bir anlatımla öğrenmek istediğim konuları sizlere de aktarmaya çalıştım. Umarım faydalı olmuştur.

Katkı sağlamak ya da soru sormak için yorum yapmayı unutmayın lütfen.

Herkese iyi çalışmalar…

--

--

Melih Özkalay

Frontend Developer,Musician,Engineer “It’s a marathon not a sprint”