TypeScript - Parameter Sisa: Panduan Komprehensif untuk Pemula

Hai, para pemrogram yang sedang berbisik! Hari ini, kita akan memulai perjalanan yang menarik ke dunia TypeScript, khususnya meng eksplorasi Parameter Sisa. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk mengarahkan Anda melalui konsep ini dengan penjelasan yang jelas dan banyak contoh. Jadi, ambil catatan virtual Anda, dan mari kita masuk ke dalamnya!

Apa Itu Parameter Sisa?

Sebelum kita melompat ke hal-hal kecil, mari kita mulai dengan analogi yang menyenangkan. Bayangkan Anda mengatur pesta, dan Anda mengundang beberapa teman. Tetapi, apa jika orang lain datang? Itu di mana parameter sisa berguna dalam pemrograman - itu seperti memiliki daftar tamu yang dapat diperluas untuk parameter fungsi Anda!

Dalam TypeScript (dan JavaScript), parameter sisa memungkinkan fungsi untuk menerima sejumlah tak tentu dari argumen sebagai array. Ini ditandai oleh tiga titik (...) diikuti oleh nama parameter.

Sintaks

function functionName(...restParameterName: type[]): returnType {
// badan fungsi
}

Sekarang, mari kitauraikan ini:

• ... adalah yang membuatnya menjadi parameter sisa.
• restParameterName adalah nama yang Anda berikan ke parameter ini ( Anda dapat memilih semua nama variabel yang valid).
• type[] menentukan jenis elemen dalam array (misalnya, number[], string[], dll).
• returnType adalah apa yang fungsi kembalikan (jika ada).

Contoh Parameter Sisa dalam Aksi

Marilah kita lihat beberapa contoh praktis untuk melihat bagaimana parameter sisa bekerja dalam konteks dunia nyata.

Contoh 1: Penjumlahan Angka

function sumNumbers(...numbers: number[]): number {
return numbers.reduce((total, num) => total + num, 0);
}

console.log(sumNumbers(1, 2, 3));        // Output: 6
console.log(sumNumbers(10, 20, 30, 40)); // Output: 100

Dalam contoh ini, sumNumbers dapat menerima sejumlah argumen. Parameter sisa numbers mengumpulkan semua argumen ke dalam array, yang kemudian kita jumlahkan menggunakan metode reduce.

Contoh 2: Sapaan untuk Beberapa Orang

function greetPeople(...names: string[]): string {
return `Hello, ${names.join(', ')}!`;
}

console.log(greetPeople('Alice'));               // Output: Hello, Alice!
console.log(greetPeople('Bob', 'Charlie', 'Dave')); // Output: Hello, Bob, Charlie, Dave!

Di sini, greetPeople dapat menyapa sejumlah orang. Parameter sisa names mengumpulkan semua nama ke dalam array, yang kemudian kita gabungkan menjadi string tunggal.

Contoh 3: Logging dengan Tanggal dan Waktu

function logWithTimestamp(message: string, ...data: any[]): void {
const timestamp = new Date().toISOString();
console.log(timestamp, message, ...data);
}

logWithTimestamp('User logged in', 'user123', { status: 'active' });
// Output: 2023-06-10T12:34:56.789Z User logged in user123 { status: 'active' }

Dalam contoh ini, kita memiliki parameter tetap message diikuti oleh parameter sisa data. Ini memungkinkan kita untuk melogkan pesan dengan tanggal dan waktu serta data tambahan.

Parameter Sisa & Operator Penyebaran: Dua Sisi dari Satu Koin

Sekarang, mari kita lihat bagaimana ini menjadi menarik! Parameter sisa memiliki saudara kembar yang disebut operator penyebaran. Mereka terlihat identik (keduanya menggunakan ...), tetapi mereka digunakan dalam konteks yang berbeda.

• Parameter Sisa: Digunakan dalam deklarasi fungsi untuk mengumpulkan beberapa argumen ke dalam array.
• Operator Penyebaran: Digunakan untuk menyebar elemen array atau objek ke dalam elemen individual.

Marilah kita lihat mereka kedua dalam aksi:

// Parameter Sisa
function introduce(greeting: string, ...names: string[]): string {
return `${greeting}, ${names.join(' and ')}!`;
}

// Operator Penyebaran
const friends = ['Alice', 'Bob', 'Charlie'];
console.log(introduce('Hello', ...friends));
// Output: Hello, Alice and Bob and Charlie!

Dalam contoh ini, kita menggunakan parameter sisa dalam fungsi introduce untuk mengumpulkan nama-nama, dan kemudian menggunakan operator penyebaran untuk mengirim array friends sebagai argumen individual ke fungsi.

Metode Menggunakan Parameter Sisa

Berikut adalah tabel dari beberapa metode umum yang secara efektif menggunakan konsep parameter sisa:

Metode	Deskripsi	Contoh
Array.push()	Menambahkan satu atau lebih elemen ke akhir array	numbers.push(4, 5, 6)
Array.unshift()	Menambahkan satu atau lebih elemen ke awal array	names.unshift('Alice', 'Bob')
console.log()	Melogkan beberapa item ke console	console.log('Error:', errorCode, errorMessage)
Math.max()	Mengembalikan nilai terbesar dari nol atau lebih banyak angka	Math.max(1, 3, 2)
Math.min()	Mengembalikan nilai terkecil dari nol atau lebih banyak angka	Math.min(1, 3, 2)
String.concat()	Menggabungkan dua atau lebih string	'Hello'.concat(' ', 'world', '!')

Kesimpulan

Dan di sana Anda punya nya, teman-teman! Kita telah melakukan perjalanan melalui tanah parameter sisa dalam TypeScript. Dari memahami konsep dasarnya hingga melihatnya dalam aksi dengan berbagai contoh, Anda sekarang dilengkapi untuk menggunakan fitur ini dalam kode Anda sendiri.

Ingat, pemrograman adalah seperti memasak - parameter sisa adalah salah satu bahan dalam alat Anda. Semakin Anda berlatih dan mencoba-coba dengannya, semakin Anda akan merasa nyaman. Jadi, cobalah contoh ini, ubah mereka, dan lihat apa yang Anda dapat buat!

Selamat coding, dan sampaijumpa lagi, semoga fungsi Anda fleksibel dan parameter Anda banyak!

Credits: Image by storyset