Belajar Javascript Map Reduce dan Filter

Di javascript terdapat function .reduce(), .map(), dan .filter() secara bawaan, map dan reduce adalah function yang bisa melakukan perhitungan dan dihimpun dalam satu tempat berupa variabel yang asalnya dari sebuah array yang menghitung nilai tunggal darinya. Contoh lain melakukan perulangan, menjumlahkan data array berupa angka, itu salah satu contohnya. Contoh lain lagi misalnya untuk menemukan orang dengan tahun kelahiran paling terkecil dalam sebuah kumpulan data array of objects.

Menggunakan Map di Array Object javascript

salah satu contoh sederhana katakanlah teman-teman telah menerima array yang berisi beberapa object yang masing-masing mewakili satu orang dari data users. tetapi, hal yang benar-benar teman-teman butuh kan adalah hanya sebuah array yang hanya berisi id nya saja dari setiap orang.

• contoh bentuk data users :

// data users
var users = [
  { id: 126, name: 'Sigit' },
  { id: 427, name: 'Desi' },
  { id: 125, name: 'Tyas' },
  { id: 224, name: 'Intan' },
];

// output yang diinginkan
[126, 427, 125, 224];

maka kita bisa gunakan function .map() sebagai berikut:

const usersIds = users.map((user) => user.id);

contoh lain menggunakan .map()

var arr = [332, 112, 122, 394, 116, 258, 269];
var newArr = arr.map((elemen) => {
  return elemen * 2;
});

console.log(newArr); //664,224,244,788,232,516,538

Menggunakan Reduce di Array Object javascript

Sama seperti .map(), .reduce() function ini juga menjalankan sebuah callback untuk setiap elemen array. Yang berbeda di sini adalah ketika pengurangan meneruskan dari hasil memanggil balik ini (akumulator) dari satu elemen array ke elemen array lainnya.

Contoh kode nya:

var cities = [
  {
    id: 10,
    name: 'godam',
    amount: 1400096,
  },
  {
    id: 2,
    name: 'bandung',
    amount: 30003,
  },
  {
    id: 41,
    name: 'ciamis',
    amount: 161111,
  },
  {
    id: 99,
    name: 'cimahi',
    amount: 2212333,
  },
];

var totalAmount = cities.reduce(function (accumulator, city) {
  return accumulator + city.amount;
}, 0);

console.log(totalAmount); //3803543

Menggunakan Filter di Array Object javascript

Metode .filter() membuat array baru yang berisi dengan semua elemen array yang ingin dicari dan sesuai kondisi yang diterapkan oleh fungsi kemudian di call back. Berikut ini contoh penggunaannya :

var arr = [332, 112, 122, 394, 116, 258, 269];
var newFilterArr = arr.filter((element) => {
  return element > 300;
});
console.log(newFilterArr); //[332, 394]

contoh lain .filter()

a = [5, 4, 3, 2, 1];

smallvalues = a.filter(function (x) {
  return x < 3;
}); // [2, 1]

everyother = a.filter(function (x, i) {
  return i % 2 == 0;
}); // [5, 3, 1]

Penjelasan :

• Jika dalam badan function filter kondisi mengembalikan true maka elemen akan dikembalikan ke array baru. Jika kondisi salah tidak terpenuhi, maka elemen tidak dikembalikan ke array baru.

• Pada dasarnya, jika fungsi sebuah callback mengembalikan nilai boolean true, ketika elemen akan berada di array yang dihasilkan. jadi jika mengembalikan nilai false, maka tidak akan terjadi untuk melanjutkan nilai balikan.

menggunakan semuanya

var personnel = [
  {
    id: 5,
    name: 'Sigit',
    score: 98,
    isPaid: true,
  },
  {
    id: 82,
    name: 'Desi',
    score: 73,
    isPaid: false,
  },
  {
    id: 22,
    name: 'Tayas',
    score: 20,
    isPaid: true,
  },
  {
    id: 15,
    name: 'Intan',
    score: 43,
    isPaid: false,
  },
  {
    id: 11,
    name: 'Ryan',
    score: 71,
    isPaid: true,
  },
];
const paidUsers = personnel
  .filter((person) => person.isPaid)
  .map((randId) => randId.id + randId.score)
  .reduce((acc, score) => acc + score, 0);

console.log(paidUsers); //227

Penjelasan :

• dengan menggabungkan semua function kita bisa mengoper data value hasil balikan di setiap function.

Kesimpulan

Kita bisa menggabungkan semua metode function array di javascript secara bersamaan sehingga menghasilkan sebuah kombinasi data tanpa melakukan perulangan seperti memakai for atau .forEach(). dengan demikian teman-teman tidak mendapatkan kode yang berantakan bersarang for di dalam for ketika misalnya mengelola data REST API dari responses.