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.

2 Jam 21 Menit
1. Pendahuluan 16 Menit
3. Head 13 Menit
10. Tabel 21 Menit
1 Jam 2 Menit
1. Form 15 Menit
2. Validasi 12 Menit
3. Input Type 15 Menit
4. Dropdown 9 Menit
1 Jam 29 Menit
9. Pseudo Class 11 Menit
3 Jam 26 Menit
2. Lebar/Width 13 Menit
16. CSS Reset 6 Menit
2 Jam 21 Menit
4. Flex-Wrap 10 Menit
3 Jam 17 Menit
7. Flex Utility 16 Menit
8. Operator 28 Menit
11. Objek String 18 Menit
4. Scope 10 Menit
5. Rekursif 10 Menit
8. Notasi Big O 24 Menit
4. Prototype 18 Menit
7. Map 19 Menit
8. Set 12 Menit
2. DOM Selector 40 Menit
7. DOM Traversal 14 Menit
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.