Örnekler ile JavaScript forEach Kullanımı

Herhangi bir program yazarken, genellikle yolumuz array değişkenler ile keşişir. Bu olağan bir durumdur, çünkü elimizde olan verileri gruplamak bize oldukça yararlı oluyor. Mesela ürün listesi, renk listesi, yazar listesi, kart listesi, oyuncu listesi vb. şekilde uzar gider bu liste.

Elimizdeki verileri bir araya topladıktan sonra onlar ile çok daha rahat işlem yapabiliriz. Mesela tüm ürün fiyatlarına indirim yapmak, tek tek ürünler ile uğraşmaktan daha kolay olacaktır.

Bu Yazımızda Neleri İnceleyeceğiz?

Bu yazımızda JavaScript forEach kullanımını öğrenirken işleyeceğimiz konu başlıkları aşağıdaki gibidir..

Arraylar hakkında kısa bir bilgi.
Array forEach döngüsü nedir? Nasıl kullanılır?
Farklı sözdizimleri ile kullanımı.
Farklı örnekler ile forEach metodunu kullanacağız.
Döngünün dönüş değeri nedir?
Kullanılan parametreler nelerdir.
JavaScript For Döngüsü İle Karşılaştırma.

JavaScript Array forEach Döngüsü Neden Önemli?

Dizi içerisinde birden çok eleman olduğu için bu elemanlara ulaşmak için farklı yöntemler kullanırız. Mesela elimizde isimler dizisi olsun.

const isimler = ['Ahmet', 'Hasan','Ali', 'Fatma','Zeynep'];

Bu dizinin ilk elemanına ulaşmak için isimler[0] şeklinde bir kullanım yeterli olacaktır. Ya dizinin tüm elemanlarına tek tek ulaşmamız gerekirse? Bu durumda map, filter, forEach gibi array metodlarını veya for gibi bir dönüyü de kullanabiliriz. Hepsinin kendine göre farkları ve özellikleri bulunuyor.

Burada eğer biz dizinin tüm elemanlarını tek tek dolaşacaksak ve bu elemanlar üzerinde işlem yapacaksak, array forEach metodu işimizi oldukça kolaylaştırır. Çünkü, bu fonksiyona vereceğimiz bir callback fonksiyonu dizin tüm elemanları için çalıştırabiliriz. Bu demek ki ürün listemizde tüm ürünlere indirim uygulanacak ise, bir bunu tanımladığımız bir callback fonksiyonu ve forEach metodu ile basitçe yapabiliriz.

JavaScript ForEach Kullanımı

İlk olarak, bir sayilar dizimiz olsun ve bu sayıların hepsinin tek tek karesini alıp konsola yazıdıralım.

const sayilar = [1, 5, 8, 4, 9, 3];
sayilar.forEach((sayi) => console.log(sayi*2));

JavaScript forEach kullanımı oldukça kolaydır. Mantığını anladıktan sonra ihtiyacınız olduğunda devamlı kullanabileceğiniz metodlardan biridir. İlk örneğimizde görüdlüğü gibi basit bir işlem ile binlerce elemanı olan bir diziye sırayla işlem uygulayabiliriz. Şimdi js forEach ile ilgili farkı örnekler yaparak nasıl kullanıldığını pekiştirmeye çalışalım.

ForEach Döngüsünün Sözdizimi Yapısı

ForEach döngüsü yapısal olarak şu şekildedir:

array.forEach(function(currentValue, index, arr), thisValue)

Birçok farklı şekilde kullanabileceğimiz forEach metodunun genel kullanımı bu şekildedir. Bir fonksiyon alır ve aldığı fonksiyona tüm dizi elemanlarını tek tek gönderir ve fonksiyon üzerinde gerekli işlemler yapılır.

function elemanın gönderileceği callback fonksiyonu.
currentValue o an fonksiyona gönderilen dizi elemanı.
index o an fonksiyona gönderilen elemanın indeksi.
arr dizinin kendisi.
thisValue callback fonksiyonu çalıştırılırken, kullanılacak this değeri.

Bu parametrelerden sadece currentValue gereklidir. Diğerleri isteğe bağlı olarak kullanılır. Mesela yapacağınız işlemde index değeri gerekli ise, index değerini de kullanabilirsiniz. Aksi halde kullanmanıza gerek yoktur.

Bir bilgi olarak farklı sözdizimlerinde nasıl kulanılacağını aşağıdaki listede görebilirsiniz.

// Arrow function
forEach((element) => { /* … */ })
forEach((element, index) => { /* … */ })
forEach((element, index, array) => { /* … */ })

// Callback function
forEach(callbackFn)
forEach(callbackFn, thisArg)

// Inline callback function
forEach(function(element) { /* … */ })
forEach(function(element, index) { /* … */ })
forEach(function(element, index, array){ /* … */ })
forEach(function(element, index, array) { /* … */ }, thisArg)

JavaScript Array ForEach Metodunun Dönüş Değeri

JavaScript forEach metodu geriye undefined değerini dönderir. Yapılan işlemlerin sonuçları fonksiyon içerisinde bizim tarafımızdan belirtilecektir.

Bu dögüyü kullanırken 2 önemli konuyu aklımızdan çıkarmamamız gerekir.

JavaScript array forEach döngüsü dizinin her elemanı için callback fonksiyonunu çağırır.
Eğer dizi içerisinde boş elemanlar varsa işlem yapmaz.

Daha Çok Örnek

Şimdi Javascript foreach kullanımına farklı örnekler vererek, öğrendiklerimiz bilgileri pekiştirelim. İlk olarak callback fonksiyonunu ayrı bir fonksiyon olarak yazalım ve, isimler dizisindeki değerleri büyük harf olarak, yanında indeks değeri ile birlikte konsola bastıralım.

const isimler = ['Ahmet', 'Hasan','Ali', 'Fatma','Zeynep'];
const writeUpper = (value, index) => console.log(index, value.toUpperCase());
isimler.forEach(writeUpper);

Sonucu incelediğinizde, her eleman için isimlerin büyük harfe çevrildiğini, ve ayrıca tüm elemanların indekslerinin de bize verildiğini görüyoruz. writeUpper fonksiyonunu arrow fonksiyon şeklinde yazıldı. Eğer bu konuya tam vakıf değilseniz, aşağıdaki şekilde de yazabilirsiniz.

const isimler = ['Ahmet', 'Hasan','Ali', 'Fatma','Zeynep'];
function writeUpper(value, index) {
    console.log(index, value.toUpperCase());
}
isimler.forEach(writeUpper);

Bir sayı listesindeki sayıların tek mi çift mi olduğunu bulalım.

const sayilar = [ 1,2,6,9,5,4,7];

function tekMiCiftMi(sayi) {
    if(sayi % 2 === 0) console.log(sayi, 'çift sayı');
    else console.log(sayi, 'tek sayı');
}

sayilar.forEach(tekMiCiftMi);

Callback fonksiyonuna güncel değeri ve indeks değerini forEach fonksiyonu kendisi göndermektedir. Karşılarken istediğimiz ismi verebiliriz.

For Döngüsü ve ForEach Döngülerini Kaşılaştıralım

Farklı bir örnekte dizi üzerindeki işlemlerimizi for döngüsü ve ayrıca forEach döngüsüyle yaparak arasındaki farkı görelim. Örneğimizde renk disizinde olan renkleri ekrana bastıralım.

const renkler = ['Beyaz','Siyah','Mavi'];

console.log('for döngüsünün kullanımı');
for(i=0; i < renkler.length; i++) console.log(renkler[i]);

console.log('forEach döndüsünün kullanımı');
renkler.forEach(renk => console.log(renk));

İki döngü de çıktı olarak aynı sonucu verecek ve konsolo renkler dizisindeki tüm renkleri yazdıracaktır. Fakat forEach metodu pratik, kolay okunur ve daha etkin bir kullanıma sahiptir.

Array forEach ve for Döngülerinin Karşılaştırması

Sonuç Olarak

Array forEach metodu diziler üzerinde çalışırken işimizi kolaylaştırmak için tasarlandı. O zaman bizim de bu metodu gerektiğinde kullanmamız gerekiyor. Bilmemiz gerekenler kısaca, forEach metodu sırayla tüm dizi elemanlarını tanımladığımız callback fonsiyonuna gönderir. Boş bir dizi elemanı varsa o eleman üzerinde işlem yapmaz. Geriye undefined değerini gönderir.

Sizin de sormak istedikleriniz veya eklemek istediklerini varsa yorum bölümüne ekleyebilirsiniz.

JavaScript Array forEach Metodu Nasıl Kullanılır?