Bagaimana kalau ada 100 produk, apakah kita akan membut variabel sebanyak 100 dan melakukan var products = ["Flashdisk", "SDD", "Monitor"];4 sebanyak 100x?
capek donk
Oleh karena itu, kita harus menggunakan Array
Apa itu Array?
Sebelum kita membahas Array, kita bahas dulu apa itu struktur data?
Struktur data merupakan cara-cara atau metode yang digunakan untuk menyimpan data di dalam memori komputer
Salah satu struktur data yang sering digunakan dalam pemrograman adalah Array
Array merupakan struktur data yang digunakan untuk menyimpan kumpulan data dalam satu tempat
Setiap data dalam Array memiliki indeks, sehingga kita akan mudah memprosesnya
Indeks array selalu dimulai dari angka nol (var products = ["Flashdisk", "SDD", "Monitor"];5)
Pada teori struktur data…
…Ukuran array akan bergantung dari banyaknya data yang ditampung di dalamnya
Face Membuat Array pada Javascript
Pada javascript, array dapat kita buat dengan tanda kurung siku (var products = ["Flashdisk", "SDD", "Monitor"];6)
kontur
var products = [];
Maka variabel var products = ["Flashdisk", "SDD", "Monitor"];7 akan berisi array kosong
Kita bisa mengisi data ke dalam array, lalu setiap data dipisah dengan tanda koma (var products = ["Flashdisk", "SDD", "Monitor"];_8)
kontur
var products = ["Flashdisk", "SDD", "Monitor"];
Oya, karena javascript merupakan bahasa pemrogramman yang dynamic typing…
…maka kita bisa menyimpan dan mencampur apapun di dalam array
kontur
var myData = [12, 2.1, true, 'C', "Petanikode"];
Cara Mengambil Data dari Array
Seperti yang sudah kita kethaui…
Array akan menyimpan sekumpulan data dan diberi nomor indeks agar mudah diakses
Indeks array selalu dimauli dari nol var products = ["Flashdisk", "SDD", "Monitor"];5
Misalkan kita punya array seperti ini
var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];_
Bagaimana cara kita mengambil nilai var myData = [12, 2.1, true, 'C', "Petanikode"];0?
Jawabannya seperti ini
________sebelas_______
Kenapabukan var myData = [12, 2.1, true, 'C', "Petanikode"];_1?
ingat. indeks array selalu dimulai dari nol
Biar lebih jelas, mari kita coba dalam 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>
Hasilnya
Mencetak isi Array dengan Perulangan
Kita bisa saja 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 kalau nanti isi array-nya ada var myData = [12, 2.1, true, 'C', "Petanikode"];2?
Tentu kita tidak akan mau menulis var myData = [12, 2.1, true, 'C', "Petanikode"];2 baris kode untuk mencetak array
Solusinya. gunakan perulangan
Mari kita lihat contohnya
<!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>
Hasilnya
Perhatikan…
Pada contoh di atas, kami menggunakan properti var myData = [12, 2.1, true, 'C', "Petanikode"];4 untuk mengambil panjang array
Kita memiliki var myData = [12, 2.1, true, 'C', "Petanikode"];_5 data di dalam array var products = ["Flashdisk", "SDD", "Monitor"];7, maka properti var myData = [12, 2.1, true, 'C', "Petanikode"];4 akan bernilai var myData = [12, 2.1, true, 'C', "Petanikode"];5
Lalu kita gunakan properti ini untuk membatasi jumlah perulangan di dalam for
for(let i = 0; i < products.length; i++){ document.write(`<li>${ products[i] }</li>`); }
…dan di blok untuk, kita mencetak isi produk dengan indeks yang mengacu pada variabel var myData = [12, 2.1, true, 'C', "Petanikode"];9
wajah lain
Kita bisa mengunakan perulangan dengan metode var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];0
kontur
var products = [];0
Hasilnya akan sama seperti di atas
Cara Menambahkan Data ke Dalam Array
Ada dua cara yang bisa dilakukan untuk menambah data ke dalam array
- Mengisi menggunakan indeks;
- Mengisi menggunakan metode var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];_1
Mengisi dengan indeks maksudnya begini…
Misal kita punya array dengan isi sebagai berikut
var products = [];1
Terdapat tiga data di 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
Kita ingin menambahkan data lagi pada indeks ke-var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];_9, maka kita bisa melakukannya seperti ini
var products = [];2
Sekarng 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 pada console Javascript
Benar khan…
makanan[1] //-> "Mie Ayam" 2 berhasil kita tambahkan ke dalam array var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];2
Tapi kekurangan dari cara ini adalah
Kita harus tahu jumlah data atau panjang array-nya, barulah kita bisa menambahkan
Apabila kita memasukan nomer indeks secara sembarangan, maka nanti yang akan terjadi adalah data yang ada di daalam indeks tersebut akan ditindih
Lalu solusinya bagaimana donk?
Kita gunakan metode var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];_1
Kita tidak perlu tahu berapa panjang array-nya, karena method var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];_1 akan menambahkan data ke dalam array dari ekor atau belakang
kontur
var products = [];_3
maka hasilnya
Kita juga bisa menambahkan beberapa data sekaligus dengan cara seperti ini
var products = [];_4
Wajah Menghapus Data Array
Sama seperti menambahkan data ke array, menghapus data juga memiliki dua wajah
- Menggunakan makanan[1] //-> "Mie Ayam" _6;
- Menggunakan metode makanan[1] //-> "Mie Ayam" _7
kontur
var products = [];5
Kita dapat menghapus data dengan nomer indeks tertentu dengan makanan[1] //-> "Mie Ayam" 6. Sedangkan makanan[1] //-> "Mie Ayam" 7 akan menghapus dari belakang
Kekurangan dari makanan[1] //-> "Mie Ayam" 6, ia akan menciptakan ruang kosong di dalam array
Percobaan di dalam konsol
Tentu ini kurang bagus…
…karena array akan tetap memiliki panjang var myData = [12, 2.1, true, 'C', "Petanikode"];5
Cara kedua menggunakan method makanan[1] //-> "Mie Ayam" _7, kebalikan dari method var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];1
Metode makanan[1] //-> "Mie Ayam" 7 akan menghapus array yang ada di paling belakang
Array pada javascript dapat kita pandang sebagai sebuah stack (tumpukan), yang mana memiliki sifat LILO (Last in Last out)
Mari kita coba di dalam konsol
Kita memanggil method makanan[1] //-> "Mie Ayam" _7 sebanyak var myData = [12, 2.1, true, 'C', "Petanikode"];_5 kali, maka array-nya 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 saja
Method makanan[1] //-> "Mie Ayam" 7 akan mengembalikan nilai item atau data yang terhapus dari array
Menghapus Data dari Depan
Kita 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
kontur
var products = [];6
Maka data yang terhapus adalah document.write(products[0]); document.write(products[1]); document.write(products[2]); document.write(products[3]); document.write(products[4]);1
Konsol percobaan panda
Menghapus Data pada Indeks Tertentu
Apabila kita ingin menghapus data pada inteks 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 diberikan
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 dari data di 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 tersebut
Biasanya kita memberikan nilai total dengan nilai var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];_5 agar hanya menghapus satu data saja
kontur
var products = [];8
Percobaan pada konsol
Pada percobaan di atas, apabila 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
Maka document.write(products[0]); document.write(products[1]); document.write(products[2]); document.write(products[3]); document.write(products[4]);_7 akan diganti dengan document.write(products[0]); document.write(products[1]); document.write(products[2]); document.write(products[3]); document.write(products[4]);8
Percobaan pada konsol
Sangat mudah bukan…
Metode-metode penting pada Array
Selain method-method atau fungsi yang sudah kita coba di atas, terdapat beberapa method 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
Method document.write(products[0]); document.write(products[1]); document.write(products[2]); document.write(products[3]); document.write(products[4]);_9 berfungsi untuk menyaring data dari array
Parameter yang harus diberikan pada method document.write(products[0]); document.write(products[1]); document.write(products[2]); document.write(products[3]); document.write(products[4]);9 sama seperti method var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];0, yaitu. panggilan balik fungsi
kontur
var products = ["Flashdisk", "SDD", "Monitor"];0
Pada contoh di atas, kita memberikan fungsi panah sebagai fungsi callback yang akan melakukan penyaringan terhadap array
Sebenarnya kita bisa buat lebih sederhana lagi 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
Method ini berfungsi untuk mengecek apakah sebuah data ada di dalam array atau tidak. Biasanya digunakan untuk melakukan pencarian untuk memastikan data sudah ada di dalam array
kontur
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
Method <!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
kontur
var products = ["Flashdisk", "SDD", "Monitor"];_3
Apa Selanjutnya?
Kita sudah belajar tentang dasar-dasar array pada javascript, seperti membuat array, menambahkan data pada array, mengubah data pada array, menghapus data pada array, dan juga method-method yang biasa digunakan pada array
Masih banyak lagi metode-metode yang belum kita coba
saran saya
Sering-seringlah berlatih
Gunakan console Javascript untuk mencoba-coba metode yang ada pada Array
Selanjutnya kita akan belajar tentang fungsi pada Javascript untuk membuat program yang lebih terstruktur. Serta di sana kita akan membuat aplikasi dengan menggunakan array sebagai penyimpanan datanya