Tingkatkan Game JavaScript Anda dengan Fungsi Tingkat Tinggi 🐉

Salam pengembang! Di dunia JavaScript yang terus berkembang, satu hal yang tetap konstan adalah kebutuhan untuk memanipulasi dan memanfaatkan array secara efektif. Untungnya, JavaScript menawarkan banyak fungsi tingkat tinggi yang menyederhanakan tugas ini. Hari ini, kita akan mendalami topik ini, menjelajahi kehebatan peta, filter, pencarian, pengurutan, dan keunggulannya: kurangi.

Keajaiban Fungsi Tingkat Tinggi

Sebelum kita mendalami secara spesifik, mari kita pahami dulu apa yang dimaksud dengan fungsi tingkat tinggi. Ini adalah fungsi yang menggunakan satu atau lebih fungsi sebagai argumen, atau mengembalikan fungsi sebagai hasilnya. Berkat JavaScript yang memperlakukan fungsi sebagai warga kelas satu, kita dapat menugaskannya ke variabel, menggunakannya sebagai properti objek, atau meneruskannya sebagai argumen ke fungsi lain. Hal ini memungkinkan cara yang kuat dan fleksibel untuk menangani data dalam aplikasi kita. Mari kita lihat contohnya:

function greet(name) {
    return `Hello, ${name}!`
}

function loudGreeting(greeting, name) {
    return greeting(name).toUpperCase() + '!!!'
}

console.log(loudGreeting(greet, 'Readers')) 
// Outputs: "HELLO, READERS!!!!"

Dalam contoh ini, loudGreeting adalah fungsi tingkat tinggi karena memerlukan fungsi lain (greet) sebagai argumen.

Fungsi greet bertanggung jawab untuk membuat pesan ucapan sederhana. Fungsi loudGreeting kemudian mengambil fungsi greet ini, menerapkannya, dan selanjutnya memodifikasi output untuk membuat ucapannya keras (mengonversi pesan menjadi huruf besar dan ditambahkan dengan '!!!').

Fungsi tingkat tinggi menyediakan cara yang ampuh untuk mengabstraksi fungsionalitas dan membuat potongan kode yang dapat digunakan kembali dan disusun.

map(): Mengubah Elemen, Satu per Satu

Metode map() membantu ketika Anda perlu membuat array baru dengan menerapkan fungsi ke setiap elemen yang sudah ada.

const numbers = [1, 2, 3, 4, 5]
const squares = numbers.map(num => num ** 2)
console.log(squares)// [1, 4, 9, 16, 25]

Dalam contoh ini, map() menerapkan fungsi kuadrat ke setiap elemen larik numbers dan menghasilkan larik squares baru. Array aslinya tetap tidak berubah.

filter(): Memilih Elemen yang Anda Butuhkan

Saat Anda perlu menyaring array dan memilih elemen tertentu yang memenuhi kondisi tertentu, filter() adalah metode yang Anda inginkan.

Berikut cara menggunakan filter():

const numbers = [1, 2, 3, 4, 5]
const evens = numbers.filter(num => num % 2 === 0)
console.log(evens) // [2, 4]

Dalam hal ini, filter() melewati setiap elemen larik numbers dan membentuk larik evens baru dengan elemen yang melewati kondisi yang ditentukan (angka genap).

find(): Mencari Pertandingan Pertama

Saat Anda perlu menemukan elemen pertama dalam array yang cocok dengan kondisi tertentu, buka find():

const numbers = [1, 2, 3, 4, 5]
const firstEven = numbers.find(num => num % 2 === 0)
console.log(firstEven) // 2

Dalam contoh ini, find() mengembalikan elemen pertama dari larik numbers yang memenuhi kondisi.

sort(): Menata Segalanya

Saat mengatur elemen array dalam urutan tertentu, fungsi sort() adalah teman terbaik Anda.

const numbers = [5, 2, 1, 4, 3]
numbers.sort()
console.log(numbers) // [1, 2, 3, 4, 5]

Untuk mengurutkan angka dalam urutan menurun, Anda dapat meneruskan fungsi perbandingan ke sort():

const numbers = [5, 2, 1, 4, 3]
numbers.sort((a, b) => b - a)
console.log(numbers) // [5, 4, 3, 2, 1]

Masing-masing fungsi tingkat tinggi ini memainkan peran penting dalam pemrograman JavaScript sehari-hari. Namun, ada satu fungsi lagi yang, meski sedikit lebih kompleks, menawarkan tingkat fleksibilitas dan kekuatan yang membuatnya menonjol: fungsi reduce(). Mari selami lebih dalam selanjutnya!

pengurangan(): Permata HOF

Dengan kemampuannya mengambil array dan 'menguranginya' menjadi satu nilai, fungsi reduce() memegang posisi unik dan kuat di antara fungsi tingkat tinggi JavaScript.

Di sinilah kita menemukan konsep penting: akumulator. Akumulator pada dasarnya adalah nilai yang diingat di seluruh iterasi. Dengan setiap melewati array kita, fungsi reduce() mengambil elemen array saat ini dan menggabungkannya dengan akumulator dengan cara yang kita tentukan, yang pada akhirnya menghasilkan nilai output tunggal yang 'terakumulasi'.

Ini terdengar cukup rumit bukan? Namun dengan beberapa contoh Anda akan menyukainya 😆 :

const numbers = [1, 2, 3, 4, 5]
const sum = numbers.reduce((accumulator, currentValue) => accumulator + 
currentValue, 0)
console.log(sum) // 15

Dalam hal ini, fungsi reduce() mengambil serangkaian angka dan 'menguranginya' menjadi jumlahnya. Dengan setiap iterasi, elemen array saat ini (currentValue) ditambahkan ke accumulator (yang dimulai pada 0, seperti yang telah kita tentukan).

Keindahan reduce() adalah fleksibilitasnya. Ini tidak terbatas pada operasi numerik. Katakanlah kita memiliki array string dan kita ingin menggabungkannya menjadi satu string:

const words = ['JavaScript', 'is', 'awesome']
const sentence = words.reduce((accumulator, currentWord) => 
accumulator + ' ' + currentWord, '')
console.log(sentence)// 'JavaScript is awesome'

Dengan menggunakan reduce(), kita dapat 'mengurangi' susunan kata menjadi satu string.

Kekuatan reduce() melampaui operasi matematika sederhana dan rangkaian. Hal ini memungkinkan kita membuat skenario yang lebih kompleks seperti mengubah array menjadi struktur data yang lebih canggih seperti objek juga:

const pets = ['cat', 'dog', 'fish', 'cat', 'dog', 'dog']
const petCount = pets.reduce((count, pet) => {
  count[pet] = (count[pet] || 0) + 1
  return count
}, {})
console.log(petCount) // { cat: 2, dog: 3, fish: 1 }

Dalam contoh ini, kita mereduksi array pets menjadi objek yang kuncinya adalah nama hewan peliharaan, dan nilainya adalah jumlah setiap hewan peliharaan dalam array. Akumulator (count) adalah objek kosong {}, dan pada setiap iterasi, kita menambah jumlah hewan peliharaan terkait atau menginisialisasinya ke 1 jika belum ada.

Dan saya dapat terus memberikan lebih banyak contoh penggunaan pengurangan sepanjang hari 🤯

Akumulator: Inti dari Pengurangan

Salah satu kunci untuk memahami reduce() adalah memberikan perhatian khusus pada konsep akumulator. Ini bukan hanya sebuah variabel tetapi inti dari reduce(). Akumulator mengingat nilainya di setiap iterasi dalam array, berfungsi sebagai nilai kumulatif hingga titik saat ini.

Awalnya, akumulator adalah nilai yang Anda berikan sebagai argumen kedua reduce(). Kemudian, untuk setiap elemen dalam array, akumulator mengambil nilai yang dikembalikan oleh fungsi callback Anda. Pada akhir iterasi, akumulator menjadi nilai tunggal yang dihasilkan.

Hal ini membuat reduce() sangat serbaguna. Dan Anda bahkan tidak dapat membayangkan berapa banyak baris kode yang dapat kita selamatkan 😏

Saya mendorong Anda untuk langsung mencoba metode-metode ini, mencoba-cobanya, dan membuka potensi besar yang ditawarkannya.

Seperti biasa, saya akan terus berbagi lebih banyak wawasan dan pengalaman di dunia JavaScript yang menarik. Untuk bergabung dengan saya dalam perjalanan ini:

Terhubung dengan saya di LinkedIn
Jelajahi proyek saya di GitHub

Mari kita terus menjelajahi dunia coding yang luas bersama-sama. Selamat membuat kode! 😃

Konten lainnya di PlainEnglish.io.

Daftar ke buletin mingguan gratis kami. Ikuti kami di "Twitter", "LinkedIn", "YouTube", dan "Discord" .

Tingkatkan Game JavaScript Anda dengan Fungsi Tingkat Tinggi 🐉