🤴🏾 👨‍💼 🌘 5 tips untuk menulis fungsi panah berkualitas 👚 👨‍👨‍👧‍👧 🚦

Fungsi tanda panah JavaScript cukup populer. Dan mereka layak mendapatkannya, berbeda dalam sintaksis singkat, pengikatan leksikal thisdan fakta bahwa mereka sangat mudah digunakan sebagai panggilan balik. Materi, terjemahan yang kami terbitkan hari ini, termasuk 5 rekomendasi tentang penggunaan fungsi panah. Orang yang memanfaatkan rekomendasi ini memiliki peluang untuk lebih mengungkapkan potensi fungsi-fungsi tersebut.

1. Gunakan tampilan nama fungsi panah

Fungsi tanda panah JavaScript bersifat anonim: propertinya namemengandung string kosong - ''.

( number => number + 1 ).name; // => ''

Fungsi anonim ditandai sebagai anonymousselama debugging atau saat menganalisis tumpukan panggilan. Sayangnya, kata anonymousitu tidak mengandung petunjuk tentang kode spesifik yang terkait dengannya.

Berikut adalah salah satu poin dalam kode debugging di mana fungsi anonim dipanggil.

Kode debug berisi fungsi anonim

Tumpukan panggilan di sisi kanan gambar berisi referensi ke 2 fungsi yang ditandai sebagaianonymous. Dari informasi yang terkandung dalam tumpukan panggilan, seseorang tidak dapat mempelajari sesuatu yang berguna tentang kode tersebut.

Untungnya, JavaScript memiliki mekanisme untuk memperoleh nama fungsi (fitur ES2015), yang mampu, dalam kondisi tertentu, mendeteksi nama fungsi. Gagasan keluaran nama adalah bahwa JavaScript dapat mengetahui nama fungsi panah dari posisi sintaksisnya, yaitu berdasarkan nama variabel yang menyimpan tautan ke objek fungsi.

Mari kita lihat mekanisme untuk menurunkan nama fungsi dalam aksi:

const increaseNumber = number => number + 1;

increaseNumber.name; // => 'increaseNumber'

Karena referensi ke fungsi panah disimpan dalam variabel increaseNumber, JavaScript memutuskan bahwa nama tersebut 'increaseNumber'cocok untuk fungsi tersebut. Akibatnya, fungsi panah juga mendapat nama seperti itu.

Disarankan untuk menggunakan mekanisme derivasi nama fungsi untuk penamaan fungsi panah.

Sekarang mari kita lihat proses debugging, di mana mekanisme untuk menurunkan nama fungsi digunakan.

Kode debug berisi fungsi panah yang diberi nama

Karena fungsi panah sekarang memiliki nama, tumpukan panggilan memberikan informasi yang lebih berguna tentang kode yang sedang dijalankan:

Nama fungsi handleButtonClickmenunjukkan panggilan ke pengendali acara click.
Nama increaseCountermenunjukkan panggilan ke fungsi yang menambah penghitung.

2. Kapanpun memungkinkan, berusahalah untuk menulis fungsi sebaris

Fungsi "inline" adalah fungsi yang terdiri dari satu ekspresi. Dalam fungsi panah, saya menyukai kenyataan bahwa mereka sangat nyaman digunakan untuk membuat fungsi inline pendek.

Misalnya, ini adalah bentuk "penuh" dari fungsi panah:

const array = [1, 2, 3];

array.map((number) => { 
  return number * 2;
});

Fitur ini dapat dengan mudah dibuat lebih kompak. Yaitu, karena fungsi hanya berisi satu ekspresi, Anda dapat menghapus kurung kurawal dan return:

const array = [1, 2, 3];

array.map(number => number * 2);

Disarankan bahwa jika suatu fungsi hanya berisi satu ekspresi, buat sebaris.

3. Gunakan dengan hati-hati fungsi panah dan operator pembanding.

Operator perbandingan >, <, <=dan >=sangat mirip dengan panah =>dimana menyatakan panah fungsi (panah tersebut juga disebut "panah berani").

Ketika operator pembanding digunakan dalam fungsi sebaris, kode yang dihasilkan mungkin tidak terlalu jelas.

Nyatakan fungsi panah yang menggunakan operator <=:

const negativeToZero = number => number <= 0 ? 0 : number;

Kehadiran dalam satu baris karakter =>dan <=mengacaukan pembaca kode.

Untuk membedakan panah secara jelas dari operator pembanding, beberapa pendekatan dapat digunakan.

Pertama, Anda dapat melampirkan ekspresi dalam tanda kurung:

const negativeToZero = number => (number <= 0 ? 0 : number);

Kedua, Anda dapat dengan sengaja mendeklarasikan fungsi panah menggunakan konstruksi yang lebih panjang:

const negativeToZero = number => {
  return number <= 0 ? 0 : number;
};

Transformasi ini menghilangkan ketidakpastian yang disebabkan oleh penggunaan simbol panah dan operator perbandingan dalam satu baris.

Disarankan bahwa jika fungsi satu-baris Panah berisi pernyataan >, <, <=dan >=, untuk menyimpulkan yang sesuai ekspresi dalam kurung atau menggunakan multi-bentuk iklan panah fungsi.

4. Gunakan tanda kurung atau struktur multi-garis saat membuat objek sederhana dalam fungsi panah

Menggunakan objek literal di dalam fungsi panah tertanam akan menghasilkan kesalahan sintaksis:

const array = [1, 2, 3];

//  SyntaxError!
array.map(number => { 'number': number });

JavaScript menganggap kurung kurawal sebagai blok kode, bukan objek literal.

Jika Anda menyertakan objek literal dalam tanda kurung, masalah ini akan terpecahkan:

const array = [1, 2, 3];

// !
array.map(number => ({ 'number': number }));

Jika suatu objek literal memiliki banyak properti, maka di sini Anda bahkan dapat menggunakan umpan baris. Fungsi panah masih tertanam:

const array = [1, 2, 3];

// !
array.map(number => ({
  'number': number
  'propA': 'value A',
  'propB': 'value B'
}));

Literal objek, ketika digunakan dalam fungsi inline, direkomendasikan untuk dilampirkan dalam tanda kurung.

5. Berhati-hatilah untuk bersarang terlalu dalam.

Fungsi panah berbeda dalam sintaks laconic. Ini baik. Tetapi karena ini, banyak fungsi panah yang tertanam satu sama lain dapat membentuk struktur yang sulit dibaca.

Pertimbangkan skenario berikut. Ketika mereka mengklik tombol, permintaan ke server dieksekusi. Ketika respons server yang berisi set elemen tertentu diterima, nama-nama elemen ini ditampilkan di konsol:

myButton.addEventListener('click', () => {
  fetch('/items.json')
    .then(response => response.json())
    .then(json => {
      json.forEach(item => {
        console.log(item.name);
      });
    });
});

Di sini kita melihat tiga tingkat fungsi panah bersarang. Untuk mempelajari apa yang terjadi dalam kode ini, Anda perlu meluangkan waktu.

Beberapa pendekatan dapat digunakan untuk meningkatkan keterbacaan fungsi bersarang.

Pendekatan pertama adalah menulis referensi fungsi ke variabel. Nama variabel harus secara singkat menjelaskan esensi fungsi (lihat rekomendasi # 1 pada derivasi nama fungsi).

const readItemsJson = json => {
  json.forEach(item => console.log(item.name));
};

const handleButtonClick = () => {
  fetch('/items.json')
    .then(response => response.json());
    .then(readItemsJson);
};

myButton.addEventListener('click', handleButtonClick);

Selama refactoring, kami mengekstrak fungsi panah bersarang dan menulisnya ke dalam readItemsJsondan variabel handleButtonClick. Level nesting kode menurun dari 3 menjadi 2. Sekarang kode menjadi lebih dimengerti.

Pilihan lain untuk refactoring kode ini adalah menerjemahkan seluruh fungsi ke dalam format async/await. Ini adalah cara yang bagus untuk menyelesaikan masalah fungsi bersarang:

const handleButtonClick = async () => {
  const response = await fetch('/items.json');
  const json = await response.json();
  json.forEach(item => console.log(item.name));
};

myButton.addEventListener('click', handleButtonClick);

Dianjurkan untuk menghindari level yang terlalu dalam dari fungsi panah, mengekstraksinya menjadi variabel sebagai fungsi terpisah, atau, jika mungkin, menggunakan sintaksis async/await.

Ringkasan

Fungsi tanda panah JavaScript adalah anonim. Agar debugging kode lebih produktif, disarankan untuk menggunakan variabel yang menyimpan referensi fungsi. Ini memungkinkan JavaScript untuk menampilkan nama fungsi.

Fungsi panah tertanam berguna ketika tubuh fungsi hanya berisi satu ekspresi.

Operator >, <, <=dan >=seperti anak panah =>yang digunakan ketika mendeklarasikan switch fungsi. Ketika operator ini digunakan dalam tubuh fungsi panah yang dapat diembed, Anda harus mempertimbangkan konversi kode.

Sintaks literal objek, seperti { prop: 'value' }, seperti blok kode {}. Akibatnya, ketika objek literal ditempatkan di dalam fungsi panah yang disematkan, itu harus dilampirkan dalam tanda kurung:() => ({ prop: 'value' }).

Tingkat yang terlalu tinggi dari fungsi sarang membingungkan orang yang membaca kode. Dianjurkan untuk mengurangi tingkat fungsi sarang dengan mengekstraksi dan menuliskannya ke dalam variabel. Pendekatan lain untuk mengurangi tingkat kode bersarang adalah dengan menggunakan sebuah konstruk async/await.

Pembaca yang budiman! Apakah Anda tahu ada trik menarik untuk menggunakan fungsi panah?