Array Method di Javascript yang Sering Saya Gunakan

07 Mei 2021

Pekerjaan coding sehari-hari tidak pernah lepas dari penggunakan Array, untuk menyimpan beberapa data dalam satu variabel.

Contoh Array dalam javascript, bisa dilihat pada kode berikut

const kue = ["Dadar Gulung", "Lemper", "Nagasari"]
const laukPauk = ["Tempe", "Ayam Goreng", "Kambing Guling"]

Setelah data tersimpan dalam sebuah Array, hal lain yang biasa kita lakukan adalah memanipulasinya menjadi data baru yang dapat kita gunakan sesuai kebutuhan. Berikut adalah daftar Array method yang paling sering saya gunakan untuk memanipulasi sebuah Array.

Array.map()

Dengan map kita bisa mengubah masing-masing elemen dari suatu Array dengan fungsi tertentu, dan menyimpan hasilnya sebagai Array baru. Berikut contohnya:

// kalikan masing-masing elemen dengan 3 (tiga)
const satu = [1, 2, 3]
const satuMap = satu.map(i => i * 3)
// value dari satuMap adalah [3, 6, 9]

// tambahkan informasi jumlah karakter tiap-tiap elemen ke dalam array 
const dua = ['donat', 'roti', 'bapao']
const duaMap = dua.map(item => ({
    name: item,
    length: item.length
}))
// value dari duaMap adalah [
//    { name: 'donat', length: 5 },
//    { name: 'roti', length: 4 },
//    { name: 'bapao', length: 5 }
// ] 

Array.filter()

Seperti namanya, filter digunakan untuk menyaring elemen Array sesuai kriteria tertentu. Tiap-tiap elemen yang sesuai dengan kriteria, akan disimpan sebagai Array baru. Berikut contohnya:

// hanya ambil elemen yang memiliki jumlah karakter lebih dari 4 
const satu = ['kerbau', 'kuda', 'ikan', 'harimau']
const satuFilter = satu.filter(i => i.length > 4)
// value dari satuFilter adalah ['kerbau' ,'harimau']

// hanya ambil elemen yang memiliki 3 orang anak
const dua = [
    { name: 'Budi', anak: 3 },
    { name: 'Dani', anak: 2 },
    { name: 'Didi', anak: 5 },
    { name: 'Gani', anak: 3 },
    { name: 'Wawan', anak: 0 }
] 
const duaFilter = dua.filter(i => i.anak === 3)
// value dari duaFilter adalah [
//   { name: 'Budi', anak: 3 },
//   { name: 'Gani', anak: 3 }
// ]

Array.reduce()

reduce digunakan untuk menggabungkan elemen-elemen dari sebuah array menjadi sebuah nilai tunggal. Berikut contohnya:

// menjumlahkan seluruh angka dalam array
const satu = [3, 4, 5, 2, 5]
const satuReduce = satu.reduce((acc, cur) => {
  return acc + cur
}, 0)
// value dari satuReduce adalah 19

// menggabungkan masing-masing elemen menjadi satu array
const dua = [
    [1, 2, 3],
    [4, 5],
    [6, 7, 8, 9]
]
const duaReduce = dua.reduce((acc, cur) => {
    return acc.concat(cur)
}, [])
// value dari duaReduce adalah [1, 2, 3, 4, 5, 6, 7, 8, 9]

reduce membutuhkan dua parameter, yang pertama adalah fungsi reducer dan yang kedua adalah nilai awal dari proses reduce. Pada contoh di atas, nilai awal yang digunakan adalah 0 dan []. Sedangkan fungsi reducer sendiri dapat menerima empat parameter, yaitu:

  • accumulator: nilai akumulasi dari proses reduce
  • current: nilai dari elemen yang sedang diproses
  • index (opsional): index dari elemen yang sedang diproses
  • array (opsional): nilai array awal

Array.find()

Dengan find kita bisa mencari elemen array yang sesuai dengan kriteria yang ditetapkan. Ketika ada elemen yang sesuai, maka proses find akan selesai.

// cari elemen pertama yang bernilai lebih besar dari 3
const satu = [1, 3, 6, 9, 12]
const satuFind = satu.find(i => i > 3)
// value dari satuFind adalah 4

// cari binatang pertama yang berkaki 4
const dua = [
    { tipe: 'gurita', kaki: 8 },
    { tipe: 'ayam', kaki: 2 },
    { tipe: 'kancil', kaki: 4 },
    { type: 'kerbau', kaki: 4 }
]
const duaFind = dua.find(i => i.kaki === 4)
// value dari duaFind adalah {
//   tipe: 'kancil',
//   kaki: 4
// }

Demikian, semoga bermanfaat.

tag: ,


Aldi Daswanto
Ditulis oleh Aldi Daswanto, full stack developer
Follow saya di Instagram, atau kontak saya via email di aldi[at]daswanto.com
© 2022, Dibuat menggunakan Gatsby