Tutorial JavaScript Part#11: Higher-Order Functions pada javascript

Tutorial JavaScript Lanjutan: Array, Object, dan Higher-Order Functions

Halo, para pembaca setia! Apakah Anda ingin memperdalam pemahaman tentang JavaScript, 

pada tutorial sebelumnya kita sudah berlajar mengenai form hendling pada javascript. bagaimana cara mengambil data dari form input dan memanipulasi data yang akan di kirim oleh form input.

materi kita pada tutorial kali ini adalah penggunaan Array, Object, dan Higher-Order Functions seperti map, filter, dan reduce? pada tutorial kali ini akan membahas konsep-konsep tersebut dengan studi kasus sederhana dan penjelasan yang mudah dipahami.

JavaScript adalah bahasa pemrograman yang sangat fleksibel, terutama dalam mengelola data. Dengan memahami Array & Object Lanjutan, Higher-Order Functions, serta Spread & Rest Operator, Anda bisa menulis kode yang lebih efisien dan mudah dibaca. Mari kita mulai!

1. Higher-Order Functions: map, filter, reduce

Higher-Order Functions adalah fungsi yang menerima fungsi lain sebagai argumen atau mengembalikan fungsi. Tiga fungsi paling populer di JavaScript adalah Map, Filter , reduce

A. map(): Transformasi Data dalam Array
Fungsi map() digunakan untuk membuat array baru dengan memodifikasi setiap elemen array asli. 
Kita memiliki array angka dan ingin mengalikan setiap angka dengan 2.
contoh Kode:

map-example.js

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);

console.log(doubled); // Output: [2, 4, 6, 8]
  

Penjelasan:

numbers.map(num => num * 2) mengiterasi setiap elemen array numbers.
Hasilnya adalah array baru [2, 4, 6, 8].

B. filter(): Menyaring Data dalam Array
Fungsi filter() digunakan untuk memilih elemen array yang memenuhi kondisi tertentu. 
Kita ingin menyaring angka yang lebih besar dari 2.
contoh Kode:

filter-example.js

const numbers = [1, 2, 3, 4];
const filtered = numbers.filter(num => num > 2);

console.log(filtered); // Output: [3, 4]
  

Penjelasan:
numbers.filter(num => num > 2) hanya mengambil elemen yang lebih besar dari 2.
Hasilnya adalah [3, 4].

C. reduce(): Mengakumulasi Nilai dalam Array
Fungsi reduce() digunakan untuk menggabungkan semua elemen array menjadi satu nilai. 
Menghitung total jumlah angka dalam array.
contoh Kode:

reduce-example.js

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((total, num) => total + num, 0);

console.log(sum); // Output: 10
  

Penjelasan:
reduce((total, num) => total + num, 0) menjumlahkan semua elemen, dimulai dari nilai awal 0.
Hasilnya adalah 10.

2. Nested Array & Object

A. Mengakses Data dalam Array Bersarang
Array bisa berisi array lain (multidimensional array). 
Mengambil data dari array 2D.
contoh Kode:

nested-array.js

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix[1][2]); // Output: 6
  

Penjelasan:
matrix[1][2] mengakses baris kedua ([4,5,6]) dan elemen ketiga (6).

B. Mengelola Object dalam Array
Array bisa berisi object, dan kita bisa memanipulasinya dengan map/filter. 
Menyaring user dengan usia di atas 20.
contoh Kode:

object-in-array.js

const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 18 },
  { name: "Charlie", age: 30 }
];

const adults = users.filter(user => user.age > 20);

console.log(adults);
// Output: [{ name: "Alice", age: 25 }, { name: "Charlie", age: 30 }]
  

3. Spread & Rest Operator

A. Spread Operator (...)
Digunakan untuk menggabungkan array/object.
contoh Kode:

spread-operator.js

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];

console.log(combined); // Output: [1, 2, 3, 4, 5, 6]
  

B. Rest Operator (...)
Digunakan untuk mengumpulkan sisa parameter.
contoh Kode:

rest-operator.js

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // Output: 10
  

Bagaimana, cukup menarik bukan? sampai disini kita telah selesai mempelajari apa itu Higher-Order Functions,  Dengan memahami konsep-konsep di atas, kalian bisa menulis kode JavaScript yang lebih efisien. 

Jika ada pertanyaan, jangan ragu untuk berkomentar di bawah!
Artikel selanjutnya akan membahas tentang Async/Await dan Promise di JavaScript. Nantikan ya!

Happy Coding ..!!!

Incoming Search Terms:

• Tutorial JavaScript Blogger
• Higher-order functions JavaScript
• Contoh penggunaan map filter reduce
• Nested array JavaScript
• Spread dan rest operator
• Manipulasi array dan object
• Belajar JavaScript lanjutan
• Studi kasus JavaScript
• Kode JavaScript untuk pemula
• Tips optimasi kode JavaScript

Share this post

𝕏