Kita akan melanjutkan ke array callback methods yang lebih rumit, yaitu sort dan reduce. Kita mulai dari method sort terlebih dahulu.

Sesuai dengan namanya, sort, method ini berfungsi untuk mengurutkan isi array. Method sort juga bisa menerima argument yang berupa function, dimana kita bisa menuliskan sendiri kode untuk melakukan perbandingan untuk menentukan urutan dari isi array.

Kita lihat ke function yang diperlukan sebagai argument sort. Function ini harus memiliki 2 buah parameter yang merupakan 2 elemen yang sedang dibandingkan. Function harus mengembalikan nilai negatif apabila nilai elemen pertama lebih kecil dari elemen kedua. Nilai 0 apabila elemen pertama sama dengan elemen kedua. Dan nilai positif apabila elemen pertama lebih besar dari elemen kedua.

Kita langsung coba praktek ya. Saya sudah menyediakan dua buah arrays, yaitu students dan numbers. Array students berisikan nama-nama pelajar dengan tipe data string. Sedangkan array numbers berisi angka acak, dengan tipe data numbers.

Kalau kita jalankan di browser. Tidak ada tulisan apa-apa di console ya. Namun kita bisa memeriksa bahwa sekarang kita memiliki array students dan numbers.

Kita bisa langsung memanggil method sort pada array students, kodenya adalah

students.sort();

Dan method ini langsung mengurutkan semua nama pada array students, berdasarkan abjadnya. Ada beberapa behavior dari method sort yang perlu kita ketahui.

Yang pertama, method langsung mengubah urutan isi dari array yang bersangkutan. Jadi kalau kita lihat kembali isi dari array students, sekarang datanya sudah berurutan dari a ke z.

Yang kedua, method sort mengembalikan referensi ke array itu sendiri. Jadi kalau misalkan kita melakukan sort ke array numbers dan menyimpan return valuenya ke variable array1:

let array1 = numbers.sort();
array1 === numbers;

Kita bisa cek kembali bahwa variable array1 merujuk ke array yang sama dengan variable numbers.

Yang ketiga, kita bisa melihat kembali isi dari array numbers. Walaupun sudah diurutkan, namun kalau kita perhatikan kembali, ternyata 10 lebih kecil daripada 2. Mengapa bisa begitu? Karena cara kerja sort secara default akan mengubah semua tipe data menjadi string, kemudian membandingkan semua elemen dalam bentuk string. String “10” bernilai lebih kecil daripada string “2”, karena string “10” diawali oleh angka “1”. Nah, untuk mengurutkan angka dengan benar, maka kita harus membuat sendiri fungsi untuk melakukan perbandingannya.

Yang keempat, secara default sort mengurutkan dari kecil ke besar. Kalau kita ingin kebalikannya, dari besar ke kecil, maka kita bisa memanggil method reverse setelah sort. Kita coba ya. Kita refresh browser. Kita lihat isi array students sudah kembali ke semula. Pertama kita panggil method sort terlebih dahulu. Kemudian kita panggil method reverse. Dan sekarang isi dari array students diurutkan dari besar ke kecil.

students.sort();
students.reverse();

Pemanggilan method sort dan reverse ini bisa kita singkat dari 2 baris menjadi 1 baris. Kita coba refresh lagi browser ya. Sekarang kita panggil kedua method dengan perintah

students.sort().reverse();

Artinya pertama kita panggil method sort terlebih dahulu, dan dari hasilnya kita langsung gunakan untuk memanggil method reverse. Kita cek hasil akhirnya, sekarang array students sudah diurutkan dari besar ke kecil.

Kita kembali ke source code. Kita akan memanggil fungsi sort dengan menggunakan fungsi perbandingan buatan kita sendiri. Kita sudah lihat pada slide tadi ya. Fungsi yang kita kirimkan sebagai argument memerlukan 2 buah parameter, disini kita beri nama a dan b. Kemudian kita tuliskan isi fungsinya. Apabila a < b maka kembalikan nilai -1. Apabila a == b, maka kembalikan nilai 0. Selain itu kembalikan nilai 1. Maka kodenya menjadi:

students.sort((a, b) => {
  if(a < b)
    return -1;
  else if (a == b)
    return 0;
  else
    return 1;
});

Kita simpan dan refresh browser. Kita lihat isi dari array students sekarang sudah berurutan dari kecil ke besar. Kalau kita ingin urutannya dibalik, maka kita tinggal menukar posisi dari parameter a dan b.

students.sort((b, a) => {
  if(a < b)
    return -1;
  else if (a == b)
    return 0;
  else
    return 1;
});

Sekarang isi dari array students berurutan dari besar ke kecil. Kita kembalikan dulu parameter menjadi a dan b. Lalu kita copy paste kode ini untuk array numbers.

numbers.sort((a, b) => {
  if(a < b)
    return -1;
  else if (a == b)
    return 0;
  else
    return 1;
});

Kita lihat hasilnya di browser. Dan sekarang array numbers pun sudah berhasil diurutkan dengan benar, sesuai dengan tipe data number. Namun kalau kita lihat kembali ke source code, semua kondisi yang berada di dalam fungsi ini bisa kita singkat menjadi return a – b. Dan berhubung fungsi ini hanya terdiri dari satu baris return, maka kita bisa menghapus kurung kurawal dan kata kunci return-nya. Kode kita menjadi singkat:

numbers.sort((a, b) => a - b);

Kita simpan dan jalankan di browser. Dan method sort tetap berjalan dengan benar ya. Tanpa ada error. Jadi ini adalah kode tersingkat untuk mengurutkan angka. Perlu diingat bahwa kode ini hanya bisa jalan dengan benar di tipe data numbers, karena operator tanda kurang hanya bisa digunakan pada tipe data numbers.

Kita masuk ke callback method terakhir yang kita bahas dalam playlist ini, yaitu reduce. Cara penggunaan method ini lebih susah dibandingkan dengan yang lainnya, sehingga kita bahas di paling akhir. Saya harap teman-teman sudah banyak mencoba callback method sehingga pengalaman yang didapat akan sangat membantu dalam mempelajari reduce.

Kalau kita melihat dari kata reduce, artinya adalah mengurangi. Jadi method ini berfungsi untuk mengurangi seluruh isi array menjadi satu buah nilai akhir. Untuk memanggil method ini, kita harus menggunakan sebuah argument yang berupa function, yang berfungsi untuk menghitung nilai akhir.

Kita lihat ke function yang menjadi argument reduce. Function ini bisa memiliki 4 buah parameter. Yang pertama ada previousValue atau nilai sebelumnya. Yang kedua adalah currentValue, atau nilai dari elemen array yang sedang kita proses. Yang ketiga adalah currentIndex atau nomor index yang sedang kita proses. Dan yang terakhir adalah referensi ke array itu sendiri. Yang harus kita gunakan adalah 2 parameter pertama. Parameter index dan array bersifat opsional.

Yang membuat programmer pemula lebih susah untuk menerima konsep reduce adalah, function yang kita buat ini harus mengembalikan sebuah nilai. Dan nilai yang dikembalikan ini akan menjadi previousValue pada saat kita memanggil kembali function ini pada iterasi berikutnya.

Agar lebih mudah untuk memahami reduce, kita langsung masuk praktek coding saja ya. Disini kita sudah menyediakan array numbers yang isinya hanya 10, 20 dan 30 saja. Nantinya kalau teman-teman sudah mengerti, bisa coba sendiri lagi dengan array yang jumlah datanya lebih banyak ya. Untuk latihan kali ini kita hanya menggunakan 3 buah data saja. Kita akan menuliskan kode yang menghitung nilai total dari seluruh data di dalam array. Kalau kita hitung secara manual, 10 +20 + 30 hasilnya adalah 60. Gampang ya.

Sekarang kita tuliskan kodenya dengan menggunakan cara pemograman dasar terlebih dahulu. Kita mesti menyiapkan sebuah variable untuk menampung nilai total dari seluruh array. Kita beri nilai awal 0. Kemudian kita melakukan looping for sebanyak jumlah data array. Pertama kita ambil dahulu data array yang hendak kita proses dan kita simpan ke variable dengan nama current. Kemudian nilai total kita ubah menjadi total + current. Di luar looping, kita panggil console.log untuk menampilkan isi dari total. Maka kodenya menjadi:

let total = 0;
for(let i = 0; i < numbers[i]; i++)
{
  let current = numbers[i];
  total = total + current;
}
console.log(total);

Kita simpan dan refresh browser. Maka kita mendapatkan nilai total = 60. Sesuai dengan yang kita hitung secara manual ya.

Selanjutnya, kode yang sekarang saya copy paste terlebih dahulu ke bawahnya. Lalu kode yang pertama saya ubah menjadi komentar. Kita akan melakukan refactoring terhadap isi loop. Jadi baris total = total + current ini akan kita ubah menjadi function sum. Kita buat sebuah function sum dengan parameter previous dan current. Untuk hasilnya, kita return previous + current. Fungsinya sederhana saja ya. Jadi baris di dalam loop kita ganti menjadi total = sum(total, current). Kodenya menjadi:

let total = 0;
for(let i = 0; i < numbers[i]; i++)
{
  let current = numbers[i];
  total = sum(total, current);
}

function sum(previous, current)
{
  return previous + current;
}

Kita simpan dan refresh browser. Hasilnya sama-sama 60 ya. Namun yang kali ini kita menggunakan function sum di dalam loop.

Agar bisa lebih mengerti, kita coba debug kode kita menggunakan chrome. Kita buka bagian Souces, kita pilih reduce.js. Kemudian kita berikan 3 buah breakpoint, 2 breakpoint di dalam loop dan satu breakpoint di dalam function sum. Kita refresh browser untuk menjalankan ulang kode kita.

Pada saat pertama kali kita masuk ke dalam loop, perhatikan bahwa nilai i adalah 0, dan nilai total masih 0. Kita membuat variable current dan mengisinya dengan nilai yang dikandung oleh array numbers dengan index 0.

Pada baris berikutnya, kita mendapatkan current dengan nilai 10, total dengan nilai 0. Kemudian kita memanggil fungsi sum dengan menggunakan argument total dan current. Di dalam function, kita menambahkan nilai 0 dengan 10. Hasilnya adalah 10 dan dikembalikan untuk disimpan di dalam variable total.

Kita lanjut ke iterasi berikutnya, dengan nilai i = 1. Kita mengambil nilai array yang hendak diproses 20. Kemudian kita memanggil fungsi sum dengan argument total dan current. Dengan nilai 10 dan 20. Perhatikan disini bahwa nilai yang kita hasilkan dari fungsi sum sebelumnya adalah 10. Nilai ini kita simpan ke variable total. Dan sekarang nilai 10 ini kita gunakan lagi untuk memanggil fungsi sum sebagai argument previous. Di dalam fungsi, kita tambahkan 10 + 20, kemudian kita kembalikan nilai 30 untuk disimpan di dalam variable total.

Ke iterasi berikutnya dengan nilai i = 2. Kita mengambil nilai array yang hendak diproses 30. Kemudian kita panggil fungsi sum dengan argument 30 dan 30. Dan kita mendapatkan hasil akhir 60. Hasil inilah yang diperlihatkan pada console.

Oke, saya harap teman-teman sudah mengerti ya. Kalau belum mengerti, bisa ulangi lagi video ini dan bisa langsung praktek coding dan debug menggunakan Chrome. Karena ini adalah konsep dasar dari method reduce. Jadi seluruh kode looping ini bisa saya komentari dan saya ganti menjadi satu baris kode reduce dengan menggunakan fungsi sum sebagai argument-nya.

let total = numbers.reduce(sum);

Dan kalau kita lihat hasilnya di console. Kita hapus dulu breakpointnya. Kita lihat di console hasilnya tetap sama 60.

Dan sekarang kita komentari lagi kode kita ya. Sekarang function sum ini bisa kita persingkat lagi dengan menggunakan arrow function expression. Jadi kita memanggil method reduce dengan menggunakan function yang memiliki 2 buah parameter. Nama parameter kita singkat jadi menjadi p dan c. Dimana isi dari function adalah p + c. Dan kode kita pun menjadi satu baris singkat. Dan kita lihat di browser, hasilnya tetap sama 60.

let total = numbers.reduce((p,c) => p + c);

Method reduce ini bisa kita gunakan lagi untuk beberapa tujuan lainnya. Misalnya kalau kita ingin mencari nilai paling kecil dari isi array. Saya copy paste dulu kode reduce ya. Dan yang pertama saya komentari dahulu.

Kalau kita ingin mencari nilai terkecil, maka bagian anak panah dari arrow function bisa kita ubah. Pertama kita bandingkan dahulu apakah nilai p < c. Apabila benar, maka kita ambil nilai p. Sedangkan apabila salah, maka kita ambil nilai c. Maka method kita menjadi:

let total = numbers.reduce((p,c) => (p < c) ? p : c);

Kita simpan dan refresh browser. Maka kita mendapatkan nilai yang paling kecil dari array yaitu 10. Bagaimana kalau kita ingin nilai yang paling besar? Gampang ya. Kita tinggal copy paste kode reduce terakhir. Kita komentari dahulu kode awal. Kemudian kita ubah operator < menjadi >. Dan sekarang kita mendapatkan nilai terbesar dari array, yaitu 30.

Jadi begitu ya cara menggunakan method reduce. Sebenarnya walaupun kita tidak mengerti reduce, kita tetap bisa memecahkan masalah dengan menggunakan pemograman dasar. Namun dalam prakteknya, kita seringkali diharuskan untuk membaca kode buatan orang lain. Dan apabila orang lain tersebut menggunakan method reduce, maka mau tidak mau kita harus belajar juga mengenai reduce. Cara reduce ini menjadi popular karena bisa memecahkan banyak masalah hanya dengan satu baris kode.

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.