JavaScript Map Filter Reduce Kullanımı

Melih SAFRAN
29 Ağustos 2022 • 23 dakikalık okuma

JavaScript JS Map Filter Reduce Client Side Programlama Client Side Programming

JavaScript map, filter, reduce fonksiyonları ile daha az kod ile dizi işlemleri kolayca yapılabilmektedir.

Map, eşleştirme metodudur. Verilen işlemi tüm dizi elemanları için çalıştırır ve sonucu yeni dizi olarak döndürür. Örneğin; tüm dizi değerleri 10 ile çarpılıyor;

Kod

var arrayNumbers = [1, 2, 3, 4, 5, 6, 7, 8];

var arrayMapResult = arrayNumbers.map(function (item, index, array) {
    console.log("item :", item);
    console.log("index :", index);
    console.log("array :", array);

    return item * 10;
});

console.log("arrayMapResult :", arrayMapResult);

// SONUÇ: [ 10, 20, 30, 40, 50, 60, 70, 80 ]

Daha kısa yazım yöntemleri ile de kullanılabilir;

Kod

var arrayNumbers = [1, 2, 3, 4, 5, 6, 7, 8];

var arrayMapResult2 = arrayNumbers.map((item, index, array) => {
    console.log("item :", item);
    console.log("index :", index);
    console.log("array :", array);

    return item * 10;
});

console.log("arrayMapResult2 :", arrayMapResult2);

// SONUÇ: [ 10, 20, 30, 40, 50, 60, 70, 80 ]

Kod

var arrayNumbers = [1, 2, 3, 4, 5, 6, 7, 8];

var arrayMapResult3 = arrayNumbers.map(item => {
console.log("item :", item);

return item * 10;
});

console.log("arrayMapResult3 :", arrayMapResult3);

// SONUÇ: [ 10, 20, 30, 40, 50, 60, 70, 80 ]

Kod

var arrayNumbers = [1, 2, 3, 4, 5, 6, 7, 8];

var arrayMapResult4 = arrayNumbers.map(item => item * 10);
console.log("arrayMapResult4 :", arrayMapResult4);

// SONUÇ: [ 10, 20, 30, 40, 50, 60, 70, 80 ]

Örneğin dizideki tüm şehir isimleri map fonksiyonu ile büyük harfe çevrilebilir;

Kod

Filter, süzme metodudur. Verilen koşul ile eşleşen dizi elemanlarını yeni bir dizi olarak döndürür. Örneğin dizi içerisinden sadece çift sayılar filtreleniyor;

Kod

var arrayNumbers = [1, 2, 3, 4, 5, 6, 7, 8];

var arrayFilterResult = arrayNumbers.filter(function (item, index, array) {
    console.log("item :", item);
    console.log("index :", index);
    console.log("array :", array);

    return item % 2 === 0;
});

console.log("arrayFilterResult :", arrayFilterResult);

// SONUÇ: [ 2, 4, 6, 8 ]

Daha kısa yazım yöntemleri ile de kullanılabilir;

Kod

var arrayFilterResult2 = arrayNumbers.filter((item, index, array) => {
    console.log("item :", item);
    console.log("index :", index);
    console.log("array :", array);

    return item % 2 === 0;
});

console.log("arrayFilterResult2 :", arrayFilterResult2);

// SONUÇ: [ 2, 4, 6, 8 ]

Kod

var arrayFilterResult3 = arrayNumbers.filter(item => {
console.log("item :", item);

return item % 2 === 0;
});

console.log("arrayFilterResult3 :", arrayFilterResult3);

// SONUÇ: [ 2, 4, 6, 8 ]

Kod

var arrayFilterResult4 = arrayNumbers.filter(item => item % 2 === 0);
console.log("arrayFilterResult4 :", arrayFilterResult4);

// SONUÇ: [ 2, 4, 6, 8 ]

Örneğin dizideki sadece Marmara Bölgesi şehirleri filter fonksiyonu ile alınabilir;

Kod

Reduce azaltma, küçültme metodudue. Verilen işlem sonucuna göre tüm dizi elemanları için tek bir değer döndürür. Örneğin tüm dizi değerleri toplanıyor;

Kod

var arrayNumbers = [1, 2, 3, 4, 5, 6, 7, 8];

var resultSum = arrayNumbers.reduce(function (previousReturn, current, index, array) {
    console.log("previousReturn :", previousReturn);
    console.log("index :", index);
    console.log("current :", current);
    console.log("array :", array);

    return previousReturn + current;
}, 0);
console.log("resultSum :", resultSum);

// SONUÇ: 36

Daha kısa yazım yöntemleri ile de kullanılabilir;

Kod

var resultSum2 = arrayNumbers.reduce((previousReturn, current, index) => {
    console.log("previousReturn :", previousReturn);
    console.log("index :", index);
    console.log("current :", current);

    return previousReturn + current;
}, 0);

console.log("resultSum2 :", resultSum2);

// SONUÇ: 36

Kod

var resultSum3 = arrayNumbers.reduce((previousReturn, current) => {
    console.log("previousReturn :", previousReturn);
    console.log("current :", current);

    return previousReturn + current;
});
console.log("resultSum3 :", resultSum3);

// SONUÇ: 36

Kod

var resultSum4 = arrayNumbers.reduce((previousReturn, current) => previousReturn + current);
console.log("resultSum4 :", resultSum4);

// SONUÇ: 36

Örneğin dizideki en küçük kod değeri reduce fonksiyonu ile bulunabilir;

Kod

Örneğin dizideki bölgeye göre şehir sayısı bulunabilir;

Kod

Understand JavaScript Reduce With 5 Examples , thecodebarbarian.com, 29.08.2022 tarihinde alındı.
Array.prototype.reduce() , developer.mozilla.org, 29.08.2022 tarihinde alındı.
Türkiye'nin illeri , tr.wikipedia.org, 29.08.2022 tarihinde alındı.

Feragatname

JavaScript JS Map Filter Reduce Client Side Programlama Client Side Programming

JavaScript Map Filter Reduce Kullanımı

Array.map() Fonksiyonu

Kod

Kod

Kod

Kod

Array.map() Fonksiyonu Örneği

Kod

Array.filter() Fonksiyonu

Kod

Kod

Kod

Kod

Array.filter() Fonksiyonu Örneği

Kod

Array.reduce() Fonksiyonu

Kod

Kod

Kod

Kod

Array.reduce() Fonksiyonu Örneği

Kod

Kod

Kaynaklar

Beğen