Kapan dan mengapa layak menggunakan fungsi panah ES6, dan kapan tidak

Halo, Habr! Saya hadir untuk Anda terjemahan artikel " Kapan (dan mengapa) Anda harus menggunakan fungsi panah ES6 - dan ketika Anda tidak seharusnya " oleh Cynthia Lee.

Fungsi panah adalah fitur ES6 yang paling populer. Ini adalah cara penulisan fungsi baru dan ringkas.

function timesTwo(params) { return params * 2 } timesTwo(4); // 8 

Sekarang sama dengan fungsi panah.

 var timesTwo = params => params * 2 timesTwo(4); // 8 

Jauh lebih pendek! Kita bisa menghilangkan kurung kurawal dan pernyataan kembali (jika tidak ada blok, tetapi lebih lanjut tentang itu nanti).

Mari kita cari tahu bagaimana metode baru berbeda dari yang biasa.

Sintaks

Hal pertama yang akan Anda perhatikan dengan cepat adalah berbagai variasi sintaksis. Mari kita lihat yang utama:

1. Tanpa parameter

Jika fungsi tidak memiliki parameter, Anda cukup menulis kurung kosong sebelum =>

 () => 42 

Bahkan, Anda bisa melakukannya tanpa tanda kurung sama sekali!

 _ => 42 

1. Satu parameter

Kurung juga opsional

 x => 42 || (x) => 42 

3. Beberapa parameter

Di sini kita membutuhkan tanda kurung

 (x, y) => 42 

4. Instruksi

Biasanya, ekspresi fungsional mengembalikan nilai, sedangkan instruksi bertanggung jawab atas tindakan.

Harus diingat bahwa dalam kasus fungsi panah, jika kita memiliki beberapa tindakan / instruksi, kita harus menggunakan kurung kurawal dan pernyataan kembali.
Berikut adalah contoh fungsi panah yang digunakan dengan pernyataan if:

 var feedTheCat = (cat) => { if (cat === 'hungry') { return 'Feed the cat'; } else { return 'Do not feed the cat'; } } 

5. Tubuh blok jamur

Bahkan jika fungsi Anda hanya mengembalikan nilai, tetapi tubuhnya dalam kurung keriting, pernyataan kembali diperlukan.

 var addValues = (x, y) => { return x + y } 

6. Obyek literal

Jika fungsi mengembalikan objek literal, itu harus ditutup dalam tanda kurung.

 x =>({ y: x }) 

Fungsi Panah - Anonim

Perhatikan bahwa fungsi panah bersifat anonim, mereka tidak memiliki nama.

Ini menciptakan beberapa kesulitan:

1. Sulit direndahkan
   
   Ketika ini terjadi, Anda tidak akan dapat melacak nama fungsi dan nomor baris tempat kesalahan terjadi.
   
2. Tidak dapat ditugaskan ke variabel
   
   Jika Anda memerlukan tautan di dalam fungsi itu sendiri untuk sesuatu (rekursi, pengendali acara yang perlu dibatalkan), tidak ada yang akan berfungsi
   

Keuntungan utama: bukan ini

Dalam fungsi reguler, ini menunjukkan konteks di mana fungsi ini dipanggil. fungsi panah ini sama dengan lingkungan di mana fungsi panah dideklarasikan.

Misalnya, lihat fungsi setTimeout di bawah ini:

 // ES5 var obj = { id: 42, counter: function counter() { setTimeout(function() { console.log(this.id); }.bind(this), 1000); } }; 

Pada contoh di atas, Anda perlu menggunakan .bind (ini) untuk meneruskan konteks ke fungsi. Kalau tidak, ini tidak akan ditentukan.

 // ES6 var obj = { id: 42, counter: function counter() { setTimeout(() => { console.log(this.id); }, 1000); } }; 

Dalam contoh ini, Anda tidak perlu mengikat ini. Fungsi panah akan mengambil ini dari penutupan.

Kapan harus menggunakan fungsi panah

Sekarang, saya pikir, menjadi jelas bahwa fungsi panah tidak menggantikan yang biasa.

Berikut adalah beberapa contoh saat Anda tidak ingin menggunakannya.

1. Metode objek

Saat Anda memanggil cat.jumps, jumlah nyawa tidak berkurang. Ini karena ini tidak terikat pada apa pun, dan mewarisi nilai dari penutupan.

 var cat = { lives: 9, jumps: () => { this.lives--; } } 

2. Fungsi panggilan balik dengan konteks dinamis

Jika Anda membutuhkan konteks dinamis, fungsi panah adalah opsi yang buruk.

 var button = document.getElementById('press'); button.addEventListener('click', () => { this.classList.toggle('on'); }); 

Jika kita mengklik tombol, kita mendapatkan TypeError. Ini karena ini tidak terikat tombol.

3. Ketika keterbacaan kode semakin buruk

Dengan fungsi yang biasa, selalu jelas apa yang ingin Anda katakan. Dengan panah, diberi opsi sintaks yang bervariasi, beberapa hal menjadi kurang jelas.

Kapan tepatnya layak menggunakan fungsi panah

Fungsi panah sangat bagus untuk kasus di mana Anda tidak memerlukan konteks fungsi Anda sendiri.

Saya juga sangat suka menggunakan fungsi panah di semua jenis map dan reduce - kode membaca dengan cara ini lebih baik.