Belajar Javascript: Memahami Struktur Data Array pada Javascript

September 25, 2022

Bayangkan sekarang kita sedang membuat aplikasi web, lalu ingin menampilkan daftar nama-nama produk.

Bisa saja kita buat seperti ini:

var produk1 = "Modem";
var produk2 = "Hardisk";
var produk3 = "Flashdisk";

document.write(`${produk1}<br>`);
document.write(`${produk2}<br>`);
document.write(`${produk3}<br>`);

Apakah boleh seperti ini?

Boleh-boleh saja. Tapi kurang efektif.

Kenapa?

Bagaimana kalau ada 100 produk, apakah kita akan membut variabel sebanyak 100 dan melakukan echo sebanyak 100x?

Capek donk.

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 sekumpulan data dalam satu tempat.

Setiap data dalam Array memiliki indeks, sehingga kita akan mudah memprosesnya.

Indeks array selalu dimulai dari angka nol (0).

Pada teori struktur data…

…Ukuran array akan bergantung dari banyaknya data yang ditampung di dalamnya.

Cara Membuat Array pada Javascript

Pada javascript, array dapat kita buat dengan tanda kurung siku ([...]).

Contoh:

var products = [];

Maka variabel products akan berisi sebuah array kosong.

Kita bisa mengisi data ke dalam array, lalu setiap data dipisah dengan tanda koma (,).

Contoh:

var products = ["Flashdisk", "SDD", "Monitor"];

Oya, karena javascript merupakan bahasa pemrograman yang dynamic typing…

…maka kita bisa menyimpan dan mencampur apapun di dalam array.

Contoh:

var myData = [12, 2.1, true, 'C', "Petanikode"];

Cara Mengambil Data dari Array

Seperti yang sudah kita kethaui…

Array akan menyimpan sekumpulan data dan memberinya nomer indeks agar mudah diakses.

Indeks array selalu dimauli dari nol 0.

Misalkan kita punya array seperti ini:

var makanan = ["Nasi Goreng", "Mie Ayam", "Mie Gelas"];

Bagaimana cara kita mengambil nilai "Mie Ayam"?

Jawabannya seperti ini:

makanan[1] //-> "Mie Ayam"

Kenapa bukan 2?

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>

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 100?

Tentu kita tidak akan mau menulis 100 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>

Cari Blog Ini

belajar mengenai dasar-dasar dunia programer