Hari ni aku nak buat nota sedikit mengenai function-function di dalam functional programming JavaScript. Kita akan gunakan data ni dalam semua contoh kita.

forEach()

Function .foreEach() adalah function yang memudahkan kita untuk loop array. Kebiasaannya kita akan loop array menggunakan for loop. Contohnya:

Untuk loop menggunakan function .forEach() kita perlu gunakannya dengan callback function:

Perhatikan syntax yang lebih ringkas (malah boleh lebih ringkas dengan syntax es6 arrow function) dan keputusan yang sama.

filter()

Function .filter() pula digunakan untuk “filter” array dan pulangkan keputusan yang di “filter”. misalnya:

Syntax yang pendek kan? Cuba lihat kalau kita gunakan for loop untuk filter array seringkas ini.

Jom filter array objek, misalnya kita nak tahu company yang kekal sekurang-kurangnya 20 tahun.

map()

Function .map() ni sebenarnya lebih kurang fungsinya seperti function .forEach() sebab dia loop through each element array tu. Tapi tak sama macam .forEach() sebab .map() akan create array baharu.  cuba tengok contoh ni.

Disebabkan .map() boleh create array baharu, kita boleh gunakannya dengan function lain seperti .filter() misalnya. kita ambil contoh filter di atas (company sekurang-kurangnya kekal 20 tahun). Dan aku nak introduce es6 template string sekali.

Contoh lain adalah seperti ini

sort()

Sort, nampak seperti mudah. Tetapi banyak faktor perlu diambil kira misalnya Unicode point order. Kenapa aku cakap macam tu? cuba tengok contoh ni:

Lihat, di dalam array tersebut nombor 5 tidak berada di hadapan sekali, kenapa? Ini kerana dalam Unicode point order, nombor seperti 12 dan lain-lain adalah hasil gabungan nombor 1 dan 2, menjadikan dia 12. Dalam kes ini, nombor 5 dianggap gabungan 5 dan 0. Contoh lain jika kita sort array ini  [1,2,12,14,15].sort() jawapannya adalah  1,12,14,15,2 . Untuk mendapatkan jawapan yang lebih tepat dalam konteks ini, kita perlu menggunakan compareFunction seperti ini:

Lihat dengan cara ini 5 tersusun tepat pada kedudukan yang sepatutnya. Alternatifnya boleh ditulis begini:

Ini pula penggunaan .sort() untuk menyusun objek dalam array.

reduce()

Pada aku function ni adalah function yang paling complicated tetapi “powerful”. Banyak perkara yang boleh dibuat dengan function reduce ni. Antaranya untuk hasil tambah kesemua element pada array. Untuk array ini aku nak terangkan sedikit tentang parameter yang diterima oleh function ini. Asasnya .reduce() diguna begini:

Jika function .reduce() tidak diberikan parameter kedua (accumulator), contoh: [1,2,3,4].reduce( (a , b) => a + n ); , accumulator adalah element pertama dalam array tersebut. disini adalah nombor 1 dan hasil tambah semua element adalah 10. Jadi aliran function ini adalah seperti berikut:

callback accumulator currentValue currentIndex array return value
first call 1 2 1 [1, 2, 3, 4] 3
second call 3 3 2 [1, 2, 3, 4] 6
third call 6 4 3 [1, 2, 3, 4] 10

Jika parameter kedua diberikan, contoh:  [1,2,3,4].reduce( (a , b) => a + b ), 5); , accumulator adalah nombor 5 dan hasil tambah semua element adalah 15. Jadi Aliran Function adalah seperti berikut:

callback accumulator currentValue currentIndex array return value
first call 5 1 0 [1, 2, 3, 4] 6
second call 6 2 1 [1, 2, 3, 4] 8
third call 8 3 2 [1, 2, 3, 4] 11
fourth call 11 4 3 [1, 2, 3, 4] 15

Contoh penggunaan gabungan Function