TypeScript - Parameter Sisa: Panduan Lengkap untuk Pemula

Hai, para pemrogram yang sedang mencari ilmu! Hari ini, kita akan melakukan perjalanan menarik ke dunia TypeScript, khususnya untuk mengeksplorasi Parameter Sisa. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk mengorbitasi konsep ini dengan penjelasan yang jelas dan banyak contoh. Jadi, ambil buku 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 kalau orang lain datang? Itu adalah tempat 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 jumlah tak tentu dari argumen sebagai array. Ini ditandai oleh tiga titik (...) diikuti dengan nama parameter.

Sintaks

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

mari kitauraikan ini:

• ... adalah yang membuatnya menjadi parameter sisa.
• restParameterName adalah nama Anda berikan untuk parameter ini ( Anda dapat memilih nama variabel yang valid manapun).
• type[] menentukan jenis elemen dalam array (misalnya number[], string[], dll).
• returnType adalah apa yang fungsi mengembalikan (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 jumlah argumen apa pun. Parameter sisa numbers mengumpulkan semua argumen ke dalam array, yang kemudian kita jumlahkan menggunakan metode reduce.

Contoh 2: Sapaan 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 jumlah orang apa pun. Parameter sisa names mengumpulkan semua nama ke dalam array, yang kemudian kita gabungkan menjadi string tunggal.

Contoh 3: Logging dengan Tanggal

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. Hal ini memungkinkan kita untuk melogkan pesan dengan tanggal dan data tambahan apa pun.

Parameter Sisa & Operator Penyebar: Dua Sisi dari Satu Koin

Sekarang, ini adalah tempat yang menarik! Parameter sisa memiliki saudara kembar yang disebut operator penyebar. 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 Penyebar: Digunakan untuk menyebar elemen array atau objek ke dalam elemen individual.

Marilah kita lihat keduanya dalam aksi:

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

// Operator Penyebar
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 penyebar untuk mengirimkan array friends sebagai argumen individual ke fungsi.

Metode Menggunakan Parameter Sisa

Berikut adalah tabel dari beberapa metode 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 konsol	console.log('Error:', errorCode, errorMessage)
Math.max()	Mengembalikan bilangan terbesar dari nol atau lebih banyak bilangan	Math.max(1, 3, 2)
Math.min()	Mengembalikan bilangan terkecil dari nol atau lebih banyak bilangan	Math.min(1, 3, 2)
String.concat()	Menggabungkan dua atau lebih string	'Hello'.concat(' ', 'world', '!')

Kesimpulan

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

Ingat, pemrograman adalah seperti memasak - parameter sisa adalah salah satu bahan dalam kotak alat Anda. Semakin banyak Anda berlatih dan mencoba eksperimen dengannya, semakin nyaman Anda akan menjadi. Jadi, teruskan, cobalah contoh ini, modifikasikan mereka, dan lihat apa yang Anda bisa buat!

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

Credits: Image by storyset