Pada beberapa video kedepan, kita akan membahas mengenai callback methods pada array, dimulai dari yang gampang seperti forEach, filter, map. Dan kebelakangnya kita akan membahas yang lebih rumit seperti sort dan reduce. Pertama kita bahas dahulu mengapa disebut dengan callback method? Hal ini disebabkan karena kita harus mengirimkan function sebagai argument pada saat memanggil method tersebut. Dan pada saat dijalankan, method akan memanggil kembali function yang kita kirimkan, oleh karena itulah disebut dengan nama callback.

Sebagai contoh, kita bahas method yang paling gampang terlebih dahulu ya, yaitu method forEach(). Method ini akan menjalankan function yang kita kirimkan sebagai argument, pada setiap item di dalam array.

Kita langsung mulai praktek ya. Misalkan kita memiliki satu buah array yang berisikan judul-judul film.

let movies = ["Thor", "Minions", "Top Gun", "Jurassic World"];

Dan kemudian kita ingin menampilkan judul-judul film ini, secara satu per satu. Sebagai contoh disini menggunakan fungsi console.log terlebih dahulu ya. Pertama kita coba gunakan cara biasa terlebih dahulu. Jadi pertama kita harus membuat looping for sebanyak jumlah data array. Kemudian di dalamnya, kita panggil fungsi console.log untuk data yang sedang kita tunjuk. Maka kodenya menjadi:

for(let i = 0; i < movies.length; i++)
{
  console.log(movies[i]);
}

Kita simpan dan lihat hasilnya di browser. Sekarang keempat judul telah dituliskan secara terpisah per baris di console. Kode yang kita tuliskan sudah berfungsi sesuai harapan. Sekarang kita kembali ke source code.

Kita akan melakukan refactoring terhadap source code kita, dimana semua kode di dalam looping akan kita pisahkan menjadi satu buah function. Kebetulan di dalam loop ini isinya hanya satu baris console.log ya. Jadi misalkan kita buat sebuah function baru dengan nama showTitle, dengan satu buah parameter bernama item.

function showTitle(title)
{
  console.log(title);
}

Dan kemudian isi dari looping kita ganti menjadi memanggil fungsi showTitle tersebut. Jadi disini kita cukup mengganti kata console.log menjadi showTitle ya. Argument yang dikirimkan tetap movies[i]. Kita simpan dan jalankan di browser. Hasilnya tetap sama ya. Yang berbeda hanya cara menuliskan kodenya saja.

Nah, sekarang kita masuk ke callback method yang pertama, yaitu forEach. Perhatikan kode perulangan for kita ini. Kode ini bisa kita ganti menjadi method forEach, yang nantinya cara kerja dan hasilnya sama persis dengan perulangan ini. Caranya? Pertama kita komentari terlebih dahulu looping kita ya.

Di bagian paling bawah, kita panggil method forEach dari array movies. Lalu kita gunakan fungsi showTitle sebagai argumentnya.

movies.forEach(showTitle);

Kita simpan dan refresh browser. Dan ternyata kita mendapatkan hasil yang sama persis.

Kita lihat kembali ke kode ya. Jadi sebenarnya method forEach ini bekerja dengan cara yang sama dengan loop for yang telah kita tuliskan. Komputer akan melakukan looping dimulai dari index 0 hingga index terakhir. Dan di dalam loop, komputer akan memanggil fungsi yang dikirimkan sebagai argument untuk setiap data yang dikandung di dalam array. Jadi disini kita bisa mempersingkat kode yang harus kita tulis, dari yang tadinya harus menulis looping for, menjadi hanya perlu memanggil satu baris method forEach.

Dalam perkembangan ke depannya, programmer lebih suka kalau function showTitle ini dituliskan langsung di dalam method forEach. Caranya? Kita sudah belajar ya, nama tekniknya adalah function expression. Pertama kita komentari terlebih dahulu function showTitle.

Jadi di dalam argument forEach, kita mendeklarasikan satu buah function dengan parameter title. Disini kita tidak perlu memberikan nama untuk function-nya ya. Jadi setelah kata kunci function kita langsung membuka kurung dan mengisikan parameternya. Dan di dalam functionnya kita, kita bisa memanggil console.log untuk menuliskan parameter title.

movies.forEach(function(title){
  console.log(title);
});

Kita simpan dan jalankan di browser. Dan hasilnya masih tetap sama persis ya.

Jadi kode yang menggunakan cara dasar pemograman yang tadinya seperti ini, bisa kita persingkat menggunakan callback method menjadi seperti ini. Dan kedepannya kalau kita sudah mempelajari mengenai arrow function, kita bisa menuliskannya dengan lebih singkat lagi. Hal ini lah yang menyebabkan callback method menjadi popular dan banyak digunakan oleh programmer.

Kita masuk ke method ke dua, yaitu filter. Coba kita bayangkan sebuah filter udara. Kita memasukkan semua udara ke dalam filter, kemudian filter menyaring udara tersebut dan mengeluarkan hanya udara yang bersih saja. Nah, kegunaan dari method filter ini kurang lebih seperti itu ya. Jadi kita akan menjalankan tes ke setiap data di dalam array, dan kemudian kita mengembalikan array baru yang isinya hanya data yang lulus tes saja. Apa saja yang perlu kita tes di dalam filter dapat kita tuliskan pada function yang kita kirimkan sebagai argumentnya.

Kita langsung praktek coding. Kita hapus semua kode sebelumnya, kita sisakan hanya deklarasi array movies saja. Kita akan memanggil method filter. Sebagai contoh, misalkan kita hanya mau mengambil judul yang huruf depannya “T” saja. Maka kita membuat function yang melakukan tes apakah huruf depan judul adalah huruf “T”. Hasil dari method filter kita simpan sebagai variable dengan nama array1 dan kemudian kita tampilkan data array1. Maka kodenya menjadi:

let array1 = movies.filter(function(title){
  return title[0] == "T";
});

console.log(array1); 

Kalau kita jalankan, maka kita mendapatkan hasil “Thor” dan “Top Gun” saja. Karena hanya 2 judul ini saja yang huruf depannya “T”. Perhatikan bahwa array movies tidak mengalami perubahan ya.

Kita bisa mencoba untuk melakukan filter lainnya. Misalkan kali ini kita ingin mengambil judul yang terdiri dari lebih 1 kata. Maka kita melakukan tes apakah judul memiliki huruf spasi. Kita bisa melakukannya dengan cara memanggil method includes.

title.includes(" ");

Kalau kita jalankan, maka kita hanya mendapatkan “Top Gun” dan “Jurassic World” saja. Kita coba lagi ya misalkan hendak mengambil judul yang pendek saja, yang hanya terdiri < 5 huruf, maka kita bisa menggunakan property length < 5. Maka kita mendapatkan hasil hanya film “Thor” saja. Teman-teman bisa mencoba lagi ya kombinasi lainnya untuk melakukan filter.

Sekarang kita masuk ke callback method ketiga, yaitu Map. Map berfungsi untuk membuat array baru yang berisi data yang telah diolah. Bagaimana cara mengolah datanya? Nah inilah yang kita kirimkan sebagai argument pada saat memanggil method map. Langsung kita coba saja ya.

Nah, sekarang kita langsung ganti saja method filter menjadi map. Function yang kita kirimkan sebagai argument juga turut berubah ya. Kalau tadinya method filter hanya memerlukan hasil true atau false saja, sekarang method map memerlukan hasil berupa nilai yang telah kita olah. Sebagai contoh, kita ingin agar judul film kita berubah menjadi huruf besar. Maka kita bisa memanggil method toUpperCase() sebagai return valuenya.

return title.toUpperCase();

Kalau kita jalankan di browser, maka kita mendapatkan array baru yang judul filmnya menggunakan huruf besar semuanya. Perhatikan bahwa array awal movies tidak mengalami perubahan.

Sekarang kita coba lagi ya. Misalkan kita tidak ingin menampilkan judulnya. Kita hanya ingin menampilkan jumlah karakter pada judulnya. Maka kita bisa return nilai dari properti length-nya.

return title.length;

Nah, jadi sekarang yang dikembalikan adalah angka yang merupakan jumlah karakter di dalam judul tersebut.

Bisa juga kalau misalkan kita ingin menampilkan judulnya hanya dalam 3 huruf pertama saja. Kita sudah belajar dari video sebelumnya ya, kita bisa menggunakan method slice.

return title.slice(0, 3);

Kalau kita ingin agar ketiga hurufnya berubah menjadi huruf besar, kita tinggal tambahkan lagi method toUpperCase.

return title.slice(0, 3).toUpperCase();

Jadi begitu ya cara menggunakan method forEach, filter dan map. Agar lebih mengerti, ada baiknya teman-teman mencoba bereksperiman sendiri lagi mengenai cara menggunakan method-method ini.

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.