Belajar Javascript Array
Array Methods
Saat ini kita sedang membuka dokumentasi Array pada situs MDN. Jadi disini kita bisa melihat referensi lengkap mengenai Array. Untuk membuka halaman ini, teman-teman bisa melakukan pencarian di Google dengan kata kunci “MDN Javascript Array”.
Pada sebelah kiri terdapat daftar properties dan methods apa saja yang dimiliki oleh Array. Untuk propertiesnya hanya ada 2 dan kita sudah pernah membahas mengenai length. Untuk methodsnya ada banyak, dan dalam beberapa video kedepan kita akan membahas mengenai methods yang sering terpakai, dimulai dari method umum yang mudah untuk digunakan terlebih dahulu. Setelah itu kita akan masuk ke method yang lebih rumit yang menggunakan callback.
Pertama kita lihat ke method concat terlebih dahulu. Di MDN kita bisa membaca bahwa method concat berfungsi untuk menggabungkan dua array atau lebih. Method ini tidak mengubah array yang bersangkutan, melainkan menghasilkan array yang baru. Contoh cara penggunaannya, disini ada array1 yang isinya a, b, c. Kemudian ada array2 yang isinya d, e, f. Lalu ada array3 yang isinya adalah array1 diconcat dengan array 2. Perhatikan sintaksnya ya
const array3 = array1.concat(array2);
Jadi kita memanggil method concat pada array1, dengan menggunakan array2 sebagai argument. Dan sebagai hasilnya kita mendapatkan array3 yang isinya a, b, c, d, e, f.
Kita langsung coba di browser. Pertama kita buat dahulu array1 dengan isi 1, 2, 3. Kemudian kita buat lagi array2 dengan isi 4, 5, 6. Dan untuk menggabungkan kedua array, kita menggunakan sintaks:
let array1 = [1, 2, 3]; let array2 = [4, 5, 6]; let array3 = array1.concat(array2);
Kita lihat lagi isi dari masing-masing array. array1 tetap 1, 2, 3. array2 tetap 4, 5, 6. array3 merupakan gabungan array1 dan array2 yaitu 1, 2, 3, 4, 5, 6. Jadi array1 dan array2 yang merupakan array awal dari method concat tidak mengalami perubahan sama sekali. Method concat membuat array baru yang isinya adalah array1 ditambah array2.
Selanjutnya kita bahas mengenai method includes. Method includes ini berfungsi untuk memeriksa apakah array telah menyimpan nilai pada argument. Hasil yang diberikan method ini sederhana saja. Hasilnya true apabila array telah menyimpan nilai argument. Hasilnya false apabila array tidak mengandung nilai argument.
Kita lihat sekilas contohnya. Pertama ada array yang isinya 1, 2, 3. Lalu contohnya memanggil method includes dengan argument 2. Berhubung di array ada mengandung nilai 2. Maka hasilnya true.
Kita coba langsung di browser ya. Kita panggil method menggunakan array1.
array1.includes(2);
Hasilnya true karena array1 mengandung nilai 2.
Lalu kita coba lagi
array1.includes(10);
Hasilnya false karena array1 tidak mengandung nilai 2.
Kita coba buat array baru:
let colors = ["red", "yellow", "orange", "blue", "yellow"];
Nilai “yellow” memang disengaja ada 2 ya. Kita coba panggil method includes
colors.includes("red");
Perhatikan bahwa string pada Javascript bersifat case sensitif. Jadi huruf besar dan huruf kecil dianggap sebagai nilai yang berbeda. Jadi kalau kita salah menuliskan argument, misalkan menggunakan R huruf besar, hasilnya adalah false.
colors.includes("Red");
Methods selanjutnya adalah indexOf. Methods ini mirip dengan includes yang berfungsi untuk memeriksa apakah array telah menyimpan suatu nilai. Namun return valuenya berbeda. Apabila array telah menyimpan nilai argument, maka yang dikembalikan adalah nomor index dari nilai tersebut. Dan apabila array tidak menyimpan nilai argument, maka nilai yang dikembalikan adalah -1.
Kita coba di browser
colors.indexOf("red");
Hasilnya adalah 0, karena nomor index nilai “red” di dalam array adalah 0. Kalau kita memasukkan nilai yang salah seperti
colors.indexOf("Red");
Maka hasilnya adalah -1.
Yang menarik disini adalah kita mencoba untuk mencari nilai “yellow”, yang kita sudah tau bahwa nilai ini ada 2 buah di dalam array colors.
colors.indexOf("yellow");
Hasilnya adalah 1, karena nilai “yellow” yang pertama kali ditemukan berada di nilai index 1.
Kita bisa memberikan argument kedua untuk menentukan index awal pencarian nilai “yellow”. Sebagai contoh:
colors.indexOf("yellow", 2);
Hasilnya adalah 4. Karena browser mulai memeriksa array dimulai dari index dua dan seterusnya. Dan browser baru menemukan nilai “yellow” pada index nomor 4. Kalau kita coba
colors.indexOf("red", 2);
Maka hasilnya adalah -1. Karena dimulai dari index 2 dan seterusnya sudah tidak mengandung nilai red.
Kalau kita memberikan nilai index awal lebih besar atau sama dengan length, maka browser langsung mengembalikan nilai -1, karena tidak ada data yang bisa diperiksa. Misalkan kita beri nilai argument keduanya 20.
colors.indexOf("red", 20);
Method terakhir yang hendak kita bahas disini adalah method reverse. Method ini berfungsi untuk membalikan posisi dari nilai yang dikandung oleh array. Nilai yang berada di belakang menjadi di depan, sedangkan nilai yang berada di depan menjadi di belakang.
Kita coba langsung di browser. Kita lihat lagi array1 kita berisi 1, 2, 3. Kalau kita coba panggil method reverse. Maka kodenya menjadi
array1.reverse();
Kita tidak perlu menuliskan argument apapun untuk method reverse. Dan apabila dijalankan, maka isi dari array1 berubah menjadi 3, 2, 1. Kita coba lihat lagi isi dari array colors. Dan kita jalankan juga method reverse.
colors.reverse();
Dan sekarang isi dari array colors pun berubah, warna “yellow” yang tadinya di paling belakang berubah menjadi di paling depan.
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.