JavaScript - Parameter Sisa: Panduan Komprehensif untuk Pemula

Halo teman-teman masa depan para ahli JavaScript! ? Saya senang untuk membawa Anda dalam perjalanan melalui salah satu fitur yang paling berguna dalam JavaScript modern: Parameter Sisa. Sebagai seseorang yang telah mengajar pemrograman selama tahun-tahun, saya dapat menjamin Anda bahwa memahami konsep ini akan membuat hidup pemrograman Anda menjadi lebih mudah. Jadi, mari kita masuk ke dalam!

Apa Itu Parameter Sisa?

Bayangkan Anda mengatur pesta, dan Anda tidak yakin berapa banyak tamu yang akan datang. Anda menyiapkan beberapa kursi, tapi Anda juga memiliki sofa besar yang nyaman yang dapat menempatkan tamu ekstra. Di JavaScript, Parameter Sisa seperti sofa itu – dia dapat menangani jumlah ekstra argumen apa pun yang Anda lemparkan padanya!

Parameter Sisa memungkinkan fungsi untuk menerima jumlah tak tentu argumen sebagai array. Itu ditunjukkan oleh tiga titik (...) diikuti dengan nama parameter.

mari lihat contoh sederhana:

function gatherFriends(firstFriend, ...otherFriends) {
console.log("Teman terbaikku adalah: " + firstFriend);
console.log("Teman lainku adalah: " + otherFriends.join(", "));
}

gatherFriends("Alice", "Bob", "Charlie", "David");

Dalam contoh ini, firstFriend akan menjadi "Alice", dan otherFriends akan menjadi array yang berisi ["Bob", "Charlie", "David"].

Hasilnya akan menjadi:

Teman terbaikku adalah: Alice
Teman lainku adalah: Bob, Charlie, David

Mengapa Menggunakan Parameter Sisa?

1. Flexibilitas: Anda dapat menulis fungsi yang menerima jumlah argumen apa pun.
2. Bacaan: Kode Anda menjadi lebih intuitif dan mudah dipahami.
3. Metode Array: Anda dapat menggunakan metode array pada parameter yang dikumpulkan.

Parameter Sisa vs. Objeck Arguments

Sebelum Parameter Sisa, JavaScript memiliki objek arguments. Meskipun itu menjalankan tujuan yang sama, Parameter Sisa memiliki beberapa keunggulan. Mari kita bandingkan mereka:

Fitur	Parameter Sisa	Objeck Arguments
Tipe	Array benar	Objeck seperti array
Metode array	Didukung	Tidak didukung secara langsung
Parameter dinamis	Dapat digunakan dengan	Tidak dapat digunakan dengan
Klaritas	Lebih jelas	Kurang jelas

Berikut adalah contoh untuk mengilustrasikan perbedaan:

// Menggunakan objek arguments
function sumOld() {
let total = 0;
for(let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}

// Menggunakan parameter sisa
function sumNew(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}

console.log(sumOld(1, 2, 3, 4)); // 10
console.log(sumNew(1, 2, 3, 4)); // 10

Seperti yang Anda lihat, versi Parameter Sisa lebih bersih dan memungkinkan kita untuk menggunakan metode array seperti reduce.

Operator Penyebaran dan Parameter Sisa

Sekarang, mari bicara tentang Operator Penyebaran. Itu terlihat identik dengan Parameter Sisa (tiga titik ...), tapi itu menjalankan tujuan yang sebaliknya. Sementara Parameter Sisa mengumpulkan beberapa elemen ke dalam array, Operator Penyebaran memperluas array menjadi elemen individual.

Berikut adalah contoh yang menarik:

function makeSandwich(bread, ...fillings) {
console.log("Roti: " + bread);
console.log("Isian: " + fillings.join(", "));
}

const myFillings = ["keju", "tomat", "selada"];
makeSandwich("gandum", ...myFillings);

Hasilnya:

Roti: gandum
Isian: keju, tomat, selada

Dalam contoh ini, kita menggunakan Operator Penyebaran untuk mengirim array myFillings sebagai argumen individual ke fungsi makeSandwich.

Destructuring dengan Parameter Sisa

Destructuring seperti membongkar valise – Anda mengambil item yang Anda butuhkan dan meninggalkan sisanya. Ketika digabungkan dengan Parameter Sisa, itu menjadi alat yang kuat. Mari lihat bagaimana:

const [first, second, ...others] = [1, 2, 3, 4, 5];

console.log(first);  // 1
console.log(second); // 2
console.log(others); // [3, 4, 5]

Ini juga bekerja dengan objek:

const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};

console.log(a);    // 10
console.log(b);    // 20
console.log(rest); // {c: 30, d: 40}

Contoh Dunia Nyata: Parameter Fungsi

mari gabungkan semua itu dengan contoh yang lebih praktis. Bayangkan Anda menulis fungsi untuk menghitung total harga item di keranjang belanja:

function calculateTotal(discount, ...prices) {
const total = prices.reduce((sum, price) => sum + price, 0);
return total * (1 - discount);
}

const groceries = [5.99, 2.50, 3.75, 1.99];
console.log("Total setelah diskon 10%: $" + calculateTotal(0.1, ...groceries).toFixed(2));

Dalam contoh ini, kita menggunakan Parameter Sisa untuk mengumpulkan semua harga, dan kemudian menggunakan Operator Penyebaran untuk mengirim harga-harga itu ke fungsi. Hasilnya akan menjadi:

Total setelah diskon 10%: $12.81

Kesimpulan

Dan begitu, teman-teman! Kita telah menjelajahi negeri Parameter Sisa, membandingkan itu dengan sepupu tua nya objek Arguments, mengeksplorasi hubungan nya dengan Operator Penyebaran, dan bahkan mencampurkannya dengan sedikit destrukturisasi.

Ingat, Parameter Sisa seperti teman yang selalu siap membantu – itu ada untuk membuat hidup pemrograman Anda lebih mudah dan fungsi Anda lebih fleksibel. Jadi maju saja dan tenangkan pikiran Anda tahu Anda memiliki alat kuat ini di dalam alat JavaScript Anda!

Selamat pemrograman, dan may your functions always be flexible and your code ever readable! ??‍??‍?

Credits: Image by storyset