Tutorial JavaScript Pemula Part 7 : Belajar Mengenai Array Pada JavaScript
Tutorial JavaScript Pemula Part 7 : Belajar Mengenai Array Pada JavaScript - Hello everyone selamat datang kembali diwebsite saya belajarwithib.my.id, pada seri kali ini kita akan membahas Belajar Mengenai Array Pada JavaScript.
Coba kamu bayangi ketika kamu ingin membangun atau membuat sebuah aplikasi website dan kamu juga ingin menampilkan nama nama user yang sangat banyak, mungkin kamu berpikir akan membuat sebuah variable untuk masing-masing user. Cara itu bisa saja kamu lakukan namun tidak akan efektif jika kamu memiliki user yang sangat banyak maka dari itu pada seri kali ini kita akan belajar array pada javascript agar nanti mempermudah pekerjaanmu.
Yuk simak penjelasan dibawah!
Belajar Mengenai Array Pada JavaScript
Pengertian 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 ).
Array ini merupakan salah satu Struktur Data yang sering kita gunakan dalam sebuah bahasa pemprograman dan Struktur Data itu adalah cara atau sebuah metode yang digunakan untuk menyimpan sebuah data kedalam memori computer.
Cara Penulisan Array
Ada beberapa yang saya ketahui dalam mendeklarasikan array yaitu sebagai berikut :
Cara Pertama
var buah = new Array();
buah[0] = "Durian";
buah[1] = "Pepaya";
buah[2] = "Jeruk";
Cara Kedua
var buah = ["Durian", "Pepaya", "Jeruk"];
Cara Ketiga
var buah = new Array("Mangga", "Apel", "Jeruk");
JavaScript itu bahasa pemprograman yang dynamic typing artinya kita bisa menyimpan data dan mencampur apapun didalam array dan Nilai elemen dari array juga tidak harus bersifat tetap. Kita bisa membuat nilai array berasal dari variabel lain.
Contoh nya
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript</title>
</head>
<body>
</body>
<script type="text/javascript">
var satu = [5, 5.5, "Mangga", "Apel", "Jeruk"];
var dua = 6;
var tiga = [dua, dua+3, dua*2, dua/2, dua-2];
document.write(satu[1] + '<br>');
// Hasilnya 5.5
document.write(tiga[1]);
// Hasilnya 9
</script>
</html>
Cara Mengambil Nilai Didalam Array
Mungkin dengan melihat contoh penulisan yang diatas mungkin kamu akan mengerti bagaimana mengambil nilai didalam array tapi disini saya akan juga jelaskan secara singkat bagaimana cara mengambil nilai didalam array.
Kita sudah tahu bahwa array itu menyimpan sekumpulan data dan memberikannya nomor indeks agar nantinya mudah untuk kita akses.
Nomor indeks itu dimulai Nol 0 ya perlu kamu ingat itu.
Contohnya seperti dibawah ini
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript</title>
</head>
<body>
</body>
<script type="text/javascript">
var satu = ["Mangga", "Apel", "Jeruk"];
document.write(satu[0]);
// Hasilnya Mangga
document.write(satu[1]);
// Hasilnya Apel
document.write(satu[2])
// Hasilnya Jeruk
</script>
</html>
Maka hasilnya akan seperti dibawah ini
Loh kenapa gak ada 3? Ingat sekali teman-teman bahwa array itu dimulai dari NOL 0 bukan Satu 1.
Property Dan Method Untuk Memanifulasi Array
Didalam javascript sudah disediakan untuk Property dan Method jika kamu ingin memanifulasi sebuah array Yaitu sebagai berikut ini :
- join() Gunanya untuk menggabungkan nilai array menjadi string yang dipisahkan dengan tanda yang ditentukan.
- length Digunakan untuk mengetahui ‘panjang’ elemen dari sebuah array.
- concat() Digunakan untuk menggabungkan dua array atau lebih menjadi array baru.
- pop() Digunakan untuk menghapus elemen terakhir pada array.
- push() Digunakan untuk menambahkan satu atau lebih elemen baru ke bagian akhir array.
- reverse() Digunakan untuk membalik urutan elemen array.
- shift() Digunakan untuk menghapus elemen pertama dari suatu array.
- unshift() Digunakan untuk menambahkan satu atau lebih elemen padaawal array.
- sort() Digunakan untuk mengurutkan elemen array.
- toString() Digunakan untuk mengkoversi array ke string.
- splice() Digunakan untuk menghapus atau menambah nilai pada array.
Dan untuk contoh saya akan mengunakan beberapa saja untuk selebihnya kamu coba eksperimen sendiri agar jauh lebih mengerti dan coba perhatikanlah code dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript</title>
</head>
<body>
</body>
<script type="text/javascript">
var barang = ["laptop", "mouse", "keyboard"];
document.write(barang + '<br>');
barang.reverse();
document.write(barang + '<br>');
barang.push('mousepad');
document.write(barang + '<br>');
document.write(barang.length + '<br>');
barang.pop();
document.write(barang + '<br>');
</script>
</html>
Maka Hasilnya akan seperti dibawah ini :
Untuk lebih jelas silahkan kamu baca terlebih dahulu property dan method untuk memanifulasi array.
Cara Menampilkan Array Menggunakan Perulangan
Sebelumnya saya sudah membuat artikel mengenai perulang didalam javascript yang berjudul Belajar Perulangan Pada JavaScript jadi saya harap kamu membacanya terlebih dahulu agar kamu jadi jauh lebih mengerti dan paham.
Seperti yang saya katakan sebelumnya Array ini sangat mempermudah pekerjaan kita karena didalam array kita dapat menyimpan data yang banyak dan untuk menampilkan data didalam array kita juga memerlukan perulangan agar code yang kita ketik jadi jauh lebih rapi dan tidak terlalu berulang-ulang menuliskan code.
Perhatikanlah code dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript</title>
</head>
<body>
</body>
<script type="text/javascript">
var barang = ["laptop", "mouse", "keyboard"];
for (var i = 0; i < barang.length; i++) {
document.write(barang[i] + '<br>');
}
</script>
</html>
Maka hasilnya akan seperti dibawah ini :
Nah dengan code yang sesingkat itu kamu bisa menampil isi dari array nya jadi kamu tidak perlu lagi menulis code yang berulang ulang lagi deh.
Cara Menghapus Data Array
Didalam javascript tersedia dua fungsi yang berfungsi sama sama menghapus data array yaitu :
- Menggunakan delete.
- Menggunakan method pop() yang berfungsi menghapus elemen terakhir pada array.
- Menggunakan method shift() yang berfungsi menghapus data array mulai dari depan.
- Menggunakan method splice() yang berfungsi menghapus atau menambah nilai pada array.
Untuk contoh penggunakannya perhatikanlah code dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript</title>
</head>
<body>
</body>
<script type="text/javascript">
var satu = ["anggur", "pisang", "mangga"];
var dua = ["kuini", "durian", "manggis"];
var tiga = ["markisa", "apel", "pear"];
var empat = ["salak", "rambutan", "strawberry"];
delete satu[1];
document.write(satu + '<br>');
dua.pop();
document.write(dua + '<br>');
tiga.shift();
document.write(tiga + '<br>');
empat.splice(2, 1);
document.write(empat + '<br>');
</script>
</html>
Maka hasilnya akan seperti ini teman-teman :
Menurut saya penggunaan perintah delete tidak saya sarankan untuk kamu gunakan karena data array yang sudah dihapus akan menciptakan ruang kosong di dalam array atau undefined.
Penutupan
Untuk materi array cukup sampai sini karena pembahasannya saya persingkat tidak seperti tutorial array pada bahasa pemprograman lainnya jadi silahkan bereksplorasi sendiri dan praktek agar kamu jadi ingat dengan materi kali ini, jika kamu hanya cuman membaca saja mungkin nanti bakal lupa dan ada baiknya kamu praktekan.
Semoga Bermanfaat!!