Default Parameters JavaScript: Contoh Pemakaian dan Penjelasannya Lengkap

Halo, pernahkah Anda menulis fungsi JavaScript dan menerima nilai undefined yang tidak diinginkan karena parameter tidak diberikan? Masalah ini sangat umum, terutama ketika fungsi dipanggil dengan argumen yang tidak lengkap. Untungnya, ES6 memperkenalkan fitur default parameters JavaScript yang memungkinkan Anda menentukan nilai bawaan untuk parameter fungsi. Dengan fitur ini, Anda tidak perlu lagi melakukan pengecekan manual seperti if (param === undefined) atau menggunakan operator logika || yang bisa menimbulkan bug. Artikel ini akan memandu Anda secara lengkap mulai dari sintaks dasar, penerapan di regular function dan arrow function, hingga studi kasus nyata dan tips debugging. Anda akan memahami kapan dan bagaimana menggunakan default parameters dengan benar agar kode Anda lebih bersih, mudah dibaca, dan bebas dari efek samping yang tidak terduga. Mari kita mulai perjalanan mendalami default parameters JavaScript.

Dengan default parameters JavaScript, kamu bisa mencegah error undefined saat argumen tidak diisi tanpa perlu menulis kondisi manual.

Cara Kerja Default Parameters JavaScript

Default parameters bekerja dengan menetapkan nilai awal pada parameter fungsi saat definisi. Jika argumen tidak diberikan atau bernilai undefined, maka nilai default akan digunakan. Sintaksnya sederhana: param = defaultValue. Nilai default dievaluasi setiap kali fungsi dipanggil, bukan saat fungsi didefinisikan. Ini penting karena memungkinkan default berupa ekspresi dinamis, seperti hasil pemanggilan fungsi lain.

Contoh dasar:

function greet(name = "Tamu") {
 console.log(`Halo, ${name}!`);
}
greet(); // Halo, Tamu!
greet("Andi"); // Halo, Andi!

Pada kode di atas, parameter name mendapat nilai default "Tamu". Ketika greet() dipanggil tanpa argumen, name adalah undefined sehingga default digunakan. Perhatikan bahwa nilai default hanya dipicu jika argumen yang diberikan adalah undefined — nilai falsy lain seperti null, 0, atau "" akan tetap digunakan.

Regular Function dengan Default Parameters JavaScript

Fungsi reguler (function declaration) adalah tempat paling umum untuk menerapkan default parameters. Mari kita lihat contoh fungsi sayHello yang menerima dua parameter dengan nilai default.

// Fungsi sayHello dengan default parameters
function sayHello(name = "Stranger", greet = "Hello") {
 // Jika name tidak diberikan, gunakan "Stranger"
 // Jika greet tidak diberikan, gunakan "Hello"
 console.log(`${greet}, ${name}!`);
}

sayHello(); // Output: Hello, Stranger!
sayHello("Adi"); // Output: Hello, Adi!
sayHello("Budi", "Hai"); // Output: Hai, Budi!

Penjelasan line-by-line:

1. Baris 1: Mendefinisikan fungsi sayHello dengan parameter name dan greet. Masing-masing memiliki default "Stranger" dan "Hello".
2. Baris 3: Mencetak sapaan ke konsol menggunakan template literal.
3. Baris 5: Panggilan tanpa argumen → name = "Stranger", greet = "Hello".
4. Baris 6: Panggilan dengan satu argumen → name = "Adi", greet = "Hello" (default).
5. Baris 7: Panggilan dengan dua argumen → semua default tidak terpakai.

Arrow Function dengan Default Parameters JavaScript

Arrow function juga mendukung default parameters sepenuhnya. Sintaksnya identik dengan fungsi reguler, hanya saja menggunakan tanda panah.

// Arrow function dengan default parameters
const sayHelloArrow = (name = "Stranger", greet = "Hello") => {
 console.log(`${greet}, ${name}!`);
};

sayHelloArrow(); // Hello, Stranger!
sayHelloArrow("Cici"); // Hello, Cici!
sayHelloArrow("Dodi", "Hi"); // Hi, Dodi!

Perhatikan bahwa karena arrow function tidak memiliki arguments object (kecuali dengan rest parameters), penggunaan default parameters justru lebih ergonomis. Anda tetap bisa mengakses parameter lain melalui destructuring atau rest jika diperlukan.

Default Parameters dengan Nilai Kompleks dan Expression

Nilai default tidak terbatas pada string atau angka. Anda bisa menggunakan ekspresi matematika, pemanggilan fungsi, atau bahkan objek kompleks. Nilai default dievaluasi setiap kali fungsi dipanggil, sehingga ekspresi dinamis sangat berguna.

Contoh menggunakan ekspresi matematika

// Default parameter dengan ekspresi: panjang * 2
function createRectangle(length = 10, width = length * 2) {
 return { length, width };
}

console.log(createRectangle()); // { length: 10, width: 20 }
console.log(createRectangle(5)); // { length: 5, width: 10 }
console.log(createRectangle(3, 4)); // { length: 3, width: 4 }

Pada kode di atas, parameter width menggunakan ekspresi length * 2. Karena evaluasi terjadi saat runtime, nilai length sudah tersedia (asalkan didefinisikan lebih dulu).

Fungsi sebagai default

// Default parameter berupa fungsi
function getTimestamp() {
 return Date.now();
}

function logMessage(message, timestamp = getTimestamp()) {
 console.log(`[${timestamp}] ${message}`);
}

logMessage("Server started"); // [1710000000000] Server started

Di sini, getTimestamp() dipanggil setiap kali logMessage dipanggil tanpa argumen kedua. Ini memastikan timestamp selalu aktual.

Object Destructuring dan Default Parameters

Kombinasi destructuring object dengan default parameters memungkinkan Anda menangani argumen opsional dengan rapi. Pola ini sering digunakan pada fungsi konfigurasi.

// Fungsi createUser dengan destructuring dan default
function createUserV2({ name = "Anonymous", age = 18 } = {}) {
 return `User: ${name}, Age: ${age}`;
}

console.log(createUserV2()); // User: Anonymous, Age: 18
console.log(createUserV2({ name: "Eva" })); // User: Eva, Age: 18
console.log(createUserV2({ name: "Fahri", age: 25 })); // User: Fahri, Age: 25

Perhatikan = {} setelah kurung kurawal: ini adalah default untuk parameter objek itu sendiri. Jika tidak ada argumen sama sekali, undefined akan di-destructure dan menyebabkan error. Dengan = {}, parameter menjadi objek kosong, lalu properti name dan age akan menggunakan default masing-masing.

Pola default parameters JavaScript sangat membantu saat menggabungkan object destructuring dengan nilai fallback yang aman.

Default Parameters vs Rest Parameters vs Optional Chaining

Ketiga fitur ini sering membingungkan. Berikut perbandingannya dalam tabel:

Default parameters bekerja pada sisi definisi fungsi, rest parameters pada sisi pemanggilan (menampung kelebihan argumen), sedangkan optional chaining digunakan saat mengakses properti di luar fungsi. Ketiganya bisa dikombinasikan, misalnya function log(...args) { args.forEach(a => console.log(a?.toString() ?? 'N/A')); }.

Kapan Default Parameters JavaScript Sangat Berguna

Berikut beberapa skenario di mana default parameters sangat membantu:

• Fetch API dengan nilai default URL: Saat membuat fungsi untuk mengambil data, Anda bisa memberikan default base URL.
• React props default: Meskipun React memiliki defaultProps, Anda juga bisa menggunakan default parameters langsung pada fungsi komponen.
• Utility functions seperti formatDate atau debounce yang memerlukan parameter opsional.

// Contoh Fetch API dengan default
async function fetchData(url = "https://api.example.com/data", options = {}) {
 const response = await fetch(url, options);
 return response.json();
}
// https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

// Contoh React-like function component (tanpa JSX)
function Greeting({ name = "Guest" } = {}) {
 return `Selamat datang, ${name}!`;
}

Common Mistakes Default Parameters JavaScript dan Debugging Tips

Meskipun sederhana, ada beberapa kesalahan umum yang perlu dihindari:

• Urutan parameter dengan nilai default: Parameter dengan default harus diletakkan setelah parameter wajib. Misalnya function(a, b = 2) benar, function(a = 1, b) akan menyebabkan kesalahan jika b tidak diberikan — nilai undefined akan diteruskan ke b, bukan default.
• Hindari penggunaan || untuk default: param || defaultValue akan menggunakan default untuk semua nilai falsy (0, ”, null, false), bukan hanya undefined. Gunakan default parameters atau ?? (nullish coalescing) jika perlu.
• Evaluasi lazy vs eager: Nilai default dievaluasi setiap kali fungsi dipanggil (lazy). Jika menggunakan ekspresi yang mahal (misalnya getExpensiveData()), pastikan Anda sadar akan implikasi performa.

// Contoh kesalahan urutan
function wrongOrder(x = 10, y) {
 console.log(x, y);
}
wrongOrder(undefined, 5); // Output: 10, 5 — ok, tapi panggilan wrongOrder(,5) tidak valid sintaks

Studi Kasus Nyata dan Performance Tips

Bayangkan Anda membangun aplikasi log yang mencatat aktivitas pengguna. Fungsi logActivity bisa menerima parameter opsional seperti timestamp dan level.

function logActivity(action, user = "anonymous", timestamp = new Date().toISOString(), level = "info") {
 const entry = { action, user, timestamp, level };
 console.table(entry);
 // Simpan ke database atau file log
}

logActivity("login");
logActivity("purchase", "budi@example.com");
logActivity("error", "admin", undefined, "error"); // melewatkan timestamp

Memahami perilaku default parameters JavaScript saat nilai null atau undefined diteruskan akan membuat debugging lebih cepat.

Performance tips:

• Jika default parameter adalah objek atau array yang sama setiap kali, gunakan nilai default yang sama di luar fungsi untuk menghindari alokasi memori berulang.
• Namun, jika objek tersebut perlu dimutasi dalam fungsi, lebih aman membuat objek baru di dalam fungsi (atau menggunakan default parameter).
• Untuk fungsi yang dipanggil jutaan kali, pertimbangkan untuk menggunakan undefined check manual dengan ?? untuk menghindari overhead evaluasi ekspresi default yang kompleks.

Pelajari lebih lanjut tentang default parameters di MDN Default Parameters. Baca juga artikel terkait di Perbandingan Regular Function vs Arrow Function untuk tips JavaScript lainnya.

Rangkuman Default Parameters JavaScript

Berikut lima poin penting yang perlu Anda ingat:

• Default parameters menggunakan sintaks param = defaultValue dan hanya aktif jika argumen bernilai undefined.
• Nilai default dievaluasi setiap kali fungsi dipanggil (lazy evaluation), sehingga bisa berupa ekspresi dinamis.
• Kombinasikan dengan destructuring untuk menangani objek opsi dengan rapi (contoh { prop = default } = {}).
• Hindari jebakan urutan parameter: parameter opsional sebaiknya diletakkan di akhir.
• Gunakan default parameters sebagai pengganti || untuk menghindari kesalahan pada nilai falsy yang legal.

Dengan menguasai fitur ini, Anda akan menulis fungsi yang lebih ekspresif dan tidak mudah error. Selamat mencoba!

Hal yang sering ditanyakan seputar Default Parameters JavaScript: Contoh Pemakaian dan Penjelasannya Lengkap