TypeScript - Fungsi Anonim: Panduan untuk Pemula

Hai teman, super bintang coding masa depan! Hari ini, kita akan masuk ke dunia menarik TypeScript dan eksplorasi konsep yang mungkin terdengar sedikit rahasia pertama kali: Fungsi Anonim. Jangan khawatir jika terdengar seperti nama sandi agen rahasia – pada akhir tutorial ini, Anda akan bisa menggunakannya seperti seorang pro!

Apa Itu Fungsi Anonim?

Sebelum kita masuk, mari kitaura apa yang dimaksud dengan "fungsi anonim." Dalam dunia pemrograman, kita sering memberikan nama pada fungsi kita, seperti "calculateTotal" atau "sendEmail." Tetapi kadang-kadang, kita membuat fungsi yang tidak memerlukan nama – mereka seperti pahlawan ber masker dalam dunia coding. Para keajaiban tanpa nama ini adalah apa yang kita sebut fungsi anonim.

Bayangkan Anda di sebuah pesta ber masker. Semua orang memakai topeng mewah, dan Anda tidak bisa melihat wajah mereka atau mengetahui namanya. Tetapi mereka masih bisa menari, berbicara, dan bersenang-senang. Itu seperti apa yang fungsi anonim lakukan dalam kode kita – mereka melakukan tugas tanpa memerlukan pengenalan formal!

Sekarang, mari kita lihat berbagai cara kita dapat membuat fungsi ini menjadi anonim dalam TypeScript.

Mendefinisikan Fungsi Anonim dengan Kata Kunci 'function'

Cara pertama untuk membuat fungsi anonim adalah dengan menggunakan kata kunci 'function' yang terkenal. Berikut adalah contohnya:

let greet = function(name: string) {
console.log("Hello, " + name + "!");
};

greet("Alice"); // Output: Hello, Alice!

Dalam contoh ini, kita membuat fungsi yang mengatakan hallo kepada seseorang. Mari kitaura:

1. Kita mulai dengan let greet =. Ini adalah kita membuat variabel 'greet'.
2. Setelah tanda sama dengan, kita memiliki function(name: string) { ... }. Ini adalah fungsi anonim kita.
3. Dalam kurung kurawal { }, kita memiliki tubuh fungsi – apa yang fungsi sebenarnya lakukan.
4. Kita kemudian bisa menggunakan fungsi ini dengan memanggil greet("Alice").

Itu seperti kita membuat robot ramah yang bisa mengatakan hallo kepada siapa saja, dan kita memberikan robot itu nama sandi 'greet'!

Mendefinisikan Fungsi Anonim Menggunakan Arrow Function

Sekarang, mari kita lihat cara yang lebih modern dan ringkas untuk menulis fungsi anonim – sintaksis fungsi panah. Itu seperti mobil sport dunia fungsi: ramping, cepat, dan terlihat keren!

let add = (a: number, b: number): number => {
return a + b;
};

console.log(add(5, 3)); // Output: 8

Berikut apa yang terjadi:

1. Kita membuat variabel 'add'.
2. Bagian (a: number, b: number) menentukan parameter yang fungsi kita ambil.
3. : number setelah kurung kurawal menentukan bahwa fungsi kita akan mengembalikan sebuah number.
4. => adalah yang membuat ini menjadi fungsi panah (itu mirip seperti panah, kan?).
5. Dalam { }, kita memiliki tubuh fungsi.

Kita bisa membuat ini lebih pendek untuk fungsi sederhana:

let multiply = (a: number, b: number): number => a * b;

console.log(multiply(4, 6)); // Output: 24

Dalam kasus ini, kita telah menghapus { } dan kata kunci return. Itu seperti fungsi kita mengatakan, "Saya sangat sederhana, saya tidak memerlukan semua simbol ekstra!"

Menggunakan Fungsi Anonim sebagai Fungsi Callback

Sekarang, mari kita lihat di mana fungsi anonim benar-benar berlimpah – sebagai fungsi callback. Fungsi callback adalah fungsi yang kita kirim ke fungsi lain sebagai argumen. Itu seperti mengatakan ke seorang teman, "Hey, saat Anda selesai dengan tugas Anda, lakukan hal ini untuk saya."

Mari kita lihat contoh menggunakan fungsi setTimeout:

setTimeout(() => {
console.log("Pesan ini akan muncul setelah 2 detik!");
}, 2000);

Dalam kode ini:

1. setTimeout adalah fungsi yang menunggu untuk waktu yang ditentukan sebelum melakukan sesuatu.
2. Argumen pertama adalah fungsi anonim kita, ditulis sebagai fungsi panah.
3. Argumen kedua (2000) adalah jumlah milidetik yang ditunggu (2 detik).

Itu seperti menyetel timer dan mengatakan kepadanya, "Ketika Anda melesat, tampilkan pesan ini!"

Berikut adalah contoh lain menggunakan metode array:

let numbers = [1, 2, 3, 4, 5];

let doubledNumbers = numbers.map((num) => num * 2);

console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

Dalam kasus ini:

1. Kita memiliki array bilangan.
2. Kita menggunakan fungsi map, yang menerapkan fungsi ke setiap elemen array.
3. Fungsi anonim kita (num) => num * 2 menggandakan setiap bilangan.
4. Hasilnya adalah array baru dengan semua bilangan digandakan.

Itu seperti kita membuat mesin yang mengambil setiap bilangan, menggandakannya, dan memasukkannya ke dalam kotak baru!

Kesimpulan

Dan begitupun, teman-teman! Kita telah membongkar misteri fungsi anonim dalam TypeScript. Ingat, fungsi ini seperti para kecil yang membantu dalam kode Anda – mereka melakukan tugas mereka tanpa memerlukan tag nama formal.

Berikut adalah ringkasan metode yang kita pelajari, disajikan dalam tabel praktis:

Metode	Sintaks	Contoh
Kata Kunci 'Function'	let funcName = function(params) { ... }	let greet = function(name: string) { console.log("Hello, " + name); }
Fungsi Panah (multi-line)	let funcName = (params) => { ... }	let add = (a: number, b: number) => { return a + b; }
Fungsi Panah (single-line)	let funcName = (params) => expression	let multiply = (a: number, b: number) => a * b;
Sebagai Callback	someFunction(() => { ... })	setTimeout(() => { console.log("Waktu habis!"); }, 1000);

Latihan menggunakan metode ini, dan segera Anda akan bisa membuat fungsi anonim seperti seorang ninja coding! Ingat, dalam pemrograman, seperti dalam kehidupan, kadang-kadang kekuatan yang paling kuat adalah yang bekerja di belakang layar. Selamat coding!

Credits: Image by storyset