Advance JavaScript 9 - higher order function. filter,map, reduce

Advance JavaScript 9 - higher order function. filter,map, reduce

3 function ini merupakan prototype dari type data array

array.prototype.filter

array.prototype.map

array.prototype.reduce

Disini Kita akan memfokuskan 3 function ini Karena menurut saya ini paling sering digunakan ,contoh lainya seperti find Dan lain lain itu tidak akan saya sampaikan di sini.

Kita contohkan atau ilustrasikan penggunaan filter map Dan reduce ini kedalam sebuah Bahan makanan

Misalkan Kita mempunyai Bahan makanan untuk membuat sandwich yaitu :daging,roti,Dan sayur sayuran nya

1.filter
Lalu Kita filter Bahan makanan nya mengambil hanya sayuran nya saja.

2.map
Lalu Bahan sandwich yang Kita filter yang mengambil sayuran nya, sayuran nya Kita potong atau map menjadi Bahan makanan baru berupa Bahan makanan yang sudah terpotong.

3.reduce
Lalu reduce, reduce ini Kita menggabungkan ,misal nya menggabungkan semua Bahan makanan tadi menjadi sandwich.

Saya anggap kalian sudah bisa mengilustrasikan filter map reduce ini , sekarang Kita lihat contoh code nya

1.filter

Liat code berikut

const angka = [-1,8,9,1,4,-5,-4,3,2,9]

Mencari angka >= 3 dengan for

const newangka = []

for (let i = 0; i <= angka.length;i++){
if ( angka[i] >= 3 ){

newangka.push(angka[i]);
}

}

console.log(newangka);

Itu Cara untuk menentukan angka yang lebih besar sama dengan 3 ,cukup ribet Dan panjang sekali code nya ,

Mencari angka >= 3 dengan filter

const angka = [-1,8,9,1,4,-5,-4,3,2,9]
const newangka = angka.filter( a => a <= 3);

console.log(newangka)

Dengan mengimplementasikan pembelajaran kita tentang arrow function Dan filter ,code Kita tidak serumit Dan sebanyak menggunakan for tadi.

2.map
Untuk map Kita akan memetakan tiap tiap element yang Ada didalam array nya menggunakan fungsi yang baru

Misal nya

Saya mau kalian semua angka dengan 2
Artinya saya ingin mempunyai array baru yang isinya element ini dikali 2

const angka = [-1,8,9,1,4,-5,-4,3,2,9]
const newangka = angka.map( a => a * 2);

console.log(newangka)

Maka nanti akan muncul Nilai baru dari Nilai array sebelumnya

3.reduce
Kita satukan element nya ,misal Kita akan menjumlahkan Nilai Nilai dari array tersebut.

const newangka = angka.reduce((ac, current) => ac + current);

console.log(newangka)

ac adalah hasil dari proses nya,
current  element array yang sedang di looping nya.

Sebenarnya nama dari parameter nya itu bebas bisa apa Saja.

Sebenarnya setelah current itu Ada Nilai awal 0 seperti ini

const newangka = angka.reduce((ac, current) => ac + current, 0);

Dan nanti Nilai awal nya itu bisa kalian ganti misal kalian ingin Nilai awal nya itu 10

Ada method yang menggabungkan ketiga function tersebut yaitu method chaining dengan menggunakan .(dots)

Contoh

const hasil = angka.filter(a => a > 5)
.map(a => a * 2)
.reduce((acc, curr) => acc + curr);

console.log(hasil);

Sekian dari saya silahkan kalian latihan Dan jangan lupa coba coba juga function function yang lainnya.