Javascript forEach Örnekleri

Javascript forEach metodu dizinin tüm elemanları için verilen bir fonksiyonu çalıştırmak için kullanılır. Bunun anlamı, callback olarak fonksiyon dizinin her bir elemanı için ayrı ayrı çalışacaktır.

Javascript forEach kullanımı oldukça kolay bir metoddur. Verilen fonksiyonu tüm dizi değerleri için çalıştırır.

JavaScript Array forEach Metodu Nasıl Kullanılır? yazımızda forEach metodunun ayrıntılı incelemesini bulabilirsiniz.

forEach metodunu kısaca tanıdığımıza göre şimdi örneklere geçebiliriz. İlk yapacağımız örnekte, verilen isimler dizisindeki tüm elemanları büyük harfe çevireceğiz.

Dizi İçerisindeki Tüm Elemanları Büyük Harfe Çevirme

Javascript metinsel ifadeleri büyük harfe çevirmek için toUpperCase string metodunu bize sunuyor. Şimdi elimizde bir isimler dizisi olduğunu varsayalım ve tüm elemanlarını büyük harfe çevirelim.

const isimler = ['Ahmet', 'Bekir', 'Hasan', 'Nuri', 'Şaban'];

isimler.forEach((elaman, index, dizi) => dizi[index] = dizi[index].toUpperCase());

console.log(isimler);
// Ekrana
// [ 'AHMET', 'BEKIR', 'HASAN', 'NURI', 'ŞABAN' ]
// yazdırır.

Bu örnekte yaptığımız oldukça basit bir işlem. forEach bize üç adet değişken veriyor.

• eleman dizinin o an işlenen elemanı.
• index o an işlenen elemanın indeksi.
• dizi üzerinde işlem yapılan dizi.

NOT : Burada değişkenlere verilen isimler tamamen bize kalmıştır. Önemli olan sıralamalardır. Değerlerini forEach metodu doldurur.

Sonrasında satır içi olarak dizi[index] = dizi[index].toUpperCase()) işlemini yapıyoruz. Bu kodun anlamı üzerinde çalışılan dizinin, o anki elemanına, dizini o anki elemanının tüm harflerini büyük yaparak atamaktır. Görüldüğü gibi oldukça basit.

Dizi İçerisindeki Tüm Elemanların Karesini Alma

İkinci işlemimizde dizi içerisindeki tüm elamanların karesini alarak ekrana yazdıracağız.

const dizi = [ 1, 3, 5, 7, 9];

dizi.forEach(item => console.log(item * item));
// Ekrana
// 1, 9, 25, 49, 81
// yazdırır.

Array İçindeki Sayıların Tek Mi Çift Mi Olduğunu Bulma

Şimdi satır içi değil, ayrı bir callback fonksiyon çağırarak bir dizi içerisindeki elemanları tek sayı mı, çift sayı mı olduğunu bulalım.

const sayilar = [ 1, 2, 45, 28, 101];

const tekMiCiftMi = (item) => {
    if(item % 2 === 0) {
        console.log(`${item} sayısı ÇİFT sayıdır`);
    } else {
        console.log(`${item} sayısı TEK sayıdır`);
    }
}

sayilar.forEach(item => tekMiCiftMi(item));

// Konsola
// 1 sayısı TEK sayıdır
// 2 sayısı ÇİFT sayıdır
// 45 sayısı TEK sayıdır
// 28 sayısı ÇİFT sayıdır
// 101 sayısı TEK sayıdır
// yazdır.

Bildiğiniz gibi % operatörü bir bölme işleminden kalan sonucu verir. Eğer kalan 0 ise o sayı çift sayıdır demektir.

Yukarıdaki örneğimizde forEach dizinin tüm elemanları için tekMiCiftMi fonksiyonunu çağıracak ve bu fonksiyonun çalışmasını sağlayacaktır.

Dizi İçerisindeki Elemanlar İle Bir Seçim Listesi (Select List) Oluşturma

Şimdi bir diğer örnek yapalım. Bu örneğimizde elimizde bulunan bir şehir dizisini kullanarak bir seçim listesi ( select list ) oluşturalım.

<html>
<head>
    <title>forEach İle Select / Option Oluşturma</title>
</head>
<body>
    <h1>Şehir Seç</h1>
    <form>
        İsim: <input type="text" name="isim" /> <br />
        Şehir: <select>
            <script>
                const sehirler = ['Ankara', 'Bursa', 'İstanbul', 'Gümüşhane', 'Kocaeli'];
                sehirler.forEach((item, index) => document.write(`<option>${item}</option>`));
            </script>
        </select><br />
        <button type="submit">Gönder</button>
    </form>
</body>
</html>

Örneğimizi çalıştırdığınızda aşağıdaki sonucu göreceksiniz.

Sonuç

Javascript array forEach metodu, bir fonksiyonu dizinin tüm elemanlarını uygulamak için kullanılır. Bu yazımızda Javascript forEach örneklerini gördük.

Sorularınızı yorumlardan bize yazmayı unutmayınız.