Fungsi panah, dasar-dasarnya

Ada sintaks lain yang sangat sederhana dan ringkas untuk membuat fungsi, yang seringkali lebih baik daripada Ekspresi Fungsi.

Ini disebut “fungsi panah”, karena tampilannya seperti ini:

 biarkan func = (arg1, arg2, ..., argN) => ekspresi;

Ini menciptakan fungsi func yang menerima argumen arg1..argN , lalu mengevaluasi expression di sisi kanan dengan penggunaannya dan mengembalikan hasilnya.

Dengan kata lain, ini adalah versi yang lebih pendek dari:

 biarkan func = fungsi(arg1, arg2, ..., argN) {
  ekspresi kembali;
};

Mari kita lihat contoh konkritnya:

 misalkan jumlah = (a, b) => a + b;

/* Fungsi panah ini merupakan bentuk pendek dari:

misalkan jumlah = fungsi(a, b) {
  kembalikan a+b;
};
*/

peringatan(jumlah(1, 2) ); // 3

Seperti yang Anda lihat, (a, b) => a + b berarti fungsi yang menerima dua argumen bernama a dan b . Setelah eksekusi, ia mengevaluasi ekspresi a + b dan mengembalikan hasilnya.

• Jika kita hanya mempunyai satu argumen, maka tanda kurung di sekitar parameter dapat dihilangkan, sehingga membuatnya lebih pendek.

  Misalnya:

   misalkan ganda = n => n * 2;
  // kurang lebih sama dengan: let double = function(n) { return n * 2 }
  
  peringatan( ganda(3) ); // 6

• Jika tidak ada argumen, tanda kurung kosong, namun harus ada:

   misalkan sayHi = () => alert("Halo!");
  
  sayHai();

Fungsi panah dapat digunakan dengan cara yang sama seperti Ekspresi Fungsi.

Misalnya, untuk membuat fungsi secara dinamis:

 let age = prompt("Berapa umur anda?", 18);

biarkan selamat datang = (umur < 18) ?
  () => peringatan('Halo!') :
  () => waspada("Salam!");

selamat datang();

Fungsi panah mungkin tampak asing dan tidak terlalu mudah dibaca pada awalnya, namun hal itu dengan cepat berubah seiring mata terbiasa dengan strukturnya.

Mereka sangat berguna untuk tindakan satu baris sederhana, ketika kita terlalu malas untuk menulis banyak kata.

Fungsi panah multiline

Fungsi panah yang kita lihat sejauh ini sangat sederhana. Mereka mengambil argumen dari kiri => , mengevaluasi dan mengembalikan ekspresi sisi kanan bersamanya.

Terkadang kita memerlukan fungsi yang lebih kompleks, dengan banyak ekspresi dan pernyataan. Dalam hal ini, kita dapat mengapitnya dalam kurung kurawal. Perbedaan utamanya adalah kurung kurawal memerlukan return di dalamnya untuk mengembalikan nilai (seperti halnya fungsi biasa).

Seperti ini:

 misalkan sum = (a, b) => { // kurung kurawal membuka fungsi multiline
  misalkan hasil = a + b;
  hasil pengembalian; // jika kita menggunakan kurung kurawal, maka kita memerlukan "return" yang eksplisit
};

peringatan(jumlah(1, 2) ); // 3

Lebih banyak lagi yang akan datang

Di sini kami memuji fungsi panah karena singkatnya. Tapi bukan itu saja!

Fungsi panah memiliki fitur menarik lainnya.

Untuk mempelajarinya secara mendalam, pertama-tama kita perlu mengenal beberapa aspek lain dari JavaScript, jadi kita akan kembali ke fungsi panah nanti di bab Fungsi panah yang ditinjau kembali.

Untuk saat ini, kita sudah dapat menggunakan fungsi panah untuk tindakan satu baris dan callback.

Ringkasan

Fungsi panah berguna untuk tindakan sederhana, terutama untuk satu kalimat. Mereka datang dalam dua rasa:

1. Tanpa kurung kurawal: (...args) => expression – sisi kanan adalah ekspresi: fungsi mengevaluasinya dan mengembalikan hasilnya. Tanda kurung dapat dihilangkan, jika hanya ada satu argumen, misalnya n => n*2 .

2. Dengan kurung kurawal: (...args) => { body } – tanda kurung memungkinkan kita menulis beberapa pernyataan di dalam fungsi, namun kita memerlukan return eksplisit untuk mengembalikan sesuatu.

Tugas

Tulis ulang dengan fungsi panah

Ganti Ekspresi Fungsi dengan fungsi panah pada kode di bawah ini:

 fungsi bertanya(pertanyaan, ya, tidak) {
  if (konfirmasi(pertanyaan)) ya();
  kalau tidak, tidak();
}

bertanya(
  "Apakah kamu setuju?",
  function() { alert("Anda setuju."); },
  function() { alert("Anda membatalkan eksekusi."); }
);

larutan

 fungsi bertanya(pertanyaan, ya, tidak) {
  if (konfirmasi(pertanyaan)) ya();
  kalau tidak, tidak();
}

bertanya(
  "Apakah kamu setuju?",
  () => alert("Anda setuju."),
  () => alert("Anda membatalkan eksekusi.")
);

Terlihat pendek dan bersih, bukan?