JavaScript - Smart Function Parameters

Halo sana, para ahli JavaScript masa depan! Hari ini, kita akan memulai perjalanan yang menarik ke dunia parameter fungsi cerdas. Sebagai guru komputer tetangga yang ramah, saya di sini untuk mengarahkan Anda melalui konsep-konsep ini dengan penjelasan yang jelas dan banyak contoh. Jadi, ambil keyboard Anda (tongkat sihir), dan mari kita masuk ke dalam!

Default Function Parameters

Apa Itu Parameter Default?

Bayangkan Anda memesan pizza. Anda mungkin akan katakan, "Saya ingin pizza daging bakar besar." Tetapi, apa jika Anda tidak menentukan ukurannya? Warna-warni jika pizzeria menganggap Anda ingin ukuran medium secara default? Itu tepatnya apa yang dilakukan parameter default dalam fungsi JavaScript!

Parameter default memungkinkan kita menentukan nilai default untuk parameter fungsi. Jika argumen tidak diberikan atau adalah undefined, nilai default akan diterapkan.

mari kita lihat contoh sederhana:

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

greet(); // Output: Halo, teman!
greet("Alice"); // Output: Halo, Alice!

Dalam contoh ini, jika kita tidak memberikan nama, fungsi menggunakan "teman" sebagai default. Itu seperti memiliki robot ramah yang mengatakan "Halo, teman!" ketika dia tidak tahu nam Anda!

Parameter Default Lebih Kompleks

Parameter default dapat lebih dari sekedar nilai sederhana. Mereka dapat berupa ekspresi atau bahkan panggilan fungsi. mari kita lihat contoh yang lebih maju:

function calculateArea(length, width = length) {
return length * width;
}

console.log(calculateArea(5)); // Output: 25
console.log(calculateArea(5, 3)); // Output: 15

Di sini, jika kita tidak memberikan lebar, ia menggunakan panjang sebagai default. Itu sempurna untuk menghitung luas persegi (di mana panjang sama dengan lebar) atau persegi panjang!

JavaScript Rest Parameter

Apa Itu Parameter Rest?

Parameter rest seperti kantong ajaib yang dapat menahan sejumlah item apa pun. Dalam JavaScript, itu memungkinkan fungsi untuk menerima jumlah tak tentu argumen sebagai array.

mari kita lihatnya dalam aksi:

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

console.log(sum(1, 2, 3)); // Output: 6
console.log(sum(1, 2, 3, 4, 5)); // Output: 15

Dalam contoh ini, ...numbers adalah kantong ajaib kami. Itu dapat menahan jumlah argumen apa pun, dan kita dapat bekerja dengannya sebagai array di dalam fungsi.

Mengkombinasikan Parameter Rest dengan Parameter Reguler

Kita juga dapat menggunakan parameter rest bersamaan dengan parameter reguler:

function introduce(greeting, ...names) {
names.forEach(name => console.log(`${greeting}, ${name}!`));
}

introduce("Halo", "Alice", "Bob", "Charlie");
// Output:
// Halo, Alice!
// Halo, Bob!
// Halo, Charlie!

Di sini, greeting adalah parameter reguler, dan ...names menangkap sisa argumen.

JavaScript Destructuring atau Parameter Nama

Apa Itu Destructuring?

Destructuring seperti membongkar valise. Daripada mengambil item satu per satu, Anda dapat mengambil beberapa item sekaligus dan memberikan mereka nama.

mari kita lihat contoh dengan destrukturisasi objek:

function printUserInfo({ name, age, city = "Tak Diketahui" }) {
console.log(`Nama: ${name}, Umur: ${age}, Kota: ${city}`);
}

const user = { name: "Alice", age: 30 };
printUserInfo(user); // Output: Nama: Alice, Umur: 30, Kota: Tak Diketahui

const anotherUser = { name: "Bob", age: 25, city: "New York" };
printUserInfo(anotherUser); // Output: Nama: Bob, Umur: 25, Kota: New York

Dalam contoh ini, kita destrukturisasi objek yang diberikan ke fungsi, mengambil name, age, dan city (dengan nilai default).

Destructuring Array

Kita juga dapat menggunakan destrukturisasi dengan array:

function getFirstAndLast([first, ...rest]) {
return { first, last: rest.pop() };
}

const result = getFirstAndLast(["Apel", "Pisang", "Ceri", "Delima"]);
console.log(result); // Output: { first: "Apel", last: "Delima" }

Fungsi ini mengambil array, mengambil elemen pertama, dan menggunakan parameter rest untuk mendapatkan elemen terakhir.

Mengkombinasikan Destructuring dengan Parameter Default dan Rest

Sekarang, mari kita gabungkan semua konsep yang kita pelajari ke dalam satu fungsi super cerdas:

function createTeam({ leader, members = [], maxSize = 5 } = {}) {
const team = [leader, ...members].slice(0, maxSize);
console.log(`Tim dibuat dengan ${team.length} anggota.`);
console.log(`Pemimpin: ${leader}`);
console.log(`Anggota lainnya: ${members.join(", ") || "None"}`);
}

createTeam({ leader: "Alice", members: ["Bob", "Charlie"] });
// Output:
// Tim dibuat dengan 3 anggota.
// Pemimpin: Alice
// Anggota lainnya: Bob, Charlie

createTeam({ leader: "David" });
// Output:
// Tim dibuat dengan 1 anggota.
// Pemimpin: David
// Anggota lainnya: None

createTeam();
// Output:
// Tim dibuat dengan 0 anggota.
// Pemimpin: undefined
// Anggota lainnya: None

Fungsi ini menggunakan destrukturisasi objek dengan nilai default, dan bahkan memiliki objek default kosong jika tidak ada argumen yang diberikan!

Ringkasan Metode

Berikut adalah tabel yang menggabungkan metode yang kita pelajari:

Metode	Deskripsi	Contoh
Parameter Default	Menyediakan nilai default untuk parameter fungsi	function greet(name = "teman")
Parameter Rest	Menangkap jumlah tak tentu argumen sebagai array	function sum(...numbers)
Destructuring Objek	Mengambil properti dari objek yang diberikan sebagai argumen	function printUserInfo({ name, age })
Destructuring Array	Mengambil elemen dari array yang diberikan sebagai argumen	function getFirstAndLast([first, ...rest])

Dan itu dia, teman-teman sekolah! Kita telah mengeksplorasi dunia yang menarik dari parameter fungsi cerdas di JavaScript. Ingat, teknik-teknik ini adalah seperti alat di dalam kotak peralatan programming Anda. Semakin banyak Anda mempraktikkannya, semakin natural mereka akan menjadi. Jadi, maju dan buat beberapa fungsi cerdas, fleksibel, dan kuat! Selamat coding! ??

Credits: Image by storyset