JavaScript’te forEach() metodu, bir array içerisindeki tüm elemanları tek tek dolaşmak ve her eleman üzerinde işlem yapmak için kullanılır.
Modern JavaScript geliştirme süreçlerinde en sık kullanılan array metodlarından biridir. Özellikle API’den gelen verileri ekrana yazdırma, loglama, HTML oluşturma ve her eleman üzerinde işlem yapma gibi senaryolarda oldukça yaygın olarak kullanılmaktadır.
Bu yazıda JavaScript forEach() metodunun ne işe yaradığını, nasıl kullanıldığını ve gerçek hayatta karşılaşabileceğiniz örnekleri inceleyeceğiz.
JavaScript forEach() Metodu Nedir?
forEach(), bir array’in her elemanını sırayla ziyaret eder ve her eleman için callback fonksiyonunu çalıştırır.
Temel kullanım şekli aşağıdaki gibidir.
array.forEach(function(item) {
});
Arrow Function kullanımı ise şu şekildedir.
array.forEach(item => {
});
Basit forEach() Örneği
Aşağıdaki örnekte array içerisindeki tüm elemanlar ekrana yazdırılmaktadır.
const fruits = ["Apple", "Orange", "Banana"];
fruits.forEach(fruit => {
console.log(fruit);
});
Çıktı:
Apple
Orange
Banana
Görüldüğü gibi forEach() array’in her elemanını tek tek dolaşmaktadır.
Index Bilgisini Kullanma
forEach() callback fonksiyonunda ikinci parametre olarak index değeri alınabilir.
const fruits = ["Apple", "Orange", "Banana"];
fruits.forEach((fruit, index) => {
console.log(index, fruit);
});
Çıktı:
0 Apple
1 Orange
2 Banana
Bu yöntem özellikle sıra numarası göstermek istediğiniz durumlarda oldukça kullanışlıdır.
Object Dizilerinde forEach() Kullanımı
Gerçek projelerde çoğunlukla object dizileri ile çalışılır.
const users = [
{
id: 1,
name: "Ahmet"
},
{
id: 2,
name: "Mehmet"
}
];
users.forEach(user => {
console.log(user.name);
});
Çıktı:
Ahmet
Mehmet
HTML Oluşturma Örneği
forEach() metodu dinamik HTML oluştururken sık kullanılmaktadır.
const products = [
"Laptop",
"Mouse",
"Keyboard"
];
products.forEach(product => {
console.log(`<li>${product}</li>`);
});
Bu yapı özellikle DOM işlemlerinde oldukça yaygın kullanılmaktadır.
Toplam Hesaplama
forEach() kullanılarak toplam hesaplanabilir.
const numbers = [10, 20, 30, 40];
let total = 0;
numbers.forEach(number => {
total += number;
});
console.log(total);
Çıktı:
100
Ancak sadece toplam almak istiyorsanız bu işlem için reduce() metodunun tercih edilmesi daha uygun olacaktır.
API Verileri ile Kullanım
API’den gelen kullanıcı listesini ekrana yazdırmak için forEach() kullanılabilir.
const users = [
{
id: 1,
name: "Ahmet"
},
{
id: 2,
name: "Ayşe"
},
{
id: 3,
name: "Mehmet"
}
];
users.forEach(user => {
console.log(user.name);
});
Gerçek projelerde bu yapı oldukça sık karşınıza çıkacaktır.
Array Değerlerini Güncelleme
forEach() ile object içerikleri güncellenebilir.
const users = [
{
name: "Ahmet",
active: false
},
{
name: "Mehmet",
active: false
}
];
users.forEach(user => {
user.active = true;
});
console.log(users);
Bu örnekte object referansları değiştirildiği için orijinal array de güncellenmektedir.
forEach() Return Değeri
Birçok geliştirici forEach() metodunun yeni bir array döndürdüğünü düşünmektedir.
Ancak forEach() herhangi bir değer döndürmez.
const numbers = [1, 2, 3];
const result = numbers.forEach(number => number * 2);
console.log(result);
Çıktı:
undefined
Eğer yeni bir array oluşturmak istiyorsanız map() metodunu kullanmanız gerekir.
forEach() ve map() Arasındaki Fark
| Metod | Özellik |
|---|---|
| forEach() | Her eleman üzerinde işlem yapar, değer döndürmez. |
| map() | Her elemanı dönüştürerek yeni bir array oluşturur. |
Kısacası;
- İşlem yapmak istiyorsanız forEach()
- Yeni array oluşturmak istiyorsanız map()
kullanılmalıdır.
forEach() ve for Döngüsü Arasındaki Fark
| forEach() | for |
|---|---|
| Daha okunabilir kod sağlar. | Daha esnektir. |
| break ve continue kullanılamaz. | break ve continue kullanılabilir. |
| Callback fonksiyonu ile çalışır. | Klasik döngü yapısıdır. |
Performans açısından çoğu senaryoda aralarında önemli bir fark bulunmamaktadır.
Yaygın Hatalar
return Kullanmak
numbers.forEach(number => {
return number * 2;
});
Bu kullanım yeni bir array oluşturmaz.
break Kullanmak
numbers.forEach(number => {
if (number === 3) {
break;
}
});
Bu kod hata verecektir çünkü forEach() içerisinde break kullanılamaz.
continue Kullanmak
Aynı şekilde continue ifadesi de forEach() içerisinde kullanılamaz.
Bu tür durumlarda klasik for döngüsü tercih edilmelidir.
Kullanım Alanları
JavaScript forEach() metodu aşağıdaki senaryolarda sıklıkla kullanılmaktadır.
- API verilerini dolaşma
- HTML listeleri oluşturma
- Object dizileri üzerinde işlem yapma
- Log kayıtları oluşturma
- DOM güncelleme işlemleri
- Form verilerini işleme
- Toplu veri güncelleme
Sonuç
JavaScript forEach() metodu, array içerisindeki her eleman üzerinde işlem yapmak için kullanılan en temel metodlardan biridir.
Yeni bir array oluşturmadığı için veri dönüştürme işlemlerinde map(), filtreleme işlemlerinde filter(), tek bir sonuç üretmek için ise reduce() tercih edilmelidir.
Bununla birlikte, sadece her eleman üzerinde işlem yapılacaksa veya ekrana veri yazdırılacaksa forEach() en doğru seçeneklerden biridir.
Sık Sorulan Sorular (SSS)
forEach() ne işe yarar?
Array içerisindeki tüm elemanları sırayla dolaşır ve her eleman için belirtilen fonksiyonu çalıştırır.
forEach() yeni bir array döndürür mü?
Hayır. forEach() herhangi bir değer döndürmez. Dönüş değeri undefined‘dır.
forEach() orijinal array’i değiştirir mi?
Primitive değerleri değiştirmez. Ancak array içerisinde object bulunuyorsa object özellikleri güncellenebilir.
forEach() ile break kullanılabilir mi?
Hayır. forEach() içerisinde break veya continue kullanılamaz.
forEach() ile map() arasındaki fark nedir?
forEach() işlem yapmak için kullanılır. map() ise yeni bir array oluşturur.
forEach() asenkron işlemlerde kullanılabilir mi?
Kullanılabilir ancak await ile beklenen davranışı her zaman sağlamaz. Asenkron işlemlerde çoğu zaman for...of döngüsü daha uygun bir seçimdir.
