Pada video ini kita akan belajar untuk menuliskan sintaks callback yang lebih singkat lagi. Dari yang tadinya menggunakan function expression seperti contoh kode bagian atas, menjadi menggunakan arrow function expression seperti contoh kode di bagian bawah.

Kita langsung praktek coding. Saya sudah menyediakan kode Javascript yang bisa dilihat di layar. Di baris pertama saya membuat variable numbers yang isinya array dari 1 hingga 10. Kemudian saya membuat array baru yang isinya merupakan hasil filter dari numbers. Di dalam fungsi filter kita melakukan pengecekan apakah angkanya habis dibagi 2. Jadi kita hanya mengambil angka genap saja.

Kita lihat hasilnya di browser. Setelah di-filter, maka array hasilnya hanya 2, 4, 6, 8, 10 atau angka genap saja.

Kita kembali ke kode. Sekarang fungsi filter dan console log saya copy dan paste satu kali dibawahnya. Sedangkan nama variable array1 saya ubah menjadi array2. Kalau dilihat hasilnya di browser, sekarang kita memiliki 2 buah array angka genap ya. Array1 dan Array2 isinya sama persis. Ya namanya juga copy paste ya.

Kita akan merombak cara penulisan kode filter di array2 menjadi menggunakan arrow function expression. Untuk itu kita harus menjalani 3 langkah mudah. Kita mulai dari langkah pertama terlebih dahulu. Kita tuliskan dahulu langkah pertamanya di bagian komentar.

Hilangkan kata “function”, lalu tambahkan tanda arrow atau anak panah diantara parameter dan kurung kurawal. Kita bisa menuliskan simbol anak panah ini dengan menggunakan tanda sama dengan dan lebih besar. Maka kode kita menjadi:

// 1. Hilangkan kata "function"
// Tambahkan => diantara parameter dan {}
let array2 = numbers.filter((n) => {
  return n % 2 == 0;
});

Kita simpan dan jalankan di browser. Dan kode kita tetap berjalan dengan benar ya. Tidak ada error, dan hasilnya tetap sama persis.

Kita lanjutkan ke langkah kedua. Kita copy paste dahulu source code langkah pertama. Lalu langkah pertama kita komentari semuanya ya.

Langkah keduanya adalah hilangkan tanda kurung dari parameter. Maka kode kita berubah menjadi:

// 2. Hilangkan () dari parameter
let array2 = numbers.filter(n => {
  return n % 2 == 0;
});

Kode tetap berjalan dengan benar dan hasilnya tetap benar.

Perhatikan bahwa kita hanya bisa menghilangkan tanda kurung, apabila kita menggunakan 1 parameter. Sedangkan kalau kita menggunakan 2 atau lebih parameter, maka kita tetap harus menggunakan tanda kurung. Kalau kita coba di kode dengan menggunakan 2 parameter, misalkan kita tambahkan parameter b, maka hasilnya menjadi error. Begitu juga kalau tidak menggunakan parameter sama sekali, kode menjadi error. Jadi langkah kedua hanya bisa dijalankan apabila kita menggunakan 1 parameter.

Sekarang kita masuk ke langkah ketiga. Kita copy paste lagi kode langkah kedua. Dan kemudian kita ubah langkah kedua menjadi komentar.

Perhatikan bahwa langkah ketiga ini juga hanya boleh dijalankan apabila di dalam function kita hanya terdapat satu statement, yang sekaligus menjadi return value-nya. Apabila terdapat lebih dari satu statement, walaupun hanya untuk deklarasi konstanta saja, maka kita tidak boleh melakukan langkah ketiga. Apakah langkah ketiganya?

Hilangkan kurung kurawal dan kata “return”. Kita hapus kurung kurawal dan return-nya. Dan berhubung kode kita pendek, maka bisa kita tulis dalam satu baris. Kode kita menjadi:

// 3. Hilangkan {} dan "return"
let array2 = numbers.filter(n => n % 2 == 0);

Kita simpan dan jalankan di browser. Tidak ada error ya. Dan hasilnya tetap sama. Berarti kita sudah berhasil merubah kode, dari yang awalnya menggunakan function expression seperti ini. Kode-nya ada 3 baris. Menjadi menggunakan arrow function expression yang hanya 1 baris.

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.