JavaScript - Parameter休息: Panduan Lengkap untuk Pemula

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

Apa Itu Parameter Rest?

Bayangkan Anda mengatur pesta, dan Anda tidak yakin berapa banyak tamu yang akan datang. Anda menyiapkan beberapa kursi, tapi Anda juga memiliki sofa yang besar dan nyaman yang dapat duduk oleh semua tamu ekstra. Dalam JavaScript, Parameter Rest seperti sofa itu - ia dapat menangani jumlah ekstra argumen apa pun yang Anda lemparkan padanya!

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

mari lihat contoh sederhana:

function gatherFriends(firstFriend, ...otherFriends) {
console.log("Teman terbaik saya adalah: " + firstFriend);
console.log("Teman lain saya 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"].

Outputnya akan menjadi:

Teman terbaik saya adalah: Alice
Teman lain saya adalah: Bob, Charlie, David

Mengapa Menggunakan Parameter Rest?

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 Rest vs. Object Arguments

Sebelum Parameter Rest, JavaScript memiliki object arguments. Meskipun itu memiliki tujuan yang sama, Parameter Rest memiliki beberapa keunggulan. mari kita bandingkan mereka:

Fitur	Parameter Rest	Object Arguments
Tipe	Array benar	Object 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 object arguments
function sumOld() {
let total = 0;
for(let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}

// Menggunakan parameter rest
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 Rest lebih bersih dan memungkinkan kita untuk menggunakan metode array seperti reduce.

Operator Spread dan Parameter Rest

Sekarang, mari bicarakan tentang Operator Spread. Itu tampak identik dengan Parameter Rest (tiga titik ...), tapi itu berbeda tujuannya. Sementara Parameter Rest mengumpulkan beberapa elemen menjadi array, Operator Spread 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("wheat", ...myFillings);

Output:

Roti: wheat
Isian: keju, tomat, selada

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

Destructuring dengan Parameter Rest

Destructuring seperti membongkar valise - Anda mengambil item yang Anda butuhkan dan meninggalkan yang lain. Ketika digabungkan dengan Parameter Rest, 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 semuanya dengan contoh yang lebih praktis. Bayangkan Anda menulis fungsi untuk menghitung harga total 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 Rest untuk mengumpulkan semua harga, dan kemudian menggunakan Operator Spread untuk mengirim harga tersebut ke fungsi. Outputnya akan menjadi:

Total setelah diskon 10%: $12.81

Kesimpulan

Dan begitulah, teman-teman! Kita telah melakukan perjalanan melalui negeri Parameter Rest, membandingkan itu dengan kakek tua nya object Arguments, mengeksplorasi hubungannya dengan Operator Spread, dan bahkan mencampurnya dengan sedikit dekstrukturisasi.

Ingat, Parameter Rest 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 mengetahui bahwa Anda memiliki alat kuat ini di dalam peralatan JavaScript Anda!

Happy coding, dan may your functions always be flexible and your code ever readable! ??‍??‍?

Credits: Image by storyset