Home | JavaScript

Belajar Array JavaScript : Contoh dan Cara Pembuatan

Published by Ade Kurniawan on

belajar array javascript

Array adalah sesuatu yang dapat digunakan untuk menyimpan atau mengumpulkan elemen – elemen dalam sebuah variabel. Array di JavaScript dapat menyimpan elemen meskipun tipe data masing-masing elemen tersebut berbeda seperti int, string disatukan ke dalam satu variabel array.

Sebagai contoh array nilai untuk menyimpan nilai siswa :

 let nilai = Array(70, 80, 90);
 console.log(nilai);

output

[70, 80, 90]

Saat salah satu nilai elemen array diubah menjadi string maka nilai string tersebut tetap tersimpan di array nilai. contoh let nilai = Array(70, 'nilaiku', 90);

Cara Membuat Array di JavaScript

Ada 2 buah bentuk yang dapat digunakan untuk menulis array di JavaScript.

1. Menggunakan [ ]

let hari = ['senin','selasa','rabu','kamis'];

2. Menggunakan Array()

let warna = Array('merah','biru','kuning','putih');        

Saat ini cara 1 lebih banyak digunakan dibandingkan cara 2. Untuk membuat array dengan cara kedua, huruf “A” pada awalan Array harus ditulis besar. Jika awalan Array() ditulis dalam huruf kecil array() maka akan terjadi error yang menyebabkan array is not defined seperti di bawah ini :

contoh-array.html:15 Uncaught ReferenceError: array is not defined
at contoh-array.html:15:20

Cara Mengakses Array di JavaScript

Setiap elemen atau nilai yang ada di dalam array memiliki sebuah index. Di JavaScript index yang diperoleh oleh elemen array berurutan dan dimulai dari 0 dikenal dengan Zero-based Indexing. Jika kita memiliki 4 elemen/nilai dalam sebuah array maka nilai tersebut akan memperoleh index dari 0 sampai dengan 3

index array

Untuk mengakses nilai dari index tersebut bisa dilakukan dengan cara-cara berikut:

1. Mengakses Semua Elemen Array di JavaScript

Untuk mengakses semua nilai atau elemen yang ada pada array caranya cukup mudah yaitu dengan melakukan pemanggilan terhadap array terseut:

let hari = ['senin','selasa','rabu','kamis'];                
console.log(hari);

output

 [‘senin’, ‘selasa’, ‘rabu’, ‘kamis’]

Selanjutnya jika ingin mengakses beberapa atau sebagian saja dari elemen array maka bisa dbuat seperti script di bawah ini:

let menu = ['Nasi Goreng', 'Ayam Kecap', 'Ayam Goreng', 'Mie Pedas'];
console.log(menu[1] +' - '+ menu[3]);

// Output :
// Ayam Kecap - Mie Pedas

2. Mengakses Elemen Pertama

Untuk memanggil nilai pertama dari array maka hal yang dilakukan adalah memanggal elemen yang memiliki index 0. karena berbentuk Zero-based Indexing maka otomatis nilai pertama memiliki index 0:

let hari = ['senin','selasa','rabu','kamis'];                
console.log(hari[0]);

output

senin

Selain cara di atas untuk memanggal elemen pertama dari sebuah array bisa juga mengunakan contoh di bawah ini:

let hari = ['senin','selasa','rabu','kamis']; 
const [first] = hari;               
console.log(first);

//output senin

3. Mendapatkan nilai atau elemen terakhir dari array

Elemen terakhir array bisa ditampilkan dengan cara berikut:

let hari = ['senin','selasa','rabu','kamis'];  
let lasthari = hari[hari.length -1]  ;
console.log(lasthari);

output

kamis

4. Menghitung jumlah elemen array

Untuk mendapatkan jumlah elemen dari array ini kita bisa menggunakan length:

let hari = ['senin','selasa','rabu','kamis'];          
console.log(hari.length);
// output 4

5. Menampilkan Array menggunakan for

Selain untuk menghitung jumlah elemen array length juga sering digunakan untuk menampilkan array di halaman web melalui perulangan for seperti contoh di bawah ini:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <script>      
        let menu = ['Nasi Goreng', 'Ayam Kecap', 'Ayam Goreng', 'Mie Pedas'];
        
        for (let i = 0; i < menu.length; i++) {
            const element = menu[i];
            document.write(element + '</br>');            
        }        
    </script>
</body>

</html>

output :

menampilkan array dengan for
menampilkan array menggunakan for

7. Menampilkan array ke tabel menggunakan JavaScript

Melalui perulangan for juga bisa kita melakukan looping row tabel. Contoh di awah ini adalah bentuk penerapan looping row tabel menggunakan JavaScript. Data yang dimasukkan diperoleh dari array.

<!DOCTYPE html>
<html lang="en">

<head>    
    <meta charset="UTF-8">
    <title>Belajar Array JavaScript</title>
</head>

<body>
    <script>              
        document.write('<table border=1><tr><td>No</td><td>Menu</td></tr>');
        let menu = ['Nasi Goreng', 'Ayam Kecap', 'Ayam Goreng', 'Mie Pedas'];
        let number = 1;
        var  element = '';
        for (let i = 0; i < menu.length; i++) {
            var element = '<tr><td>' + number++ + '</td>'+'<td>'+menu[i]+'</td></tr>';            
            document.write(element);            
            }
        document.write('<table>');                   
    </script>
</body>

</html>

Output :

Cara Menampilkan array ke tabel dengan JavaScript
Menampilkan data array ke tabel dengan JavaScript

Demikian tutorial belajar array lengkap dengan contoh cara pembuatan. Selanjutnya teman-teman bisa melanjutkan materi belajar dasar JavaScript yang telah disajikan di bawah ini

Tutorial lanjutan

Tipe Data JavaScript


0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published.