JavaScript’te “forEach()” Metodu Kullanımı
JavaScript’te “forEach()” metodu, dizi (array) üzerinde döngü oluşturmak için kullanılır ve dizinin her bir elemanı üzerinde belirtilen işlevi gerçekleştirir.
JavaScript’te “forEach()” Metodu
Diziler (array) üzerinde işlem yapmak için kullanılan metodumuz, ismini “her biri için” anlamına gelen “for each” ifadesinden alır ve bir dizi üzerindeki her bir öğeye belirli bir işlemi uygulamak için kullanılır. Söz dizimi (syntax) ise aşağıdaki gibidir:
|
1 2 3 |
array.forEach(function(currentValue, index, arr) { // işlemler burada yapılır }, thisValue); |
function(currentValue, index, arr): Bu bir callback fonksiyonudur ve üç parametre alır:currentValue: (Zorunlu) Geçerli elemanın değeri.index: (Opsiyonel) Geçerli elemanın dizin değeri.arr: (Opsiyonel)filter()metodunun çağrıldığı dizi.
thisValue: (Opsiyonel) Geri çağırma fonksiyonu (callback function) içerisinde kullanılacak olan this değerini belirtir.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
let obj = { value: 5, multiply: function(arr) { arr.forEach(function(item, index, array) { array[index] = item * this.value; }, this); // 'this' burada 'obj' objesine referans verir } }; let numbers = [1, 2, 3]; obj.multiply(numbers); console.log(numbers); // [5, 10, 15] |
Söz diziminde gösterilen thisValue ise opsiyonel bir parametredir. Bu parametre, geri çağırma işlevi içinde this olarak kullanılmak üzere bir değeri belirtir. Eğer bu parametre belirtilmezse, this değeri undefined olacaktır. İkinci parametreyi kullanarak this değerini belirtme özelliği, özellikle bir nesne metodunda forEach‘i kullanırken yararlı olabilir. Ancak bu özellik, pek kullanılmadığı gibi çoğu durumda gerekli olmaz. Aşağıdaki örneği inceleyiniz:
|
1 2 3 4 5 6 7 8 9 10 |
let cities = ["İstanbul", "Ankara", "İzmir"]; cities.forEach(function(city, index, arr) { console.log(`Şehir ${index + 1}/${arr.length}: ${city}`); }); // Çıktı: // Şehir 1/3: İstanbul // Şehir 2/3: Ankara // Şehir 3/3: İzmir |
Bu parametrelerin tamamını kullanmak zorunda değiliz. Eğer yalnızca mevcut değere ihtiyacınız varsa, currentValue parametresini kullanmak yeterli olacaktır. Örneğin:
|
1 2 3 4 5 |
let fruits = ['elma', 'muz', 'kiraz']; fruits.forEach(function(fruit) { console.log("Meyve: " + fruit); }); |
Yukarıdaki örnekte, her bir meyveyi konsola yazdırmak için yalnızca currentValue parametresini (bu örnekte fruit olarak adlandırılmıştır) kullandık.
“Arrow” Fonksiyonu ile “forEach” Metodu
JavaScript’te “arrow” fonksiyonu ile “forEach” metodumuzun söz dizimi aşağıdaki gibi olur:
|
1 2 3 |
array.forEach((currentValue, index, arr) => { // işlemler burada yapılır }); |
Aşağıdaki örneği inceleyiniz:
|
1 2 3 4 5 6 7 8 9 10 |
let cities = ["İstanbul", "Ankara", "İzmir"]; cities.forEach((city, index, arr) => { console.log(`Şehir ${index + 1}/${arr.length}: ${city}`); }); // Çıktı: // Şehir 1/3: İstanbul // Şehir 2/3: Ankara // Şehir 3/3: İzmir |
Arrow fonksiyonu (=>), normal fonksiyon sözdiziminin yerine geçer ve daha özlü bir yapı sağlar. Örnekte de görebileceğiniz gibi, function anahtar kelimesi yerine doğrudan parametreleri parantez içinde belirtip arrow işaretiyle fonksiyon gövdesine geçiş yapabilirsiniz.
JavaScript’te, normal fonksiyonlar dinamik bir this değeriyle çalışır. Bu durum, forEach içinde bir fonksiyon kullanırken, o fonksiyonun this değerine erişmesi gerektiğinde sorunlara yol açabilir.
Ancak, “arrow” (ok) fonksiyonları, kendi kapsamında bir this değeri yaratmazlar; onları çevreleyen kapsamdaki this değerini alırlar. Bu nedenle, forEach içinde arrow fonksiyonu kullanarak bu tür this sorunlarından kaçınılabilir.
Bu sözdizimini kullanarak, dizideki her bir öğe üzerinde işlem yapabilirsiniz ve this değeriyle ilgili potansiyel sorunları önleyebilirsiniz. “Arrow” fonksiyonları, kendi çevrelerindeki this değerini alacaklarından, dış kapsamdaki this değeriyle çalışmak istediğinizde oldukça kullanışlıdırlar. Örneğin:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function Person() { this.name = "Ali"; this.namesList = ["Veli", "Ayşe", "Fatma"]; this.addPrefixToNames = function() { // Arrow fonksiyonu sayesinde, bu fonksiyon içerisindeki 'this' değeri, // dışarıdaki 'Person' nesnesine ait 'this' değerini alır. this.namesList.forEach((currentName) => { console.log(this.name + " ve " + currentName); }); }; } const person = new Person(); person.addPrefixToNames(); // Çıktı: // Ali ve Veli // Ali ve Ayşe // Ali ve Fatma |
Yukarıdaki örneğimizde, addPrefixToNames fonksiyonu içerisinde this.name değerine erişmek istiyoruz. Eğer arrow fonksiyonu kullanmasaydık ve normal bir fonksiyon kullansaydık, this değeri o fonksiyonun kendi kapsamına ait olacaktı ve doğru çalışmayacaktı. Arrow fonksiyonunun lexically bağlanan this özelliği sayesinde, dış kapsamdaki this değerine sorunsuzca erişebiliriz.
“forEach” Metodunu Kullanırken Nelere Dikkat Etmeliyiz?
JavaScript’te “forEach()” metodu kullanırken nelere dikkat etmem gerekir sorumu araştırırken bazı önemli noktaları not aldım:
- Döndürme:
forEachmetodu bir değer döndürmez (ya da daha spesifik olarak,undefineddöndürür). ZiraforEachmetodu temelde dizinin her bir öğesini işlemek için kullanılır. Eğer bir dizi üzerinde işlem yaparak yeni bir dizi elde etmek istiyorsak, map() metodunu kullanmalıyız. - Dizi Değişiklikleri:
forEach()döngüsü başladığında dizi uzunluğu sabitlenir. Döngü başladıktan sonra yapılan değişiklikler (ekleme veya çıkarma) geri çağırma fonksiyonunun çalışmasını etkilemez. - Döngüyü Erken Sonlandırmak:
forEach()kullanarak döngüyü erken sonlandıramazsınız. Yanibreakya dareturnifadeleriforEach()içinde döngüyü durduramaz. Eğer erken sonlandırma ihtiyacınız varsa,fordöngüsü ya dafor...ofyapısını kullanmalısınız. - Boş Elemanlar:
forEach()metodu, dizideki boş öğeleri atlar. Yani, eğer dizinizdeundefinedya da boş değerler varsa,forEach()bu öğelere geri çağırma fonksiyonunu uygulamaz. - Sadece Diziler İçin:
forEach()metodu sadece diziler için tanımlıdır. - Performans: Büyük diziler üzerinde işlem yaparken,
forEach()‘un klasikfordöngüsüne göre biraz daha yavaş olabileceğini göz önünde bulundurmalısınız. Eğer performans kritikse ve çok büyük diziler üzerinde çalışıyorsanız, alternatif yöntemleri değerlendirmenizde fayda var.