Skip to content
Multi Doc

Struktur Data 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.

Cara Membuat Array pada Javascript

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

Contoh:

Terminal window
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:

Terminal window
var products = ["Ram", "SSD", "Mainboard"];

Oya, karena javascript merupakan bahasa pemrograman yang dynamic typing…

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

Contoh:

Terminal window
var myData = [12, 2.1, true, 'C', "cidara"];

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:

Terminal window
var minuman = ["Jus Mangga", "Es Dawet", "Es Buto Ijo"];

Bagaimana cara kita mengambil nilai "Es Buto Ijo"?

Jawabannya seperti ini:

Terminal window
minuman[2] //-> "Es Buto Ijo"

Kenapa bukan 3?

Ingat: indeks array selalu dimulai dari 0.

Biar lebih jelas, mari kita coba dalam program:

Terminal window
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Mengambil data dari array</title>
</head>
<body>
    <script>
        // membuat array
        var products = ["Mouse", "Modem", "Headset", "Ram"];


        // mengambil Ram
        document.write(products[3]);
    </script>
</body>
</html>

Mencetak isi Array dengan Perulangan

Kita bisa saja mencetak semua isi array satu-per-satu seperti ini:

Terminal window
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:

Terminal window
<!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>
Perhatikan…

Pada contoh di atas, kita menggunakan properti length untuk mengambil panjang array.

Kita memiliki 4 data di dalam array products, maka properti length akan bernilai 4.

Lalu kita gunakan properti ini untuk membatasi jumlah perulangan di dalam for.

Terminal window
for(let i = 0; i < products.length; i++){
    document.write(`<li>${ products[i] }</li>`);
}

…dan di dalam blok for, kita mencetak isi produk dengan indeks yang mengacu pada variabel i.

Cara lain:

Kita bisa mengunakan perulangan dengan method forEach().

Contoh:

Terminal window
<!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
        products.forEach((data) => {
            document.write(`<li>${data}</li>`);
        });
        document.write("</ol>");
    </script>
</body>
</html>

Cara Menambahkan Data ke Dalam Array

Ada dua cara yang bisa dilakukan untuk menambah data ke dalam array:

Mengisi dengan indeks maksudnya begini…

Misal kita punya array dengan isi sebagai berikut:

Terminal window
var buah = ["Apel", "Jeruk", "Manggis"];

Terdapat tiga data di dalam array buah dengan indeks:

Terminal window
    0: "Apel"
    1: "Jeruk"
    2: "Manggis"

Kita ingin menambahkan data lagi pada indeks ke-3, maka kita bisa melakukannya seperti ini:

Terminal window
buah[3] = "Semangka";

Sekarng array buah akan berisi 4 data.

kekurangan dari cara ini ialah:

Kita harus tahu jumlah data atau panjang array-nya, barulah kita bisa menambahkan.

Apabila kita memasukan nomer indeks sembarangan,
maka nanti yang akan terjadi adalah data yang ada di daalam indeks tersebut akan ditindih.

solusinya adalah menggunakan method push()

Kita tidak perlu tahu berapa panjang array-nya, karena method push() akan menambahkan data ke dalam array dari belakang.

Contoh:

Terminal window
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Mengisi data ke array</title>
</head>
<body>
    <script>
        // membuat array
        var products = ["Senter", "Radio", "Antena", "Obeng"];


        // menambahkan tv ke dalam array products
        products.push("Televisi");


        // menapilkan isi array
        document.write(products);
    </script>
</body>
</html>

Kita juga bisa menambahkan beberapa data sekaligus dengan cara seperti ini:

Terminal window
products.push("Alarm", "Gemobok", "Paku");

Cara Menghapus Data Array

Sama seperti menambahkan data ke array, menghapus data juga memiliki dua cara:

Terminal window
    Menggunakan delete;
    Menggunakan method pop()

Contoh:

Terminal window
delete buah[2];

Kita dapat menghapus data dengan nomer indeks tertentu dengan delete. Sedangkan pop() akan menghapus dari belakang.

Kekurangan dari delete, ia akan menciptakan ruang kosong di dalam array

Cara kedua menggunakan method pop(), kebalikan dari method push().

Method pop() 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).

Kita memanggil method pop() sebanyak 4 kali, maka array-nya akan kosong []. Karena isinya hanya 4 saja.

Method pop() akan mengembalikan nilai item atau data yang terhapus dari array

Menghapus Data dari Depan

Kita juga dapat menghapus data dari depan dengan menggunakan method shift().

Contoh:

Terminal window
var buah = ["Durian", "Melon", "Anggur", "Dada"];


// hapus data dari depan
buah.shift();

Maka data yang terhapus adalah “Dada”

Menghapus Data pada Indeks Tertentu

Apabila kita ingin menghapus data pada inteks tertentu, maka fungsi atau method yang digunakan adalah splice().

Fungsi ini memiliki dua parameter yang harus diberikan:

Terminal window
array.splice(<indeks>, <total>);

Keterangan:

Terminal window
    <indeks> adalah indeks dari data di dalam array yang akan dihapus;
    <total> adalah jumlah data yang akan dihapus dari indeks tersebut.

Biasanya kita berikan nilai total dengan nilai 1 agar hanya menghapus satu data saja.

Contoh:

var bunga = ["Mawar", "Melati", "Anggrek", "Sakura"];


// hapus Anggrek
bunga.splice(2, 1);

Mengubah isi Array

Untuk mengubah isi array, kita bisa mengisi ulang seperti ini:

Terminal window
var bahasa = ["Javascript", "Kotlin", "Java", "PHP", "Python"];
bahasa[1] = "C++";

Maka "Kotlin" akan diganti dengan "C++".

Method-method penting pada Array

Selain method-method atau fungsi yang sudah kita coba di atas, terdapat beberapa method dalam Array yang perlu kita ketahui.

1. Method filter()

Method filter() berfungsi untuk menyaring data dari array.

Parameter yang harus diberikan pada method filter() sama seperti method forEach(), yaitu: sebuah fungsi callback.

Contoh:

Terminal window
const angka = [1, 2, 3, 4, 5, 6, 7, 8, 9];


// Kita ambil data yang hanya habis dibagi dua saja
const filteredArray = angka.filter((item) => {return item % 2 === 0});


console.log(filteredArray) // -> [2, 4, 6, 8]

Pada contoh di atas, kita memberikan arrow function sebagai fungsi callback yang akan melakukan penyaringan terhadap array.

Sebenarnya kita bisa buat lebih sederhana lagi seperti ini:

Terminal window
const filteredArray = angka.filter(item => item % 2 === 0);

2. Method includes()

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.

Contoh:

Terminal window
var tanaman = ["Padi", "Kacang", "Jagung", "Kedelai"];


// apakah kacang sudah ada di dalam array tanaman?
var adaKacang = tanaman.includes("Kacang");


console.log(adaKacang); // -> true


// apakah bayam ada?
var adaBayam = tanaman.includes("Bayam");


console.log(adaBayam); // -> false

3. Method sort()

Method sort() berfungsi untuk mengurutkan data pada array.

Contoh:

Terminal window
var alfabet = ['a','f','z','e','r','g'];
var angka = [3,1,2,6,8,5];


console.log(alfabet.sort()); //->  ["a", "e", "f", "g", "r", "z"]
console.log(angka.sort()); // -> [1, 2, 3, 4, 5, 6, 7, 8, 9]