- Konu sahibi
- #1
JavaScript’te
Örneğin bir sayı dizisindeki değerlerin karesini almak için:
Beklenen çıktı:
Burada
İndisi kullanarak etiket üretmek gibi işlemler de yapılabilir:
Çıktı şöyledir:
Her callback çağrısında bir değer döndürmek önemlidir. Süslü parantez kullanılan arrow function içinde
Sonuç
Hangi metodu seçeceğiniz, işlem sonunda yeni bir diziye ihtiyaç duyup duymadığınıza bağlıdır.
Örneğin fiyatları dönüştürmek için
Çıktı
Metot genellikle dizide kullanılır, ancak teknik olarak generic'tir: length ve sayısal özellikleri olan array-like değerlere call ile uygulanabilir. Başlangıçta böyle bir veriyi Array.from ile diziye çevirip map çağırmak daha açık olabilir. Boş yuvalı dizide callback boş yuvalar için çağrılmaz. Ayrıca yalnızca yan etki yapmak için
Hayır. Callback async ise yeni dizinin elemanları Promise olur; map bu işlemleri beklemez. Birlikte sonuç almak için Promise.all kullanılabilir. Çok büyük bir listede bu yaklaşım çok sayıda eşzamanlı işlem başlatabileceğinden gerektiğinde eşzamanlılığı ayrıca sınırlayın.
Hayır. Map, anahtarlara karşılık değer saklayan koleksiyondur; set/get gibi metotları vardır. Array.map ise eleman dönüştürüp yeni dizi üretir. Hangisinin gerektiğini yalnız ada değil işleme bakarak seçin.
map(), bir dizinin her elemanı üzerinde aynı dönüşümü çalıştırıp sonuçlardan yeni bir dizi oluşturan dizi metodudur. Bu rehber büyük M ile yazılan anahtar-değer koleksiyonu Map'i değil Array.prototype.map metodunu anlatır. Metodun kendisi kaynak diziyi doğrudan değiştirmez; callback fonksiyonunun döndürdüğü değer, yeni dizinin ilgili elemanı olur.Örneğin bir sayı dizisindeki değerlerin karesini almak için:
Kod:
const sayilar = [1, 2, 3, 4];
const kareler = sayilar.map((sayi) => sayi * sayi);
console.log(kareler);Beklenen çıktı:
Kod:
[1, 4, 9, 16]Burada
map() her sayı için callback’i bir kez çalıştırır. Callback’in döndürdüğü sayi * sayi sonuçları kareler dizisine sırasıyla eklenir. sayilar dizisi ise aynı kalır.map nasıl çalışır?
map() callback fonksiyonuna en fazla üç bilgi verir:- İlk parametre: İşlenen elemanın değeri.
- İkinci parametre: Elemanın dizideki indisi.
- Üçüncü parametre: Üzerinde işlem yapılan kaynak dizi.
İndisi kullanarak etiket üretmek gibi işlemler de yapılabilir:
Kod:
const urunler = ["Kalem", "Defter", "Çanta"];
const etiketler = urunler.map((urun, indis) => {
return `${indis + 1}. ${urun}`;
});
console.log(etiketler);Çıktı şöyledir:
Kod:
["1. Kalem", "2. Defter", "3. Çanta"]Her callback çağrısında bir değer döndürmek önemlidir. Süslü parantez kullanılan arrow function içinde
return yazılmazsa callback undefined döndürür:
Kod:
const sayilar = [1, 2, 3];
const hatali = sayilar.map((sayi) => {
sayi * 2;
});
console.log(hatali);Sonuç
[undefined, undefined, undefined] olur. Doğru kullanım ya açıkça return yazmak ya da tek satırlı ifadede süslü parantez kullanmamaktır:
Kod:
const dogru1 = sayilar.map((sayi) => {
return sayi * 2;
});
const dogru2 = sayilar.map((sayi) => sayi * 2);map, filter ve forEach farkı
Hangi metodu seçeceğiniz, işlem sonunda yeni bir diziye ihtiyaç duyup duymadığınıza bağlıdır.
| Metot | Temel amacı | Sonuç |
|---|---|---|
| map() | Her elemanı dönüştürmek | Aynı uzunlukta yeni dizi |
| filter() | Koşulu sağlayanları seçmek | Daha kısa veya aynı uzunlukta yeni dizi |
| forEach() | Her eleman için yan etki çalıştırmak | Kullanışlı bir dizi sonucu yoktur |
Örneğin fiyatları dönüştürmek için
map(), yalnızca stokta olan ürünleri seçmek için filter(), sonuç üretmeden log yazmak için forEach() daha uygun seçimdir. Bir diziyi hem filtreleyip hem dönüştürmek gerekiyorsa metotlar zincirlenebilir:
Kod:
const fiyatlar = [50, 120, 200, 80];
const indirimli = fiyatlar
.filter((fiyat) => fiyat >= 100)
.map((fiyat) => fiyat * 0.9);
console.log(indirimli);Çıktı
[108, 180] olur. Önce 100 ve üzerindeki fiyatlar seçilir, ardından seçilen değerler yüzde 10 azaltılır.Kullanım adımları ve dikkat edilmesi gerekenler
- Yeni dizide her kaynak elemanı için hangi değerin bulunacağını belirleyin.
- Kaynak dizinin ardından
.map()yazın ve callback fonksiyonunu verin. - Callback içinde yeni elemanı döndürün; gerekiyorsa değer, indis veya kaynak dizi parametrelerini kullanın.
- Dönen yeni diziyi bir değişkene atayın ya da doğrudan sonraki bir işlemde kullanın.
- Sonucu
console.log()ile kontrol edin. Beklenmeyenundefineddeğerleri genellikle eksikreturnkullanımına işaret eder.
Metot genellikle dizide kullanılır, ancak teknik olarak generic'tir: length ve sayısal özellikleri olan array-like değerlere call ile uygulanabilir. Başlangıçta böyle bir veriyi Array.from ile diziye çevirip map çağırmak daha açık olabilir. Boş yuvalı dizide callback boş yuvalar için çağrılmaz. Ayrıca yalnızca yan etki yapmak için
map() kullanmak yerine forEach() tercih edin. Callback içinde dışarıdaki değişkenleri değiştirmek mümkün olsa da bu yaklaşım kodun izlenmesini zorlaştırabilir; dönüş değerini üretmeye odaklanmak daha okunaklıdır.Sık sorulan sorular
map içinde async fonksiyon kullanınca sonuç hemen veri olur mu?
Hayır. Callback async ise yeni dizinin elemanları Promise olur; map bu işlemleri beklemez. Birlikte sonuç almak için Promise.all kullanılabilir. Çok büyük bir listede bu yaklaşım çok sayıda eşzamanlı işlem başlatabileceğinden gerektiğinde eşzamanlılığı ayrıca sınırlayın.
Büyük harfle Map ile küçük harfle map aynı özellik mi?
Hayır. Map, anahtarlara karşılık değer saklayan koleksiyondur; set/get gibi metotları vardır. Array.map ise eleman dönüştürüp yeni dizi üretir. Hangisinin gerektiğini yalnız ada değil işleme bakarak seçin.
