JavaScript forEach Metodu
Sayın insan , JavaScript içerisinde diziler veya nesneler üzerinde işlem yapan, döngü gerçekleştiren birçok metot var. Bu makale içerisinde forEach() metoduna değineceğim. Vira Bismillah :)
Fihrist
- forEach() Metodu Hakkında Bilgi
- forEach() Metodunun Syntax Yapısı
- forEach() Metodunda Parametreler
- forEach() Metoduna Dair Örnekler
forEach() Metodu
Bir dizi ya da bir nesne üzerinde yineleme için kullanılır. Metot, bize onları bir şekilde çıkarıp değiştirebileceğimiz yahut dönüştürme işlemi yapabileceğimiz şekilde bireysel öğelere erişim sağlar.
Bu makale içerisinde ilk olarak diziler üzerinde forEach() nasıl kullanılır buna değineceğim. Sonra da nesneler üzerinde kullanımına geçeriz.
forEach metodu sırasıyla, bir dizideki her bir eleman için bir kere bir işlevini çağırır.
Not: İşlev, değerleri olmayan dizi öğeleri için yürütülmez.
Bir dizi öğesi için belirli bir işlevi bir kez yürüten bir yöntemdir dedik. Diziyi değiştirmeden, array.forEach() metodu ile artan sırada yinelenir. Dizi içerisinde yer alan her eleman için metot çalışır. Her bir dizi elemanı için bir kez verilen işlevini yürütür.
Burada kendini tekrarlayan cümlelere yer vermemi tekrarda kuvvet vardır düsturuna dayandırıp teorikten pratiğe geçmeden evvel bir de syntax yapısına değinelim bakalım :)
Syntax
forEach() metodu; arrow function, callback function ve ınline callback function olmak üzere üç farklı kullanım şekillerine sahiptir. Ayrıca bahsi geçen her bir function içerisinde de senaryoya ya da duruma göre farklı şekillerde kullanılabildiğini söylemek mümkündür.
Yalnız dikkatinizi çekmek isterim özellikle de henüz yeni JavaScript ile ilgileniyorsanız foreach(…. ) içerisinde yer alan parametrelerin ne ifade ettiğini de bilmek, anlamak gerekir.
Gelin bu parametreler bize ne diyor hangi durumlarda kullanmamız gerekiyor öğrenelim.
Parametreler
callbackFn : Her öğede yürütülecek işlevdir. Sayı olarak bir ve üç argüman arasında kabul eder. Bu argümanlar ;
- Elemanın değeri
- Elemanın indeksi
- Geçilen array nesnesi
element : Kullanımı zorunludur. İşlemden geçen elemanın değeridir.
index : Kullanımı isteğe ve senaryoya bağlıdır. İşlemden geçen elemanın indis değeri
array : Kullanımı isteğe ve senaryoya bağlıdır. İşlemden geçen elemanın ait olduğu dizi
thisArg : Kullanımı isteğe ve senaryoya bağlıdır. thisArg , geri çağrının çağrılması gereken bağlamı belirtir. Bir thisArg parametresi belirtmezsek , this anahtar sözcüğü tarafından başvurulan bağlam pencere olur . this geri aramadaki set değeridir.
forEach()çağrıldığı diziyi değiştirmez demiştik fakat callbackFn bunu yapabilir.
Gelin bu teorik bilgiler bize ne demek istiyor pratikte görelim.
Örnekler
Bir dizi oluşturalım ve bu dizi içerisindeki sayıların toplamını forEach olmasaydı nasıl oluşturacağımızı ve forEach ile nasıl oluşturacağımızı görelim.
for döngüsünde, diziye geçici bir i veya index isimli değişken kullanarak erişmemizi gerektiriyor . Bu şu an için, başlangıçta çok dağınık görünmese de, daha fazla kod eklemeye başladığımızda daha da karmaşık hale gelebilir. Kodun okunurluluğu gittikçe kompleks bir hal alabilir. Ama forEach kullanarak kodun anlaşılabilirliğini, okunabilirliğini kolaylaştırmamız mümkün.
Lütfen arkanıza yaslanın ve dikkatlice izleyin.
Bu kodun da output u 15 tir. forEach burada index lerle koşullarla falan uğraşmıyor direkt içerisine gerekli parametreleri alarak çıktıyı kullanıcıya gösteriyor. Ben burada JavaScrip’te for ve forEach karşılaştırmasını da paylaşmak istiyorum sizlerle, buyrunuz.
forEach metodunun okunabilirliğini ve kod karmaşıklığını önlemesini gösteren güzel bir örnek daha paylaşmak istiyorum. Bu örneği incelemek için tıklayınız.
Şimdi de forEach metodumuzun parametresinden biri de index bilgisi olsun. Hatırlarsanız index, kullanılması zorunlu bir parametre değildi fakat göstermek adına şu örneği inceleyebilirsiniz.
ÖRNEK UYGULAMA
Bu uygulama içerisinde Bootstrap kullanarak ilerledim. Uygulama bir to do yu hedeflemektedir. Html, Css, Bootstrap ve JavaScript yardımıyla oluşturduğum bu simple çalışmanın JavaScript dosyası içerisinde forEach metodunu kullandım. Bu çalışmayı incelemek için tıklayın.
İyi çalışmalar.
