Bagaimana jika ada 100 produk, apakah kita mengalikan variabel dengan 100 dan menghasilkan var products = ["Flashdisk", "SDD", "Monitor"];4 dengan 100x?
Capek donk
Oleh karena itu, kita harus menggunakan Array
Apa itu Array?
Sebelum kita membahas Array, mari kita bahas terlebih dahulu apa itu struktur data?
Struktur data adalah cara atau metode yang digunakan untuk menyimpan data dalam memori komputer
Salah satu struktur data yang sering digunakan dalam pemrograman adalah Array
Array adalah struktur data yang digunakan untuk menyimpan sekelompok data di satu tempat
Setiap data di dalam Array memiliki indeks, sehingga kita akan dengan mudah memprosesnya
Indeks array selalu dimulai dari nol (var products = ["Flashdisk", "SDD", "Monitor"];5)
Pada teori struktur data…
...Ukuran array akan bergantung pada jumlah data yang disimpan di dalamnya
Cara Membuat Array di Javascript
Dalam javascript, kita dapat membuat array dengan tanda kurung siku (var products = ["Flashdisk", "SDD", "Monitor"];6)
Contoh
var products = [];
Maka variabel var products = ["Flashdisk", "SDD", "Monitor"];_7 akan berisi array kosong
Kita dapat mengisi data ke dalam array, kemudian setiap data dipisahkan dengan koma (var products = ["Flashdisk", "SDD", "Monitor"];8)
Contoh
var products = ["Flashdisk", "SDD", "Monitor"];
Oya, karena javascript adalah bahasa pemrograman pengetikan yang dinamis...
...kemudian kita dapat menyimpan dan mencampur apa saja di dalam array
Contoh
var myData = [12, 2.1, true, 'C', "Petanikode"];
Cara Mengambil Data dari Array
Seperti yang sudah kita ketahui…
Array akan menyimpan sekelompok data dan memberinya nomor indeks untuk memudahkan akses
Indeks array selalu diinisialisasi dari nol var products = ["Flashdisk", "SDD", "Monitor"];5
Misalkan kita memiliki array seperti ini
var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];_
Bagaimana kita mengambil nilai var myData = [12, 2.1, true, 'C', "Petanikode"];0?
Jawabannya seperti ini
makanan[1] //-> "Mie Ayam"
Mengapa tidak var myData = [12, 2.1, true, 'C', "Petanikode"];_1?
Ingat. indeks array selalu dimulai dari nol
Agar lebih jelas, mari kita coba dalam sebuah program
<!DOCTYPE html> <html lang="en"> <head> <title>Mengambil data dari array</title> </head> <body> <script> // membuat array var products = ["Senter", "Radio", "Antena", "Obeng"]; // mengambil radio document.write(products[1]); </script> </body> </html>
Hasil
Cetak isi Array dengan Looping
Kita bisa mencetak semua isi array satu per satu seperti ini
document.write(products[0]); document.write(products[1]); document.write(products[2]); document.write(products[3]); document.write(products[4]);
Bagaimana jika array berisi var myData = [12, 2.1, true, 'C', "Petanikode"];_2?
Tentu saja kita tidak ingin menulis var myData = [12, 2.1, true, 'C', "Petanikode"];2 baris kode untuk mencetak array
Solusinya. Gunakan pengulangan
Mari kita lihat sebuah contoh
<!DOCTYPE html> <html lang="en"> <head> <title>Array dan perulangan</title> </head> <body> <script> // membuat array var products = ["Senter", "Radio", "Antena", "Obeng"]; document.write("<h3>Daftar Produk:</h3>"); document.write("<ol>"); // menggunakan perulangan untuk mencetak semua isi array for(let i = 0; i < products.length; i++){ document.write(`<li>${ products[i] }</li>`); } document.write("</ol>"); </script> </body> </html>
Hasil
Perhatian…
Pada contoh di atas, kita menggunakan properti var myData = [12, 2.1, true, 'C', "Petanikode"];4 untuk mengambil panjang array
Kami memiliki var myData = [12, 2.1, true, 'C', "Petanikode"];_5 data dalam array var products = ["Flashdisk", "SDD", "Monitor"];7, maka properti var myData = [12, 2.1, true, 'C', "Petanikode"];4 akan menjadi var myData = [12, 2.1, true, 'C', "Petanikode"];5
Kemudian kami menggunakan properti ini untuk membatasi jumlah iterasi di for
for(let i = 0; i < products.length; i++){ document.write(`<li>${ products[i] }</li>`); }
...dan di blok for, kami mencetak konten produk dengan indeks yang mengacu pada variabel var myData = [12, 2.1, true, 'C', "Petanikode"];9
Cara lain
Kita dapat menggunakan pengulangan dengan metode var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];_0
Contoh
var products = [];0
Hasilnya akan sama seperti di atas
Cara Menambahkan Data ke Array
Ada dua cara untuk menambahkan data ke array
- Isi menggunakan indeks;
- Isi menggunakan metode var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];_1
Mengisi dengan indeks berarti ini…
Misalnya, kami memiliki array dengan konten berikut
var products = [];1
Ada tiga data dalam array var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];_2 dengan indeks
- var products = ["Flashdisk", "SDD", "Monitor"];5. var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];_4
- var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];_5. var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];_6
- var myData = [12, 2.1, true, 'C', "Petanikode"];1. var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];_8
Kami ingin menambahkan lebih banyak data ke indeks ke-______9_______9, sehingga kami dapat melakukannya seperti ini
var products = [];2
Sekarang array var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];2 akan berisi var myData = [12, 2.1, true, 'C', "Petanikode"];5 data
Mari kita coba di konsol Javascript
Itu benar…
makanan[1] //-> "Mie Ayam" _2 kami berhasil menambahkan ke array var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];2
Tetapi kerugian dari metode ini adalah
Kita harus mengetahui jumlah data atau panjang array, baru kita bisa menambahkan
Jika kita memasukkan nomor indeks secara acak, yang terjadi nanti adalah data dalam indeks akan tertimpa
Lalu apa solusinya?
Kami menggunakan metode var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];_1
Kita tidak perlu mengetahui panjang array, karena metode var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];1 akan menambahkan data ke array dari belakang atau belakang
Contoh
var products = [];_3
Jadi hasilnya
Kita juga bisa menambahkan beberapa data sekaligus dengan cara ini
var products = [];_4
Cara Menghapus Data Larik
Sama seperti menambahkan data ke array, menghapus data juga memiliki dua cara
- Menggunakan makanan[1] //-> "Mie Ayam" _6;
- Menggunakan metode makanan[1] //-> "Mie Ayam" _7
Contoh
var products = [];5
Kami dapat menghapus data dengan nomor indeks tertentu dengan makanan[1] //-> "Mie Ayam" 6. Sementara makanan[1] //-> "Mie Ayam" _7 akan dihapus dari belakang
Kerugian dari makanan[1] //-> "Mie Ayam" _6, ini akan membuat ruang kosong di dalam array
Eksperimen di konsol
Tentu ini tidak baik…
...karena array akan tetap memiliki panjang var myData = [12, 2.1, true, 'C', "Petanikode"];5
Metode kedua menggunakan metode makanan[1] //-> "Mie Ayam" 7, kebalikan dari metode var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];1
Metode makanan[1] //-> "Mie Ayam" _7 akan menghapus array di belakang
Array dalam javascript dapat dilihat sebagai stack, yang memiliki properti LILO (Last in Last out)
Mari kita coba di konsol
Kami memanggil metode makanan[1] //-> "Mie Ayam" 7 var myData = [12, 2.1, true, 'C', "Petanikode"];5 kali, maka array akan kosong <!DOCTYPE html> <html lang="en"> <head> <title>Mengambil data dari array</title> </head> <body> <script> // membuat array var products = ["Senter", "Radio", "Antena", "Obeng"]; // mengambil radio document.write(products[1]); </script> </body> </html>7. Karena isinya hanya var myData = [12, 2.1, true, 'C', "Petanikode"];_5
Metode makanan[1] //-> "Mie Ayam" _7 akan mengembalikan nilai item atau data yang telah dihapus dari array
Menghapus Data dari Depan
Kami juga dapat menghapus data dari depan dengan menggunakan metode document.write(products[0]); document.write(products[1]); document.write(products[2]); document.write(products[3]); document.write(products[4]);0
Contoh
var products = [];6
Jadi data yang dihapus adalah document.write(products[0]); document.write(products[1]); document.write(products[2]); document.write(products[3]); document.write(products[4]);1
Eksperimen di konsol
Menghapus Data pada Indeks Tertentu
Jika kita ingin menghapus data pada index tertentu, maka fungsi atau method yang digunakan adalah document.write(products[0]); document.write(products[1]); document.write(products[2]); document.write(products[3]); document.write(products[4]);2
Fungsi ini memiliki dua parameter yang harus disediakan
var products = [];_7
Keterangan
- document.write(products[0]); document.write(products[1]); document.write(products[2]); document.write(products[3]); document.write(products[4]);_3 adalah indeks data dalam array yang akan dihapus;
- document.write(products[0]); document.write(products[1]); document.write(products[2]); document.write(products[3]); document.write(products[4]);_4 adalah jumlah data yang akan dihapus dari indeks
Biasanya kita memberikan nilai total dengan nilai var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];5 sehingga data yang terhapus hanya satu
Contoh
var products = [];8
Eksperimen di konsol
Pada percobaan di atas, jika kita tidak mengisi document.write(products[0]); document.write(products[1]); document.write(products[2]); document.write(products[3]); document.write(products[4]);4 data yang akan dihapus, maka semua data dari indeks yang dipilih akan dihapus
Mengubah isi Array
Untuk mengubah isi array, kita bisa mengisi ulang seperti ini
var products = [];_9
Jadi document.write(products[0]); document.write(products[1]); document.write(products[2]); document.write(products[3]); document.write(products[4]);_7 akan digantikan oleh document.write(products[0]); document.write(products[1]); document.write(products[2]); document.write(products[3]); document.write(products[4]);8
Eksperimen di konsol
Sangat mudah bukan…
Metode penting pada Array
Selain metode atau fungsi yang sudah kita coba di atas, ada beberapa metode dalam Array yang perlu kita ketahui
1. Metode document.write(products[0]); document.write(products[1]); document.write(products[2]); document.write(products[3]); document.write(products[4]);_9
Metode document.write(products[0]); document.write(products[1]); document.write(products[2]); document.write(products[3]); document.write(products[4]);_9 berfungsi untuk memfilter data dari array
Parameter yang harus diberikan pada metode document.write(products[0]); document.write(products[1]); document.write(products[2]); document.write(products[3]); document.write(products[4]);_9 sama dengan metode var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];0 yaitu. fungsi panggilan balik
Contoh
var products = ["Flashdisk", "SDD", "Monitor"];0
Pada contoh di atas, kita memberikan fungsi panah sebagai fungsi callback yang akan memfilter array
Sebenarnya kita bisa membuatnya lebih sederhana seperti ini
var products = ["Flashdisk", "SDD", "Monitor"];_1
2. Metode <!DOCTYPE html> <html lang="en"> <head> <title>Array dan perulangan</title> </head> <body> <script> // membuat array var products = ["Senter", "Radio", "Antena", "Obeng"]; document.write("<h3>Daftar Produk:</h3>"); document.write("<ol>"); // menggunakan perulangan untuk mencetak semua isi array for(let i = 0; i < products.length; i++){ document.write(`<li>${ products[i] }</li>`); } document.write("</ol>"); </script> </body> </html>_3
Metode ini berfungsi untuk memeriksa apakah suatu data ada di dalam array atau tidak. Biasanya digunakan untuk melakukan pencarian untuk memastikan data sudah ada di dalam array
Contoh
var products = ["Flashdisk", "SDD", "Monitor"];_2
3. Metode <!DOCTYPE html> <html lang="en"> <head> <title>Array dan perulangan</title> </head> <body> <script> // membuat array var products = ["Senter", "Radio", "Antena", "Obeng"]; document.write("<h3>Daftar Produk:</h3>"); document.write("<ol>"); // menggunakan perulangan untuk mencetak semua isi array for(let i = 0; i < products.length; i++){ document.write(`<li>${ products[i] }</li>`); } document.write("</ol>"); </script> </body> </html>_4
Metode <!DOCTYPE html> <html lang="en"> <head> <title>Array dan perulangan</title> </head> <body> <script> // membuat array var products = ["Senter", "Radio", "Antena", "Obeng"]; document.write("<h3>Daftar Produk:</h3>"); document.write("<ol>"); // menggunakan perulangan untuk mencetak semua isi array for(let i = 0; i < products.length; i++){ document.write(`<li>${ products[i] }</li>`); } document.write("</ol>"); </script> </body> </html>_4 berfungsi untuk mengurutkan data pada array
Contoh
var products = ["Flashdisk", "SDD", "Monitor"];_3
Apa berikutnya?
Kita telah mempelajari tentang dasar-dasar array dalam javascript, seperti membuat array, menambahkan data ke array, mengubah data menjadi array, menghapus data dari array, dan juga metode-metode yang umum digunakan dalam array.
Masih banyak cara yang belum kami coba
Saran saya
Seringlah berlatih
Gunakan konsol Javascript untuk mencoba metode pada Array
Selanjutnya kita akan belajar tentang fungsi-fungsi dalam Javascript untuk membuat program yang lebih terstruktur. Dan disana kita akan membuat sebuah aplikasi dengan menggunakan array sebagai tempat penyimpanan data