Belajar JavaScript - Fungsi Lanjutan, Parameter Default, Rest, dan Spread

#Pendahuluan

Di episode 4 kalian sudah membuat fungsi dengan parameter biasa. Sekarang waktunya memperluas kemampuan itu: bagaimana fungsi berperilaku ketika argumen tidak dikirim, bagaimana menampung argumen yang jumlahnya tidak menentu, dan bagaimana menyebar isi array atau objek ke tempat lain. Tiga fitur ES6 ini — parameter default, rest parameter, dan spread operator — dipakai begitu sering di JavaScript modern sampai-sampai terasa wajib.

Ketiganya terlihat mirip karena sama-sama memakai tanda ..., tapi fungsinya berbeda total. Membedakannya dengan jelas akan mencegah kebingungan: parameter default mengisi nilai kosong, rest mengumpulkan banyak nilai menjadi satu, dan spread menyebar isi kumpulan menjadi banyak nilai.

Fungsi yang memakai ketiganya dengan baik menjadi jauh lebih ringkas dan lebih aman terhadap input yang tidak terduga.

#Parameter Default

#Mengisi Nilai yang Tidak Dikirim

Tanpa parameter default, argumen yang tidak dikirim bernilai undefined — dan sering membuat fungsi menghasilkan output aneh. Parameter default menetapkan nilai cadangan yang dipakai jika argumen tidak diberikan:

Parameter default

function sapa(nama, bahasa = "Indonesia") {
  const halo = bahasa === "Inggris" ? "Hello" : "Halo";
  return `${halo}, ${nama}!`;
}
 
console.log(sapa("Arman"));
console.log(sapa("Arman", "Inggris"));

function sapa(nama, bahasa = "Indonesia") menetapkan "Indonesia" sebagai default. Memanggil sapa("Arman") memakai default sehingga hasilnya Halo, Arman!, sedangkan sapa("Arman", "Inggris") menghasilkan Hello, Arman!. Nilai default hanya aktif ketika argumen undefined.

#Default yang Lebih Kompleks

Nilai default bisa berupa ekspresi apa pun, termasuk hasil pemanggilan fungsi lain:

Default dengan ekspresi

function buatId(prefix = "user", nomor = Date.now()) {
  return `${prefix}-${nomor}`;
}
 
console.log(buatId());
console.log(buatId("admin", 7));

buatId() menghasilkan ID berbasis timestamp, sedangkan buatId("admin", 7) menghasilkan admin-7. Memakai Date.now() sebagai default berarti fungsi tetap berguna tanpa argumen — pola ini bagus untuk fungsi yang nilainya boleh dipilih pemanggil atau ditentukan otomatis.

#Rest Parameter

#Menampung Banyak Argumen

Rest parameter ditandai ... di depan nama parameter dan mengumpulkan semua argumen tambahan menjadi array:

Rest parameter

function jumlahkan(...angka) {
  let total = 0;
  for (const nilai of angka) {
    total += nilai;
  }
  return total;
}
 
console.log(jumlahkan(1, 2, 3));
console.log(jumlahkan(5, 10, 15, 20));

function jumlahkan(...angka) menerima berapa pun jumlah argumen dan menampungnya dalam array angka. jumlahkan(1, 2, 3) mengembalikan 6, dan versi empat argumen mengembalikan 50. Ini menggantikan objek arguments lama yang perilakunya membingungkan.

#Rest dengan Parameter Sebelumnya

Rest parameter harus menjadi parameter terakhir, dan bisa dikombinasikan dengan parameter biasa:

Rest setelah parameter tetap

function daftarBelanja(toko, ...item) {
  console.log(`Belanja di: ${toko}`);
  return item.join(", ");
}
 
console.log(daftarBelanja("Toko Bersih", "Beras", "Minyak", "Telur"));

function daftarBelanja(toko, ...item) menetapkan toko sebagai argumen pertama dan item menampung sisanya. Hasilnya Belanja di: Toko Bersih lalu Beras, Minyak, Telur. Pola ini sangat umum untuk fungsi yang butuh satu argumen wajib dan sisanya opsional.

#Spread Operator

#Menyebar Array

Spread operator (... di depan array) melakukan kebalikan dari rest: menyebar isi kumpulan menjadi nilai-nilai terpisah. Kegunaan paling umum adalah menggabungkan array:

Menggabungkan array dengan spread

const pagi = ["kopi", "telur"];
const siang = ["nasi", "sayur"];
const menu = [...pagi, ...siang];
 
console.log(menu);
console.log([...menu, "makan malam"]);

[...pagi, ...siang] menggabungkan dua array menjadi satu tanpa method concat. Menambah elemen juga lebih ringkas: [...menu, "makan malam"] menambah di akhir. Spread membuat array baru — array asli tidak berubah, sehingga mencegah mutasi yang tidak disengaja.

#Menyalin Array dengan Aman

Sebelum spread, menyalin array dengan = hanya menggandakan referensi — mengubah salinan mengubah array asli. Spread menciptakan salinan dangkal yang aman:

Menyalin array dengan spread

const asli = [1, 2, 3];
const salinan = [...asli];
 
salinan.push(4);
console.log(salinan);
console.log(asli);

salinan.push(4) hanya mengubah salinan, sedangkan asli tetap [1, 2, 3]. Ini pola [...asli] yang dipakai di mana-mana untuk membuat salinan sebelum mutasi. Perlu diingat: ini salinan dangkal — objek di dalam array masih berbagi referensi, yang akan kita bedah lebih dalam di episode 22.

#Menyebar Objek dan Menggabungkan Pola

#Spread pada Objek

Spread juga bekerja pada objek untuk menggabungkan properti atau membuat salinan:

Spread pada objek

const dasar = { nama: "Arman", role: "Engineer" };
const lengkap = { ...dasar, kota: "Jakarta" };
const duplikat = { ...dasar };
 
console.log(lengkap);
console.log(duplikat);

{ ...dasar, kota: "Jakarta" } menggabungkan properti dasar dengan properti baru. Jika ada kunci yang sama, nilai di belakang akan menimpa — ini pola override konfigurasi yang sangat umum: { ...defaultConfig, ...userConfig }.

#Menggabungkan Semua Pola

Ketiga fitur bekerja bersama dengan natural. Contoh klasik: fungsi yang menerima opsi default dan opsi pengguna:

Default, rest, dan spread bekerja sama

function buatServer(host = "localhost", ...portRange) {
  const port = portRange[0] ?? 3000;
  const config = { host, port, ssl: false };
  return config;
}
 
const server = buatServer("0.0.0.0", 8080);
console.log(server);

host = "localhost" adalah parameter default, ...portRange menampung argumen tambahan, dan objek hasilnya disusun rapi. Fungsi ini menangani panggilan tanpa argumen, dengan satu argumen, atau dengan dua argumen — semuanya tanpa baris kondisional yang berantakan.

#Penutup

Episode 7 menambah tiga fitur ES6 yang membuat fungsi jauh lebih profesional: parameter default untuk nilai cadangan, rest parameter untuk menampung banyak argumen, dan spread operator untuk menyebar serta menggabungkan array dan objek. Ketiganya sering dipakai bersama dalam satu fungsi.

Inti yang harus dibawa pulang:

• Parameter default dipakai ketika argumen bernilai undefined.
• Rest parameter ... harus jadi parameter terakhir dan menghasilkan array.
• Spread [...a, ...b] menggabungkan array tanpa mengubah aslinya.
• [...asli] dan { ...objek } membuat salinan dangkal yang aman.
• Kunci objek yang sama di spread belakang akan menimpa yang depan.
• Default, rest, dan spread bekerja sama untuk fungsi yang fleksibel.

Di episode 8 selanjutnya kita akan membahas arrow function dan higher-order function — sintaks fungsi yang lebih ringkas dengan perilaku this yang berbeda, serta konsep fungsi yang menerima atau mengembalikan fungsi lain. Inilah pintu masuk ke pemrograman fungsional di JavaScript.