Lewati ke isi

📔 Hari 9

Higher Order Function

Higher order function itu fungsi yang menerima fungsi lain sebagai parameter atau ngembaliin fungsi sebagai nilai. Fungsi yang dilewatkan sebagai parameter disebut callback. Keren kan!

Callback

Callback tuh fungsi yang bisa dilewatkan sebagai parameter ke fungsi lain. Simpel banget, nih lihat contohnya!

// fungsi callback, nama fungsinya bisa nama apa saja
const callback = (n) => {
  return n ** 2
}
​
// fungsi yang menerima fungsi lain sebagai callback
function cube(callback, n) {
  return callback(n) * n
}
​
console.log(cube(callback, 3))

Fungsi yang Mengembalikan Fungsi

Higher order function ngembaliin fungsi sebagai nilai. Inception banget! ​ 

// Higher order function mengembalikan fungsi lain
const higherOrder = n => {
  const doSomething = m => {
    const doWhatEver = t => {
      return 2 * n + 3 * m + t
    }
    return doWhatEver
  }
  return doSomething
}
console.log(higherOrder(2)(3)(10))

Yuk kita lihat di mana kita pakai fungsi callback. Misalnya nih, metode forEach pakai callback.

const numbers = [1, 2, 3, 4, 5]
const sumArray = arr => {
  let sum = 0
  const callback = function(element) {
    sum += element
  }
  arr.forEach(callback)
  return sum

}
console.log(sumArray(numbers))

15

Contoh di atas bisa disederhanain jadi kayak gini nih:

const numbers = [1, 2, 3, 4]
​
const sumArray = arr => {
  let sum = 0
  arr.forEach(function(element) {
    sum += element
  })
  return sum

}
console.log(sumArray(numbers))

15

Mengatur Waktu (Setting time)

Di JavaScript kita bisa ngeksekusi beberapa aktivitas dalam interval waktu tertentu, atau kita bisa jadwalin (nunggu) dulu selama beberapa waktu buat ngejalanin aktivitas tertentu. Kek punya alarm gitu deh!

  • setInterval
  • setTimeout

Mengatur Interval menggunakan fungsi setInterval

Di JavaScript, kita pakai higher order function setInterval buat ngelakuin suatu aktivitas terus-menerus dalam interval waktu tertentu. Metode global setInterval nerima fungsi callback dan durasi sebagai parameter. Durasinya dalam milidetik dan callback bakal selalu dipanggil dalam interval waktu tersebut.

// sintaks
function callback() {
  // kode di sini
}
setInterval(callback, duration)

function sayHello() {
  console.log('Hello')
}
setInterval(sayHello, 1000) // mencetak hello setiap detik, 1000ms adalah 1s

Mengatur waktu menggunakan setTimeout

Di JavaScript, kita pakai higher order function setTimeout buat ngeksekusi suatu aksi di waktu yang akan datang. Metode global setTimeout nerima fungsi callback dan durasi sebagai parameter. Durasinya dalam milidetik dan callback nunggu selama jumlah waktu yang ditentuin.

// sintaks
function callback() {
  // kode di sini
}
setTimeout(callback, duration) // durasi dalam milidetik

function sayHello() {
  console.log('Hello')
}
setTimeout(sayHello, 2000) // mencetak hello setelah menunggu selama 2 detik.

Functional Programming

Daripada nulis loop biasa terus-terusan, versi terbaru JavaScript udah nyediain banyak metode bawaan yang bisa bantu kita nyelesein masalah rumit. Semua metode bawaan ini pakai fungsi callback loh. Di bagian ini, kita bakal ngulik forEach, map, filter, reduce, find, every, some, dan sort. Siap? Gaskeun!

forEach

forEach: Buat ngiterasi elemen array. Kita pakai forEach cuma dengan array. Metode ini nerima fungsi callback dengan parameter elemen, indeks, dan array itu sendiri. Indeks dan array sifatnya opsional, jadi bisa dipakai bisa enggak.

arr.forEach(function (element, index, arr) {
  console.log(index, element, arr)
})
// Kode di atas dapat ditulis menggunakan arrow function
arr.forEach((element, index, arr) => {
  console.log(index, element, arr)
})
// Kode di atas dapat ditulis menggunakan arrow function dan explicit return
arr.forEach((element, index, arr) => console.log(index, element, arr))

let sum = 0;
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => console.log(num))
console.log(sum)

1
2
3
4
5

let sum = 0;
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => sum += num)

console.log(sum)

15

const countries = ['Finland', 'Denmark', 'Sweden', 'Norway', 'Iceland']
countries.forEach((element) => console.log(element.toUpperCase()))

FINLAND
DENMARK
SWEDEN
NORWAY
ICELAND

map

map: Buat ngiterasi elemen array dan modifikasi elemen array. Metode ini nerima fungsi callback dengan parameter elemen, indeks, array dan ngembaliin array baru. Mantap!

const modifiedArray = arr.map(function (element, index, arr) {
  return element
})

/*Arrow function dan explicit return
const modifiedArray = arr.map((element,index) => element);
*/
//Contoh
const numbers = [1, 2, 3, 4, 5]
const numbersSquare = numbers.map((num) => num * num)

console.log(numbersSquare)

[1, 4, 9, 16, 25]

const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
const namesToUpperCase = names.map((name) => name.toUpperCase())
console.log(namesToUpperCase)

['ASABENEH', 'MATHIAS', 'ELIAS', 'BROOK']

const countries = [
  'Albania',
  'Bolivia',
  'Canada',
  'Denmark',
  'Ethiopia',
  'Finland',
  'Germany',
  'Hungary',
  'Ireland',
  'Japan',
  'Kenya',
]
const countriesToUpperCase = countries.map((country) => country.toUpperCase())
console.log(countriesToUpperCase)

/*
// Arrow function
const countriesToUpperCase = countries.map((country) => {
  return country.toUpperCase();
})
//Explicit return arrow function
const countriesToUpperCase = countries.map(country => country.toUpperCase());
*/

['ALBANIA', 'BOLIVIA', 'CANADA', 'DENMARK', 'ETHIOPIA', 'FINLAND', 'GERMANY', 'HUNGARY', 'IRELAND', 'JAPAN', 'KENYA']

const countriesFirstThreeLetters = countries.map((country) =>
  country.toUpperCase().slice(0, 3)
)

 ["ALB", "BOL", "CAN", "DEN", "ETH", "FIN", "GER", "HUN", "IRE", "JAP", "KEN"]

filter

Filter: Buat nyaring item yang memenuhi kondisi penyaringan dan ngembaliin array baru. Kayak nyaring kopi, yang lolos cuma yang pas aja!

//Filter countries containing land
const countriesContainingLand = countries.filter((country) =>
  country.includes('land')
)
console.log(countriesContainingLand)

['Finland', 'Ireland']

const countriesEndsByia = countries.filter((country) => country.endsWith('ia'))
console.log(countriesEndsByia)

['Albania', 'Bolivia','Ethiopia']

const countriesHaveFiveLetters = countries.filter(
  (country) => country.length === 5
)
console.log(countriesHaveFiveLetters)

['Japan', 'Kenya']

const scores = [
  { name: 'Asabeneh', score: 95 },
   { name: 'Lidiya', score: 98 },
  { name: 'Mathias', score: 80 },
  { name: 'Elias', score: 50 },
  { name: 'Martha', score: 85 },
  { name: 'John', score: 100 },
]

const scoresGreaterEighty = scores.filter((score) => score.score > 80)
console.log(scoresGreaterEighty)

[{name: 'Asabeneh', score: 95}, { name: 'Lidiya', score: 98 },{name: 'Martha', score: 85},{name: 'John', score: 100}]

reduce

reduce: Reduce nerima fungsi callback. Fungsi callback nerima accumulator, current, dan nilai awal opsional sebagai parameter dan ngembaliin satu nilai. Praktik yang baik adalah mendefinisikan nilai awal buat accumulator. Kalau kita nggak tentuin parameter ini, secara default accumulator bakal dapet nilai pertama array. Tapi hati-hati, kalau array kita array kosong, Javascript bakal ngasih error!

arr.reduce((acc, cur) => {
  // beberapa operasi di sini sebelum mengembalikan nilai
 return 
}, initialValue)

const numbers = [1, 2, 3, 4, 5]
const sum = numbers.reduce((acc, cur) => acc + cur, 0)

console.log(sum)

15

every

every: Ngecek apakah semua elemen serupa dalam satu aspek. Ngembaliin boolean. Kalau semua oke, ya true!

const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
const areAllStr = names.every((name) => typeof name === 'string') // Apakah semuanya string?

console.log(areAllStr)

true

const bools = [true, true, true, true]
const areAllTrue = bools.every((b) => b === true) // Apakah semuanya true? 

console.log(areAllTrue) // true

true

find

find: Ngembaliin elemen pertama yang memenuhi kondisi. Jadi langsung dapet yang pertama cocok!

const ages = [24, 22, 25, 32, 35, 18]
const age = ages.find((age) => age < 20)

console.log(age)

18

const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
const result = names.find((name) => name.length > 7)
console.log(result)

Asabeneh

const scores = [
  { name: 'Asabeneh', score: 95 },
  { name: 'Mathias', score: 80 },
  { name: 'Elias', score: 50 },
  { name: 'Martha', score: 85 },
  { name: 'John', score: 100 },
]

const score = scores.find((user) => user.score > 80)
console.log(score)

{ name: "Asabeneh", score: 95 }

findIndex

findIndex: Ngembaliin posisi elemen pertama yang memenuhi kondisi. Jadi dapet indexnya, bukan nilainya!

const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
const ages = [24, 22, 25, 32, 35, 18]

const result = names.findIndex((name) => name.length > 7)
console.log(result) // 0

const age = ages.findIndex((age) => age < 20)
console.log(age) // 5

some

some: Ngecek apakah beberapa elemen serupa dalam satu aspek. Ngembaliin boolean. Kalau ada minimal satu yang cocok, ya true!

const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
const bools = [true, true, true, true]

const areSomeTrue = bools.some((b) =>  b === true)

console.log(areSomeTrue) //true

const areAllStr = names.some((name) => typeof name === 'number') // Apakah semuanya string ?
console.log(areAllStr) // false

sort

sort: Metode sort ngatur elemen array secara ascending atau descending. Secara default, metode sort() ngurutin nilai sebagai string. Ini works banget buat item array string, tapi nggak cocok buat angka. Kalau nilai angka diurutin sebagai string, hasilnya bakal kacau. Metode sort juga modifikasi array asli loh, jadi disaranin buat nyalin data asli dulu sebelum kamu pakai metode sort. Biar aman!

Mengurutkan nilai string

const products = ['Milk', 'Coffee', 'Sugar', 'Honey', 'Apple', 'Carrot']
console.log(products.sort()) // ['Apple', 'Carrot', 'Coffee', 'Honey', 'Milk', 'Sugar']
//Sekarang array products asli juga sudah terurut

Mengurutkan nilai numerik

Kayak yang kamu lihat di contoh bawah, 100 muncul pertama setelah diurutin ascending. Soalnya sort ngonversi item ke string, jadi karena '100' dan angka lainnya dibandingkan, 1 yang jadi awal dari string '100' dianggap paling kecil. Biar nggak kejadian kayak gini, kita pakai fungsi callback pembanding di dalam metode sort, yang ngembaliin negatif, nol atau positif. Gampang kan!

const numbers = [9.81, 3.14, 100, 37]
// Menggunakan metode sort untuk mengurutkan item angka memberikan hasil yang salah. lihat di bawah
console.log(numbers.sort()) //[100, 3.14, 37, 9.81]
numbers.sort(function (a, b) {
  return a - b
})

console.log(numbers) // [3.14, 9.81, 37, 100]

numbers.sort(function (a, b) {
  return b - a
})
console.log(numbers) //[100, 37, 9.81, 3.14]

Mengurutkan Array Objek

Setiap kali kita ngurutin objek dalam array, kita pakai kunci objek buat ngebandingin. Nih lihat contohnya!

objArr.sort(function (a, b) {
  if (a.key < b.key) return -1
  if (a.key > b.key) return 1
  return 0
})

// atau

objArr.sort(function (a, b) {
  if (a['key'] < b['key']) return -1
  if (a['key'] > b['key']) return 1
  return 0
})

const users = [
  { name: 'Asabeneh', age: 150 },
  { name: 'Brook', age: 50 },
  { name: 'Eyob', age: 100 },
  { name: 'Elias', age: 22 },
]
users.sort((a, b) => {
  if (a.age < b.age) return -1
  if (a.age > b.age) return 1
  return 0
})
console.log(users) // terurut ascending
// [{…}, {…}, {…}, {…}]

🌕 Kamu hebat banget! Jangan pernah nyerah ya, karena hal-hal besar emang butuh waktu. Kamu baru aja nyelesein tantangan hari ke-9 dan selangkah lebih dekat menuju kehebatan. Gaskeun sekarang latihan buat otak dan otot kamu!

💻 Latihan

Latihan: Level 1

const countries = ['Finland', 'Sweden', 'Denmark', 'Norway', 'IceLand']
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const products = [
  { product: 'banana', price: 3 },
  { product: 'mango', price: 6 },
  { product: 'potato', price: ' ' },
  { product: 'avocado', price: 8 },
  { product: 'coffee', price: 10 },
  { product: 'tea', price: '' },
]
  1. Jelaskan perbedaan antara forEach, map, filter, dan reduce.
  2. Definisikan fungsi callback sebelum kamu menggunakannya di forEach, map, filter atau reduce.
  3. Gunakan forEach untuk console.log setiap negara di array countries.
  4. Gunakan forEach untuk console.log setiap nama di array names.
  5. Gunakan forEach untuk console.log setiap angka di array numbers.
  6. Gunakan map untuk membuat array baru dengan mengubah setiap negara menjadi huruf besar di array countries.
  7. Gunakan map untuk membuat array panjang negara dari array countries.
  8. Gunakan map untuk membuat array baru dengan mengubah setiap angka menjadi kuadrat di array numbers
  9. Gunakan map untuk mengubah setiap nama menjadi huruf besar di array names
  10. Gunakan map untuk memetakan array products ke harga yang sesuai.
  11. Gunakan filter untuk menyaring negara yang mengandung land.
  12. Gunakan filter untuk menyaring negara yang memiliki enam karakter.
  13. Gunakan filter untuk menyaring negara yang mengandung enam huruf atau lebih di array countries.
  14. Gunakan filter untuk menyaring negara yang dimulai dengan 'E';
  15. Gunakan filter untuk menyaring hanya harga yang memiliki nilai.
  16. Deklarasikan fungsi bernama getStringLists yang menerima array sebagai parameter dan kemudian mengembalikan array hanya dengan item string.
  17. Gunakan reduce untuk menjumlahkan semua angka di array numbers.
  18. Gunakan reduce untuk menggabungkan semua negara dan menghasilkan kalimat ini: Estonia, Finland, Sweden, Denmark, Norway, and IceLand are north European countries
  19. Jelaskan perbedaan antara some dan every
  20. Gunakan some untuk memeriksa apakah ada panjang nama yang lebih dari tujuh di array names
  21. Gunakan every untuk memeriksa apakah semua negara mengandung kata land
  22. Jelaskan perbedaan antara find dan findIndex.
  23. Gunakan find untuk menemukan negara pertama yang hanya memiliki enam huruf di array countries
  24. Gunakan findIndex untuk menemukan posisi negara pertama yang hanya memiliki enam huruf di array countries
  25. Gunakan findIndex untuk menemukan posisi Norway jika tidak ada di array Anda akan mendapatkan -1.
  26. Gunakan findIndex untuk menemukan posisi Russia jika tidak ada di array Anda akan mendapatkan -1.

Latihan: Level 2

  1. Temukan total harga produk dengan merantai dua atau lebih array iterator (mis. arr.map(callback).filter(callback).reduce(callback))
  2. Temukan jumlah harga produk hanya menggunakan reduce reduce(callback))
  3. Deklarasikan fungsi bernama categorizeCountries yang mengembalikan array negara yang memiliki beberapa pola umum (kamu dapat menemukan array countries di repositori ini sebagai countries.js (mis 'land', 'ia', 'island','stan')).
  4. Buat fungsi yang mengembalikan array objek, yang berisi huruf dan jumlah kali huruf tersebut digunakan untuk memulai nama suatu negara.
  5. Deklarasikan fungsi getFirstTenCountries dan kembalikan array sepuluh negara. Gunakan functional programming yang berbeda untuk bekerja pada array countries.js
  6. Deklarasikan fungsi getLastTenCountries yang mengembalikan sepuluh negara terakhir di array countries.
  7. Cari tahu huruf mana yang paling banyak digunakan sebagai awal nama negara dari array countries (mis. Finland, Fiji, France dll)

Latihan: Level 3

  1. Gunakan informasi countries, di folder data. Urutkan negara berdasarkan nama, berdasarkan ibu kota, berdasarkan populasi
  2. *** Temukan 10 bahasa yang paling banyak digunakan:
// Output Anda seharusnya terlihat seperti ini
console.log(mostSpokenLanguages(countries, 10))
[
{country: 'English',count:91},
{country: 'French',count:45},
{country: 'Arabic',count:25},
{country: 'Spanish',count:24},
{country:'Russian',count:9},
{country:'Portuguese', count:9},
{country:'Dutch',count:8},
{country:'German',count:7},
{country:'Chinese',count:5},
{country:'Swahili',count:4}
]

// Output Anda seharusnya terlihat seperti ini
console.log(mostSpokenLanguages(countries, 3))
[
{country: 'English',count: 91},
{country: 'French',count: 45},
{country: 'Arabic',count: 25},
]```
  1. *** Gunakan file countries_data.js buat fungsi yang membuat sepuluh negara dengan populasi terbanyak
console.log(mostPopulatedCountries(countries, 10))

[
{country: 'China', population: 1377422166},
{country: 'India', population: 1295210000},
{country: 'United States of America', population: 323947000},
{country: 'Indonesia', population: 258705000},
{country: 'Brazil', population: 206135893},
{country: 'Pakistan', population: 194125062},
{country: 'Nigeria', population: 186988000},
{country: 'Bangladesh', population: 161006790},
{country: 'Russian Federation', population: 146599183},
{country: 'Japan', population: 126960000}
]

console.log(mostPopulatedCountries(countries, 3))
[
{country: 'China', population: 1377422166},
{country: 'India', population: 1295210000},
{country: 'United States of America', population: 323947000}
]
```
  1. *** Cobalah untuk mengembangkan program yang menghitung ukuran tendensi sentral suatu sampel (mean, median, mode) dan ukuran variabilitas (range, variance, standar deviasi). Selain ukuran-ukuran tersebut, temukan min, max, count, percentile, dan distribusi frekuensi dari sampel. Kamu dapat membuat objek bernama statistics dan membuat semua fungsi yang melakukan perhitungan statistik sebagai metode untuk objek statistics. Lihat output di bawah ini.
const ages = [31, 26, 34, 37, 27, 26, 32, 32, 26, 27, 27, 24, 32, 33, 27, 25, 26, 38, 37, 31, 34, 24, 33, 29, 26]

console.log('Count:', statistics.count()) // 25
console.log('Sum: ', statistics.sum()) // 744
console.log('Min: ', statistics.min()) // 24
console.log('Max: ', statistics.max()) // 38
console.log('Range: ', statistics.range() // 14
console.log('Mean: ', statistics.mean()) // 30
console.log('Median: ',statistics.median()) // 29
console.log('Mode: ', statistics.mode()) // {'mode': 26, 'count': 5}
console.log('Variance: ',statistics.var()) // 17.5
console.log('Standard Deviation: ', statistics.std()) // 4.2
console.log('Variance: ',statistics.var()) // 17.5
console.log('Frequency Distribution: ',statistics.freqDist()) # [(20.0, 26), (16.0, 27), (12.0, 32), (8.0, 37), (8.0, 34), (8.0, 33), (8.0, 31), (8.0, 24), (4.0, 38), (4.0, 29), (4.0, 25)]

console.log(statistics.describe())
Count: 25
Sum:  744
Min:  24
Max:  38
Range:  14
Mean:  30
Median:  29
Mode:  (26, 5)
Variance:  17.5
Standard Deviation:  4.2
Frequency Distribution: [(20.0, 26), (16.0, 27), (12.0, 32), (8.0, 37), (8.0, 34), (8.0, 33), (8.0, 31), (8.0, 24), (4.0, 38), (4.0, 29), (4.0, 25)]

🎉 SELAMAT ! 🎉