Kali ini kita memasuki materi baru dalam pemograman Javascript, dimana kita akan mulai mempelajari mengenai struktur data yang telah disediakan dalam bahasa pemograman Javascript, yaitu Array, Object, Map dan Set. Namun untuk sementara kita akan fokus ke satu dulu, yaitu Array, karena struktur data ini yang paling gampang dan nantinya akan paling sering terpakai dalam coding kita.

Nah, pada slide kedua kita bisa melihat kurang lebih apa saja yang akan kita pelajari dalam materi Array ini. Agendanya cukup banyak ya. Dimulai dari pengertian Array, cara memanipulasi data pada array, method bawaan Array, hingga ke method lanjutan yang menggunakan Callback. Berhubung materinya banyak, maka pelajaran Array ini akan saya pecah menjadi beberapa video.

Sekarang kita masuk ke contoh kasus mengapa kita perlu menggunakan Array? Contoh soalnya sederhana ya. Simpanlah 7 nama hari ke dalam variable. Jadi disini kita memiliki 7 buah data, dan kita tau nilainya “Senin”, “Selasa”, “Rabu”, “Kamis”, “Jumat”, “Sabtu” dan “Minggu”. Bagaimana cara kita menyimpan ketujuh nama hari ini?

Kita sudah belajar cara membuat variable dari video sebelumnya ya. Kita bisa membuat variable yang menyimpan nama hari dengan sintaks:

let day = "Senin";

Kode sudah benar. Nama hari “Senin” sudah berhasil disimpan ke dalam variable day. Kalau kita lanjutkan ke kode kedua:

let day = "Selasa";

Nah, disini terjadi kesalahan ya. Mengapa? Karena variable day yang menyimpan nilai “Senin” akan tertimpa oleh variable yang menyimpan nilai “Selasa”. Kita sudah tidak bisa mengakses nilai “Senin”. Jadi bagaimana cara memperbaikinya? Kita harus menggunakan nama yang berbeda untuk setiap variable. Sebagai contoh, kita menggunakan nama day1 hingga day7 untuk menyimpan masing-masing nama hari.

let day1 = "Senin";
let day2 = "Selasa";
let day3 = "Rabu";
let day4 = "Kamis";
let day5 = "Jumat";
let day6 = "Sabtu";
let day7 = "Minggu";

Sampai disini kode yang kita tulis sudah berhasil memecahkan masalah yang sedang kita hadapi. Namun cara penulisan kode seperti ini ada beberapa kekurangan. Yang pertama adalah cara menuliskan kodenya lebih sulit, karena kita harus menuliskan 7 baris kode untuk ketujuh data. Kemudian data terpisah menjadi 7 buah varible. Dan hal ini menyebabkan kita akan mengalami kesulitan dalam manipulasi data, seperti kalau kita hendak menambah atau menghapus data, atau mungkin kita perlu mengurutkan data berdasarkan nilainya. Cara coding seperti ini akan menyulitkan kita.

Masalah seperti ini bisa kita pecahkan dengan cara yang lebih sederhana, dengan menggunakan array. Cara menuliskan kodenya adalah seperti ini:

let days = ["Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu", "Minggu"];

Bagian depannya tetap sama ya. Kita menggunakan kata kunci let untuk membuat variable days, kemudian kita gunakan operator sama dengan untuk memberikan nilainya. Nah, untuk menandakan sebuah array, kita menggunakan tanda kurung siku. Jadi array diawali dengan tanda kurung siku buka dan diakhiri dengan tanda kurung siku tutup. Kemudian kita bisa menyebutkan nilai-nilai yang hendak kita simpan di dalam array, dengan dipisahkan oleh tanda koma.

Perhatikan bahwa pada nama variable, kita menambahkan huruf s yang dalam bahasa Inggris berarti plural. Nama variable days ini menunjukkan bahwa jumlah data yang disimpan di dalam variable ini bukan hanya satu, melainkan bisa banyak.

Dengan menggunakan array, maka kita bisa memecahkan masalah ini dengan kode yang lebih sederhana, hanya 1 baris dibandingkan dengan kode sebelumnya 7 baris. Kemudian ketujuh nilai data disimpan di dalam 1 variable, sehingga akan mempermudah kita dalam memanipulasi data tersebut.

Apakah yang terjadi pada saat kita menuliskan kode array ini? Browser akan membuat objek Array, yang menyediakan 7 buah kotak, dimana di setiap kotak menyimpan nilai dari “Senin” hingga “Minggu”. Yang penting untuk kita ketahui disini adalah setiap kotak secara otomatis memiliki index, yang merupakan nomor urut dimulai dari 0 hingga ke jumlah data dikurangi 1. Berhubung jumlah data kita adalah tujuh, maka nomor terakhir index adalah 6.

Nah, mirip dengan tipe data primitif string, Array juga memiliki property length. Kalau kita mengetikkan kode days.length, maka browser mengembalikan jumlah data yang disimpan di dalam Array, yaitu 7. Dan kita juga bisa mengakses data yang disimpan di dalam Array dengan cara mengetikkan nama variablenya, yaitu days, diikuti dengan kurung siku dan nomor index-nya. Jadi kalau kita mengetikkan days[0], maka browser mengembalikan nilai data pertamanya, yaitu “Senin”. Sedangkan kalau kita mengetik days[3], maka browser mengembalikan nilai data keempat, yaitu “Kamis”.

Kita langsung praktek coding. Seperti biasa saya telah menyediakan 2 buah file. Yang pertama adalah index.html yang isinya adalah boilerplate. Yang penting disini adalah tag script yang mengarah ke array.js. Kemudian kalau kita buka file array.js, disini kita menemukan satu baris kode yang menyimpan ketujuh nama hari ke dalam variable days. Kode ini sama dengan yang kita lihat pada slide barusan.

let days = ["Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu", "Minggu"];

Kita jalankan kode ini di browser. Kita lihat di console tidak ada hasil apa-apa ya. Karena kode kita hanya membuat variable saja. Kita belum memanggil fungsi atau method apa pun. Apabila kita ingin melihat isi dari variable kita, maka kita bisa mengetikkan nama variablenya, yaitu days. Disini kita bisa melihat bahwa variable days mengandung 7 buah nilai dengan tipe data string, mulai dari “Senin” hingga “Minggu”.

Kalau kita expand anak panah di samping kiri nilai variable days, maka kita bisa melihat nomor index dari masing-masing nilai. Kemudian ada property length yang menunjukkan jumlah data yang disimpan dalam variable days, yaitu 7. Dan di baris terakhir, kita bisa melihat bahwa variable days adalah sebuah Array. Ini penting ya. Jadi kalau kita hendak melihat apakah suatu variable itu berupa Array, atau berupa struktur data lainnya, kita menggunakan cara ini. Jangan menggunakan perintah typeof(days) karena browser akan mengembalikan kata object. Pada Javascript, semua tipe data selain tipe data primitif selalu dianggap sebagai object.

Selanjutnya kita akan melihat apa saja yang bisa kita lakukan pada variable days. Yang pertama, seperti yang sudah dijelaskan tadi ya. Variable days ini memiliki property length. Untuk mengakses property ini, kita tinggal ketikkan saja kodenya:

days.length;

Ingat, property tidak perlu tanda kurung. Kita tekan enter dan browser mengembalikan angka 7. Artinya array days memiliki 7 buah data.

Kalau kita lihat kembali, pada saat kita mengetikkan nama variable days, maka browser mengembalikan nilai yang disimpan oleh variable days. Namun perhatikan bahwa format atau cara browser menampilkan data ini adalah bahasa programmer. Apabila kita hendak menampilkan isi data variable ini kepada orang biasa, maka kita memerlukan format data yang lebih manusiawi. Untuk itu kita bisa menggunakan method yang bernama join. Kita ketikkan kodenya

days.join();

Ingat bahwa untuk memanggil method, kita harus menggunakan tanda kurung walaupun tidak ada isinya. Kita tekan enter. Dan kita akan mendapatkan satu buah string panjang yang berisi seluruh data yang dikandung oleh array days, yang dipisahkan dengan tanda koma. Nantinya method join ini akan sangat berguna apabila kita hendak menampilkan data Array ke pengunjung situs.

Selanjutnya kita akan membahas mengenai index. Setiap nilai yang kita simpan di dalam Array, secara otomatis mendapatkan index dengan nomor yang berurutan dimulai dari 0 hingga ke jumlah data dikurangi 1. Yang paling penting disini adalah urutan kita pada saat memasukkan nilai ke Array. Kalau kita lihat pada kode, dimulai dari “Senin”, “Selasa”, “Rabu” dan seterusnya. Maka browser memberikan index 0 pada “Senin”, index 1 pada “Selasa”, index 2 pada “Rabu” dan seterusnya. Kita bisa mengambil nilai yang disimpan di dalam variable days dengan cara menggunakan tanda kurung siku dan diikuti oleh nomor indexnya. Sebagai contoh, kita bisa mengambil nilai “Senin” dengan kode

days[0];

Atau kita hendak mengambil nilai “Rabu” dengan kode

days[2];

Mirip dengan tipe data primitif string ya. Namun ada satu perbedaan mendasar, yaitu kita tidak bisa mengubah nilai yang dikandung oleh index string. Sebagai contoh, saya buat satu variable baru

let name = “Skysen”;

Kita bisa mengakses huruf y dengan menggunakan index dua, yaitu

name[2];

Kalau misalkan kita coba assign nilai baru pada index dua, misalkan kita coba ganti menjadi huruf j, maka kodenya menjadi

name[2] = "j";

Pada saat kita jalankan kode ini, tidak terjadi error. Namun kalau kita memanggil kembali nilai dari variable name, maka isinya tetap “Skysen”. Artinya kode assignment kita tidak dijalankan.

Namun kalau kode seperti ini kita jalankan pada Array, maka kita bisa mengganti nilai yang dikandung oleh index tersebut. Sebagai contoh, kita coba ganti nilai dari index dua menjadi “Wednesday”, maka kita tuliskan kodenya

days[2] = "Wednesday";

Kalau kita lihat lagi isi dari variable days, maka data ketiga sudah berubah menjadi “Wednesday”. Jadi inilah perbedaan mendasar dari index pada tipe data primitif string, dengan index pada Array.

Dan berhubung Javascript adalah untyped language, maka array di dalam Javascript juga turut menjadi untyped. Artinya kita bisa menyimpan tipe data apapun di dalam Array. Kalau kita lihat lagi ke variable day yang telah kita buat, maka semua data yang kita simpan adalah string. Kita coba ganti beberapa datanya. Sebagai contoh index satu, kita ganti menjadi angka 10;

days[1] = 10;

Kemudian index tiga kita ganti menjadi true dengan tipe data boolean:

days[3] = true;

Dan index lima kita ganti menjadi null:

days[5] = null;

Kita lihat kembali variable days kita. Sekarang variable days sudah mengandung tipe data yang berbeda-beda. Dan kalau kita lihat lagi dengan menggunakan method join(), maka kita bisa melihat bahwa semua tipe data lain secara otomatis diubah menjadi string. Nilai null berubah menjadi string kosong, sehingga kita bisa melihat ada 2 buah tanda koma diantara Jumat dengan Minggu.

Kalau kita menggunakan bahasa pemograman lain yang bersifat typed language, maka Array hanya bisa mengandung satu tipe data saja. Kalau kita hendak menyimpan string, maka seluruh isi Array hanya boleh string saja. Begitu juga kalau kita hendak menyimpan angka, atau boolean. Namun hal ini tidak terjadi pada Javascript. Pada Javascript, kita bisa dengan bebas menggunakan Array untuk menyimpan tipe data apa saja. Kita bahkan bisa menyimpan Array di dalam Array. Sebagai contoh ganti nilai pada index dua menjadi array yang isinya nilai satu, dua, dan tiga:

days[2] = [1, 2, 3];

Kalau kita lihat lagi isi variable day, maka index dua isinya adalah array. Kita menyebut hal ini dengan nama Array Multi-dimensi.

Selanjutnya kita akan mempelajari cara untuk menambahkan data ke dalam array. Pertama kita refresh dahulu browser-nya. Dan kita cek nilai variable days sudah kembali ke source code awal.

Nah, untuk menambahkan data baru ke bagian akhir array, kita harus jumlah data yang dikandung oleh array tersebut. Dalam contoh ini, array days memiliki 7 buah data. Berarti index paling akhir adalah 6, sedangkan kalau kita hendak menambahkan data baru, berarti index selanjutnya adalah 7. Jadi kita bisa mengetikkan kode

days[7] = “Libur”;

Misalkan kita menambahkan kata “Libur” sebagai hari kedepan. Kalau kita lihat lagi variable days, maka kita sudah menyimpan 8 buah nilai. Atau ada trik lainnya, kita bisa menggunakan properti length untuk menambahkan data baru misalkan “Libur Kedua”. Kodenya menjadi

days[days.length]  = “Libur Kedua”;

Kedua kode berfungsi dengan benar untuk menambahkan data pada akhir array. Cara kedua yang menggunakan property length bisa kita gunakan apabila kita tidak tau berapa jumlah datanya. Kedepannya kita akan belajar mengenai method-method yang telah disediakan oleh Array, sehingga kita bisa lebih mudah dalam memanipulasi Array.

Sekarang pertanyaannya, apakah yang terjadi apabila kita salah memasukkan nilai index pada saat menambahkan data ke dalam Array? Sebagai contoh, saya menambahkan data “Terakhir” dengan nomor index 12.

days[12] = “Terakhir”;

Kalau kita lihat lagi variable days, sekarang memiliki 13 buah data. Index dua belas menyimpan nilai “Terakhir”. Sedangkan index sembilan hingga sebelas diisi dengan tipe data undefined. Jadi kalau misalkan kita lihat isi dari index 10,

days[10];

Maka kita mendapatkan nilai undefined.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.