Belajar Javascript Array

Slice dan Splice

Pada video ini, kita akan membicarakan mengenai method Slice, yang berfungsi untuk mengambil sebagian isi array. Bagaimana cara menggunakannya? Nah, untuk memanggil method slice, kita memerlukan 2 buah argument. Yang pertama untuk menentukan index awal, dan yang kedua adalah untuk menentukan index akhir. Sebagai contoh kita panggil method slice dengan argument 2 dan 5.

Ketika menjalankannya, maka browser akan memotong isi array, dimulai dari index 2. Hingga ke index sebelum 5. Artinya data yang diambil adalah index 2 hingga 4. Data ini di-copy ke array baru, dan dikembalikan ke kita. Sedangkan array awal tidak mengalami perubahan sama sekali.

Kita coba praktek ya. Saya telah menyediakan satu buah kode Javascript sederhana, yang isinya adalah deklarasi variable array1 dengan isi huruf “a” hingga “j”. Kalau kita jalankan di browser, maka kita bisa melihat bahwa kita telah memiliki variable array1 yang isinya adalah 10 huruf, dari “a” hingga “j”. Kita bisa lihat index dari masing-masing huruf.

Sekarang misalkan kita panggil method slice. Nah, di browser menunjukkan bahwa argument yang dibutuhkan adalah start dan end, namun di bagian depannya ada simbol tanda tanya yang menunjukkan bahwa argument ini tidak harus diisi. Jadi kita bisa memanggil method slide tanpa argument sama sekali. Dan sebagai hasilnya, kita mendapatkan satu buah copy lengkap seluruh isi array. Kalau misalkan kita simpan hasil method slice ke dalam variable array2, maka perintahnya menjadi:

let array2 = array1.slice();

Kita mendapatkan array2 yang isinya 10 huruf dari “a” sampai “j”. Dan kalau kita bandingkan, apakah array1 dan array2 adalah array yang sama? Maka kita mendapatkan jawaban false. Artinya mereka adalah array yang berbeda.

Kita coba lagi. Misalkan kita hendak mengambil dimulai dari huruf ‘e’, kita lihat huruf ‘e’ memiliki index 4. Jadi kita masukkan angka 4 sebagai argument pertama. Kalau kita langsung menutup method tanpa memberikan argument kedua, maka kita mendapatkan hasil dimulai dari huruf ‘e’ hingga ke bagian akhir array.

Kalau misalkan kita hendak berhenti di huruf ‘g’, kita lihat nomor indexnya 6. Maka kita memasukkan angka 6 ditambah 1, yaitu 7 sebagai argument kedua. Jadi kalau kita jalankan array1.slice(4,7), maka kita mendapatkan huruf e, f, g. Perhatikan bahwa isi array1 tidak mengalami perubahan sama sekali.

Yang menariknya lagi dari method slice, kita bisa menggunakan angka negatif sebagai argument pertama, untuk mengambil elemen array dimulai dari belakang. Misalkan kita hendak mengambil 2 elemen terakhir dari array, maka kita ketik array1.slice(-2). Dan kita mendapatkan hasil i dan j.

Selanjutnya kita akan membicarakan mengenai method splice. Method ini mirip dengan method slice, kita mengambil sebagian dari isi array, namun ada satu perbedaan mendasar. Pada splice, bagian yang kita potong benar-benar dikeluarkan dari array, sehingga array asal menjadi berubah. Untuk menggunakan splice, kita bisa menggunakan 2 argument, yang pertama untuk menunjukkan index awal yang hendak dipotong. Dan argument kedua menunjukkan jumlah elemen yang hendak kita potong.

Sebagai contoh, kalau kita memanggil method splice(2, 3). Maka kita memotong array dimulai dari index dua, sebanyak 3 elemen. Artinya mulai dari huruf “c” hingga ke huruf “e”. Ketiga elemen ini akan dikeluarkan dari array dan dikembalikan sebagai return value. Kemudian elemen dibelakang array akan menutupi bagian yang kosong. Dan terakhir komputer menyusun ulang nomor index dari kedua array.

Kita refresh browser dan mulai dari awal lagi. Saat ini kita memiliki variable array1 yang isinya 10 buah string dari huruf a hingga j. Misalkan kita hendak memotong array ini dimulai dari huruf ‘d’. Kita lihat huruf ‘d’ berada di index 3. Jadi kita panggil method-nya array1.splice(3. Nah pada method splice, argument pertama harus diisi ya. Sedangkan yang kedua dan seterusnya bersifat opsional. Kalau kita tidak mengisikan argument kedua, maka komputer akan memotong array dimulai dari index 3 hingga semua elemen di belakangnya. Namun kalau kita mengisikan argument kedua, maka komputer hanya memotong array sebanyak angka yang kita isikan di argument kedua. Misalkan kita hanya ingin memotong 2 elemen, maka kita isikan dengan angka 2.

Sebagai hasilnya, komputer mengembalikan array yang berisi 2 elemen yaitu ‘d’ dan ‘e’. Perhatikan bahwa index dari array baru ini sudah disusun ulang dimulai dari 0. Sedangkan kalau kita lihat kembali isi dari array1, ternyata sudah mengalami perubahan ya. Huruf ‘d’ dan ‘e’ sudah tidak ada di dalam array. Dan index array juga telah disusun ulang mulai dari 0.

Penggunaan method splice ini lebih flexible, karena bisa juga kita gunakan untuk mengubah dan menambahkan data baru. Sebagai contoh. Kita refresh lagi browser, dan kita mulai dari array1 yang isinya 10 data. Misalkan kita hendak menghapus mulai dari huruf ‘c’ sebanyak 5 data. Maka perintahnya menjadi:

array1.splice(2, 5);

Nah, yang menariknya di method splice ini, setelah argument kedua, kita bisa menambahkan banyak argument berikutnya dan akan digunakan sebagai data yang akan dimasukkan di posisi array yang kita hapus. Misalkan kita hendak menambahkan data string “satu”, “dua”, dan “tiga”. Maka kita tinggal tambahkan ketiga data tersebut sebagai argument tambahan pada method, dipisahkan dengan tanda koma. Maka perintahnya menjadi

array1.splice(2, 5, "satu", "dua", "tiga");

Setelah kita jalankan perintah tersebut, kita periksa lagi isi array1. Maka datanya menjadi

"a", "b", "satu", "dua", "tiga", "h", "i","j"

Jadi kita membuang elemen dimulai dari huruf c, sebanyak 5 buah. Dan kemudian kita masukkan data baru string “satu”, “dua” dan “tiga” di posisi huruf c tersebut. Dan perhatikan bahwa index pada array sudah otomatis disusun ulang.

Nanti teman-teman bisa mencoba sendiri method splice, dimana kalau kita akali argumentnya, satu method splice ini bisa menggantikan empat method push, pop, shift dan unshift yang telah kita pelajari pada video sebelumnya.

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.