U2FsdGVkX1+25AyyCo8UPsLK1A8YBpiAtAtE4voJoZU6v2phc92s7B5BeG4irtrTwvQijqbnotwWq2TT6FmYzQ==
map filter dan reduce

Method map, filter, dan reduce sering kita butuhkan dalam menuliskan sebuah program javascript apalagi ketika kita ingin belajar framework javascript misalnya react maka kita wajib mengetahui ketiga fungsi dan implementasinya.

1. Map()

Seringkali dalam menuliskan program mengambil array dan memodifasi setiap element di dalamnya, contohnya mengambil nama dari array daftar nama, menambahkan barang dari daftar darang. Dan lain sebagainya.

Map adalah metode pada array yang mana map ini akan mengembalikan nilai secara persis pada setiap element di dalamnya, kemudian menghasilkan nilai baru yang sesuai dengan elemen yang dikembalikan tadi.

Bagaimana cara menggunakan map? Kita implementasikan langsung saja agar mudah untuk dipahamin.

Misalkan kita membuat todolist sederhana yang mana di todolist ini berisikan daftar belajar kita selama 1 hari:

var todo = [
    {
        'title': "Fundamental javascript",
        'duration': 120
    },
    {
        'title': "HTML",
        'duration': 30
    },
    {
        'title': "css",
        'duration': 30
    }
]

Katakanlah kita ingin mengambil nilai todolist di atas maka kita bisa menggunakan perulangan for.

var newTodo = []
for (let i = 0; i < todo.length; i++) {
     newTodo.push(todo[i])
}

Dengan menggunakan method map kita bisa menuliskan program secara singkat

var newTodo = todo.map((todo, index, array)=>todo)

Baca Juga: Menggunakan Method Map Secara Detail

2. Filter()

Sesuai dengan namanya method filter digunakan untuk menfilter value, misalkan kita ingin melakukan filter angka maka kita bisa menggunakan method yang satu ini. Biasanya method ini di implementasikan saat membuat projek searching, kita membutuhkan filter untuk mencari valuenya. Untuk lebih memahami lagi mengenai method filter kita bisa mempraktikan contoh program sederhana:

Misalkan saya memiliki data usia masyarakat di desa kandangan. Data yang saya dapatkan meliputi umur 12, 16, 18, 24. Dan pemerintah ingin mengetaui data umur yang lebih dari 14 tahun?

Maka kita bisa menggunakan method filter ini:

var age = [12, 16, 18, 24]

newAge = age.filter((item)=>item>13) //output [16,18,24]

3. Reduce

Reduce ini biasa digunakan untuk mengurangi nilai berdasarkan element pada array. Sama halnya dengan map, fungsi ini memanggil tiap element atau mengembalikan tiap element.

Syntax pemakaian reduce seperti ini:

Array.reduce((value, element, index, array) =>…., initial element)

Penjelasan Singkat:

Value: value ini adalah pengurangan pada setiap callback

Element: nilai dari elementnya

Index: index dari 0-N

Array: array yang memanggil fungsi ini.

Initial element: Opsional, nilai yang digunakan sebagai nilai awal di callback yang pertama adalah 0.

Contoh kasus

var age = [12, 16, 18, 24].reduce((prev, current)=>prev+current, 0)

pada program di atas akan menambahkan memanggil atau mengembalikan tiap element di mulai dari index ke 0 kemudian menjumlahkanya.

Itulah pembahasan singkat mengenai method map, filter, dan reduce pada javascript untuk artikel selanjutnya saya akan lebih menekankan ke projek react js dengan melakukan pendekatan ketiga method ini. Tunggu artikel selanjutnya yah

Saya sangat suka dengan dunia web developer dan mobile app development jika pembaca tertarik silahkan kunjungi akun github saya @naufalyukafi
Loading...