Site icon agussuratna.net

Tutorial Javascript #9 : Array pada JavaScript

Agus Suratna

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 index, sehingga kita akan mudah memprosesnya. Index 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 = ["TV LED 42 inch", "Lemari Es", "Dispenser"];

Karena javascript merupakan bahasa pemrograman yang dynamic typin, maka kita bisa menyimpan dan mencampur apapun di dalam array.

Contoh :

var dataKu= [10, 5.1, true, 'C', "Belajar JavaScript"];

 

Cara Mengambil Data dari Array

Seperti yang sudah kita bahas sebelumnya, array akan menyimpan sekumpulan data dan memberinya nomer index agar mudah diakses, index array selalu dimauli dari nol 0.

Misalkan kita punya array seperti ini :

var minuman = ["Es Jeruk", "Lemon Tea", "Milk Shake"];

Untuk mengambil nilai “Lemon Tea” kita bisa dengan cara memanggil array tersebut seperti ini :

minuman[1];

Untuk memanggil nilai tersebut kita gunakan indexnya dengan 1, bukan 2. Karena index selalu dimulai dari nol (0).

Berikut contoh dalam program :

<!DOCTYPE html>
<html lang="en">
    <head>    
        <title>Mengambil data dari array</title>
    </head>
    
    <body>    
        <script>        
            // membuat array
            var products = ["TV LED 42 inch", "Lemari Es", "Radio", "Dispenser"];
            
            // mengambil nilai Radio
            document.write(products[2]);    
        </script>
    </body>
</html>

Hasilnya :

Mencetak isi Array dengan Perulangan

Untuk mencetak isi array, kita bisa saja mencetak semua isi array satu per satu seperti ini :

<!DOCTYPE html>
<html lang="en">
    <head>    
        <title>Cetak Isi Array</title>
    </head>
    
    <body>    
        <script>   
            // membuat array
            var products = ["TV LED 42 inch", "Lemari Es", "Radio", "Dispenser"]; 
            
            //cetak isi array   
            document.write("<p>"+products[0]+"</p>");
            document.write("<p>"+products[1]+"</p>");
            document.write("<p>"+products[2]+"</p>");
            document.write("<p>"+products[3]+"</p>"); 
        </script>
    </body>
</html>

Tetapi bagaimana jadinya jika data yang ada pada array tersebut berjumlah 100 atau lebih, tentu kita akan kerepotan untuk menulis 100 baris kode untuk mencetak array, solusinya gunakan perulangan (looping).

Baca Juga  Tutorial Laravel #22 : Error Handling Laravel

Berikut contohnya :

<!DOCTYPE html>
<html lang="en">
    <head>    
        <title>Cetak Isi Array</title>
    </head>
    
    <body>    
        <script>   
            // membuat array
            var products = ["TV LED 42 inch", "Lemari Es", "Radio", "Dispenser"]; 
            
            //cetak isi array   
            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 sintak 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. Di dalam blok for, kita mencetak isi produk dengan index yang mengacu pada variabel i.

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

Cara lain kita bisa mengunakan perulangan dengan method forEach() seperti contoh berikut :

<!DOCTYPE html>
<html lang="en">
    <head>    
        <title>Cetak Isi Array</title>
    </head>
    
    <body>    
        <script>   
            // membuat array
            var products = ["TV LED 42 inch", "Lemari Es", "Radio", "Dispenser"]; 
            
            //cetak isi array   
            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>

Hasilnya akan sama seperti sintak dengan menggunakan looping for.

 

Cara Menambahkan Data ke Dalam Array

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

    1. Mengisi menggunakan index
    2. Mengisi menggunakan method push()

untuk mengisi array dengan index, misal kita punya array dengan isi sebagai berikut :

var merkmobil = ["Toyota", "Honda", "Suzuki"];

Terdapat tiga data di dalam array buah dengan index :

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

merkmobil[3] = "Nissan";

Sekarang array merkmobil akan berisi 4 data.

Baca Juga  Tutorial CSS : #1 Cascading Style Sheet (CSS)

Selanjutnya kita coba pada console Javascript, hasilnya akan seperti berikut :

“Nissan” berhasil kita tambahkan ke dalam array merkmobil. Tetapi kekurangan dari cara ini ialah kita harus tahu jumlah data atau panjang array-nya, barulah kita bisa menambahkan.

Apabila kita memasukan nomer index sembarangan, maka nanti yang akan terjadi adalah data yang ada di daalam index tersebut akan ditimpa. Untuk solusi tersebut kita bisa gunakan method push().

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

Contoh :

<!DOCTYPE html>
<html lang="en">
    <head>    
        <title>Mengisi data ke array</title>
    </head>
    
    <body>    
        <script>        
            // membuat array        
            var products = ["TV LED 42 inch", "Lemari Es", "Radio", "Dispenser"];        
            
            // menambahkan Microwave ke dalam array products        
            products.push("Microwave");         
            
            // menapilkan isi array        
            document.write(products);    
        </script>
    </body>
</html>

Maka hasilnya :

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

products.push("Pompa Air", "Lampu", "Strika");

Cara Menghapus Data Array

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

    1. Menggunakan delete
    2. Menggunakan method pop()

Contoh :

delete merkmobil[2];

Kita dapat menghapus data dengan nomer index tertentu dengan delete, sedangkan pop() akan menghapus dari belakang. Kekurangan dari delete, ia akan menciptakan ruang kosong di dalam array. Hal ini tentunya kurang begitu baik, karena array akan tetap memiliki panjang 4.yang sama dengan sebelum di delete.

Percobaan di dalam console :

Cara kedua menggunakan method pop(), yang merupakan 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 memiliki sifat LILO (Last in Last out).

Berikut contoh di dalam console :

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 :

var olahraga= ["Sepak Bola", "Renang", "Basket", "Bulu Tangkis"];

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

Maka data yang terhapus adalah “Sepak Bola”.

Baca Juga  Tutorial PHP : #22 Membuat Captcha dengan PHP

Percobaan pada console :

Menghapus Data pada Index Tertentu

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

Fungsi ini memiliki dua parameter yang harus diberikan :

namaarray.splice(index, total);

Keterangan:

Contoh:

var olahraga= ["Sepak Bola", "Renang", "Basket", "Bulu Tangkis"];

olahraga.splice(1,2);

Percobaan pada console :

Pada percobaan di atas, kita akan menghapus isi array dimulai pada index ke-1 dan sejumlah 2 data, maka data yang terhapus adalah ‘Renang‘ dan ‘Basket‘. Apabila kita tidak mengisi parameter total, maka data dari array tersebut akan dihapus mulai dari index yang terpilih sampai ke index paling akhir.

 

Mengubah isi Array

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

var bahasa = ["Javascript", "Kotlin", "Java", "PHP", "Python"];

bahasa[1] = "C++";

Maka “Kotlin” akan diganti dengan “C++”.

Percobaan pada console :

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:

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

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

console.log(filtergenap);

Hasilnya :

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 :

const filtergenap = 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 :

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

// mencari isi array yang berisi kacang
var adaKacang = tanaman.includes("Kacang"); 
console.log(adaKacang);

// Mencari isi array yang berisi bayam
var adaBayam = tanaman.includes("Bayam"); 
console.log(adaBayam);

Hasilnya :

3. Method sort()

Method sort() berfungsi untuk mengurutkan data pada array.

Contoh

var alfabet = ['a','f','z','e','r','g'];

var angka = [3,1,2,6,8,5]; 

console.log(alfabet.sort()); 

console.log(angka.sort());

Hasilnya :

Demikian tutorial tentang Array pada Java Script, masing banyak method-method lain yang bisa kita pelajari pada JavaScript. Semoga bermanfaat.

 

Referensi :

 

 

 

 

Exit mobile version