← Back

JavaScript'de Map ve ForEach Arasındaki Farklar

August 3, 2023 (1y ago)

Bu blog yazımda sizlere, JavaScript'te diziler üzerinde gezinmeyi sağlayan "Map" ve "ForEach" yöntemlerinin farklarına değineceğim. Her iki yöntemde aynı amaca yönelik olsa da kullanım ve davranışları açısından önemli farklılık gösterirler.

ForEach

ForEach yöntemi, bir diziyi döngü (loop) ile gezinmek ve her eleman üzerinde işlem yapmak için kullanılır. Basit bir şekilde ifade etmem gerekirse, dizinin her elemanı için belirtilen bir işlemi gerçekleştirir. ForEach, daha az karmaşık işlemlerde kullanmak için uygundur ve dizi üzerinde gezinirken herhangi bir değer döndürmez. Yani, bir dizi üzerinde ForEach kullanıldığında, bu işlem genellikle çıktılar ile sonuçlanır.

Örneğin, aşağıdaki kodda, bir dizi oluşturuyoruz ve bu diziyi ForEach ile gezerek her elemanını 2 ile çarptığımızı varsayalım:

const sayilar = [1, 2, 3, 4, 5];
 
sayilar.forEach((sayi) => {
  console.log(sayi * 2); // [2, 4, 6, 8, 10]
});

Bu kodda, ForEach yöntemi her elemanı 2 ile çarpar ve sonucu konsola yazdırır. Ancak ForEach, yeni bir dizi döndürmez veya orijinal diziyi değiştirmez. Sadece her eleman için belirtilen işlemi yapar ve bitirir.

Map

Map yöntemi de bir dizi üzerinde gezinmek için kullanılır, ancak ForEach'ten farklı olarak, her eleman için yeni bir dizi oluşturarak sonuç döndürür. Map, mevcut diziyi değiştirmez ve her elemanı işlerken, bu işlemler sonucunda oluşan yeni bir dizi döndürür.

Yukarıdaki örneği Map yöntemiyle ele alalım:

const sayilar = [1, 2, 3, 4, 5];
 
const yeniDizi = sayilar.map((sayi) => {
  return sayi * 2;
});
 
console.log(yeniDizi); // [2, 4, 6, 8, 10]

Bu kodda, Map yöntemi orijinal diziyi değiştirmezken, her elemanı 2 ile çarpar ve sonuç olarak yeni bir dizi oluşturup bu yeni diziyi "yeniDizi" adlı değişkene atar. "yeniDizi" şimdi [2, 4, 6, 8, 10] olarak içeriği tutar.

Map, genellikle orijinal veriyi korumak ve her elemandan yeni bir dizi oluşturmak istediğiniz durumlarda kullanışlıdır.

İşin mutfağına bakalım

Map ve ForEach arasındaki farkı daha iyi anlamak için gerçek hayattan bir örnek düşünelim. Varsayalım ki bir dizi içinde birkaç çalışanın maaşlarını tutuyoruz ve bu maaşları 10% zam yapmak istiyoruz. Bunu hem ForEach hem de Map ile nasıl yapabileceğimize bakalım:

const maaslar = [3000, 2500, 4000, 3500];
 
// ForEach ile zam yapma
maaslar.forEach((maas, index) => {
  maaslar[index] = maas * 1.1; // Maaşı %10 artır
});
 
console.log(maaslar); // [3300, 2750, 4400, 3850]
 
// Orijinal diziyi değiştirdiğini görebiliriz.
const maaslar = [3000, 2500, 4000, 3500];
 
// Map ile zam yapma
const yeniMaaslar = maaslar.map((maas) => {
  return maas * 1.1; // Maaşı %10 artır ve yeni dizide tut.
});
 
console.log(yeniMaaslar); // [3300, 2750, 4400, 3850]
console.log(maaslar); // [3000, 2500, 4000, 3500]
 
// Orijinal diziyi değiştirmedi ve yeni bir dizi oluşturdu.

Görüldüğü gibi, ForEach, orijinal diziyi değiştirirken, Map yeni bir dizi oluşturarak orijinal veriyi korudu. Bu örnekte, Map yöntemi daha uygun görünüyor. Map uygun olmasının sebebi ise maaş verisinin önceki halini tutmak istiyor olabiliriz. Ancak, orijinal veriyi değiştirmek istiyorsak, ForEach yöntemini kullanabiliriz.

Özetle

Map ve ForEach, JavaScript'te diziler üzerinde gezinmek için kullanılan iki farklı yöntemdir. ForEach, dizinin elemanları için yan etkiler yaratırken, Map yeni bir dizi oluşturarak orijinal veriyi korur. Hangi yöntemi kullanacağınız, işlemlerinizin ve veri manipülasyonunuzun gereksinimlerine bağlı olacaktır. Basit işlemler yapmak için ForEach yeterli olabilirken, orijinal veriyi korumak ve yeni bir dizi oluşturmak için Map daha uygun olabilir.

Umarım bu yazım sizlere Map ve ForEach arasındaki farkları anlamanıza yardımcı olabilmişimdir. Kodlama yolculuğunuzda bu bilgilerin size faydalı olmasını dilerim!

Beni Twitter ve GitHub üzerinden takip ederseniz , mutlu olurum 😊