tutorial
January 28, 2019
Pengulangan (Loop) Yang Baik Dalam Javascript
Pengulangan (Loop) Yang Baik Dalam Javascript - Pada artikel kali ini kita akan membahas tentang looping atau pengulangan, dengan menggunakan for loop dan metode array supaya koding kita terlihat rapi dan mudah di baca. Looping atau pengulangan berguna ketika kalian ingin memanipulasi data dalam sebuah array atau objek.
For in loop
Dengan menggunakan for in loop kalian tidak perlu mengiterasi atau mengulangi indeks array atau objek key secara manual.
//iterasi pada array
let arr = [1, 2, 3, 4, 5]
for (let index in arr) {
console.log(arr[index])
}
// Output: 1,2,3,4,5
//iterasi pada objek
let obj = { id: 1, msg: 'haii cantik..' }
for (let key in obj) {
console.log(obj[key])
}
// Output: 1, haii cantik..For of loop
Dengan menggunakan for of loop kalian bisa mendapatkan nilai pada indeks tertentu, pengulangan ini hanya bisa digunakan pada array.
let arr = [1, 2, 3, 4, 5]
for (let val of arr) {
console.log(val)
}
// Output: 1,2,3,4,5Metode Array
Sekarang kita lihat beberapa pengulangan dengan metode array.Iterasi pada sebuah array
Kalian bisa menggunakan metode array.forEach(). Metode ini mengambil callback sebagai argumen dan mengeksekusi setiap elemen pada array.
// menampilkan index dan value
let arr = [1, 2, 3, 4, 5]
arr.forEach((value, index) => console.log(`Index = ${index} Value = ${value}`))
// Output: Index = 0 Value = 1, dst.Transformasi pada array
Untuk mentransformasi sebuah array kedalam array baru kalian bisa menggunakan metode array.map(). Metode ini mengambil callback sebagai argumen dan mengembalikan array baru. Elemen pada array baru adalah nilai yang dikembalikan oleh callback.
Sebagai contoh kalian mempunyai sebuah objek yang berisi id dan nama, kalian ingin membuat array baru yang berisi id saja.
Dengan menggunakan For loop
let data = [
{ id: 1, name: 'Kucing', type: 'mamalia' },
{ id: 2, name: 'Tikus', type: 'mamalia' },
{ id: 3, name: 'Ayam', type: 'unggas' },
]
let ids = []
for (let i = 0; i < data.length; i++) { ids.push(data[i].id) }Dengan menggunakan map()
let ids = data.map(function(val) { return val.id })Atau lebih simpel lagi menggunakan arrow function
let ids = data.map(val => val.id)Memfilter elemen dari array
Untuk memfilter elemen dari sebuah array kalian bisa gunakan metode array.filter(). Metode filter() membutuhkan sebuah callback, callback ini akan di eksekusi pada setiap elemen dalam array dan membuat array baru yang dengan elemen yang sudah di filter. Jika fungsi callback bernilai true maka elemen tersebut akan masuk ke array baru.
Memfilter item mamalia
let mamalia = data.filter(item => item.type == 'mamalia')Mencari sebuah elemen dalam array
Jika kalian ingin mencari sebuah elemen dalam array kalian bisa gunakan metode array.find(). Seperti metode-metode sebelumnya metode ini membutuhkan sebuah callback. Fungsi callback harus bernilai true atau false. Nilai pertama yang bernilai true akan menjadi output metode ini. Jika tidak ada yang bernilai true maka outputnya undefined.
Mencari nama
data.find(val => val.name == 'Kucing')Mendapatkan nilai tunggal dari sebuah array
Untuk mendapatkan nilai tunggal dari sebuah array kalian bisa gunakan metode array.reduce(). Metode ini mengambil callback sebagai argumen. Fungsi callback mempunyai accumulator dan currentValue. Accumulator berisi sebuah nilai yang sebelumnya di eksekusi callback, currentValue adalah elemen array yang sedang diproses.
let arr = [1, 2, 3, 4, 5]
// sum dari elemen array
arr.reduce((accumulator, currentValue) => (accumulator + currentValue), 0)
// 0 adalah initial value
// Output: 0+1+2+3+4+5 = 15
// product dari elemen array
arr.reduce((accumulator, currentValue) => (accumulator * currentValue), 1)
// 1 adalah initial value
// Output: 1*2*3*4*5 = 120Memeriksa apakah suatu kondisi bernilai true atau salah satunya bernilai true
Untuk memeriksa apakah suatu kondisi bernilai true atau salah satunya bernilai true kalian bisa gunakan metode array.some(). Metode ini akan menghasilkan output true jika salah satu elemen memenuhi kondisi dan akan menghasilkan output false jika tidak ada.
let umur = [13, 15, 16, 18] // umur teman
// cek jika salah satu nya lebih dari 16 tahun
friends.some(val => val >= 16) // trueMemeriksa apakah suatu kondisi bernilai true untuk semua elemen dalam array
Untuk memeriksa apakah suatu kondisi bernilai true untuk semua elemen dalam array kalian bisa gunakan metode array.every(). Metode ini akan mengembalikan true jika suatu kondisi benar untuk semua elemen dalam array, jika tidak maka akan kembali false.
let hargaKado = [300, 350, 399, 400]
let modal = 450
let cekModal = harga => harga <= modal
hargaKado.every(cekModal) // true
modal = 300
hargaKado.every(cekModal) // falseEnd mabro!
Nah begitulah Pengulangan (Loop) Yang Baik Dalam Javascript (menurut saya :V). Untuk lebih lengkapnya kalian bisa buka dokumentasi MDN disini. Semoga artikel ini bermanfaat, Terimakasih.
Selamat koding guys.
