Perbedaan fungsi biasa dan fungsi arrow di JavaScript, kapan harus memakai sintaks yang mana

• Deklarasi fungsi JavaScript memiliki beberapa cara, seperti deklarasi dengan kata kunci function, ekspresi fungsi, dan fungsi arrow
• Deklarasi fungsi menerapkan hoisting, sehingga dapat direferensikan dari posisi mana pun di dalam kode
• Fungsi arrow unggul dalam sintaks yang ringkas, tetapi memiliki perbedaan penting seperti tidak memiliki binding this/arguments/super
• Fungsi konstruktor, generator, dan method tidak cocok menggunakan fungsi arrow
• Callback sederhana atau fungsi anonim lebih cocok menggunakan fungsi arrow

---

Function Declarations, Function Expressions, and Arrow Functions

• Di JavaScript, fungsi dapat didefinisikan dengan tiga cara: deklarasi fungsi (statement), ekspresi fungsi (expression), dan fungsi arrow (arrow function)
• Deklarasi fungsi mengikat nama secara langsung seperti function isVowel(chr) { ... }, dan dapat direferensikan dari mana pun di dalam kode (hoisting). Saat stack trace dan debugging, nama fungsi juga ditampilkan dengan jelas
• Ekspresi fungsi berbentuk penugasan fungsi anonim ke variabel, seperti const takeWhile = function(predicate, arr) { ... }
• Ekspresi fungsi juga bisa diberi nama secara internal, tetapi nama tersebut tidak terikat ke scope luar, dan umumnya dipakai dalam stack trace untuk pelacakan error

Hoisting and Naming

• Deklarasi fungsi akan di-hoist oleh mesin JavaScript, sehingga tetap berjalan meski dipanggil sebelum deklarasinya
• Ekspresi fungsi anonim hanya bisa dipanggil setelah penugasan ke variabel dilakukan
• Untuk debugging, memberi nama fungsi secara eksplisit bisa menguntungkan dalam stack trace

Arrow Functions

• Sintaks pendek dan ringkas: ditulis dalam bentuk (parameter) => { ... } tanpa kata kunci function
• Selalu berupa fungsi anonim (meski bisa dipakai seolah bernama dengan menugaskannya ke variabel)
• Hanya bisa digunakan sebagai expression, bukan statement
• Tidak memiliki binding this/arguments/super: berbeda dari deklarasi/ekspresi fungsi, fungsi arrow menangkap this dari scope luar
• Untuk satu ekspresi, kurung kurawal dan return bisa dihilangkan; jika parameternya satu, tanda kurung juga bisa dihilangkan
• Tidak bisa menjadi konstruktor: fungsi arrow tidak dapat dipanggil dengan kata kunci new dan tidak berfungsi sebagai fungsi konstruktor
• Tidak bisa menjadi generator: tidak bisa memakai yield, sehingga tidak dapat dibuat sebagai fungsi generator
• Contoh kode:

  const sum = (a, b) => a + b;  
  const square = x => x * x;  
  

Contoh praktis: this, konstruktor, dan generator

• Disediakan contoh perbedaan cara kerja this pada fungsi biasa dan fungsi arrow
  • Saat dipakai sebagai method di dalam objek, fungsi biasa membuat this menunjuk ke objek itu sendiri, sedangkan fungsi arrow menunjuk ke undefined atau this dari scope luar
• Jika fungsi konstruktor didefinisikan sebagai fungsi arrow, akan muncul TypeError
• Fungsi generator wajib menggunakan sintaks function*

Sintaks fungsi mana yang sebaiknya dipilih, dan kapan?

• Perlu generator (menggunakan yield) → gunakan function*
• Perlu memanfaatkan this → gunakan kata kunci function atau method class
• Perlu hoisting atau ingin keterbacaan tingkat atas yang lebih baik → gunakan deklarasi fungsi
• Jika tidak memenuhi kondisi di atas → fungsi arrow lebih menguntungkan karena lebih ringkas

Kesimpulan

• Fungsi di JavaScript sebaiknya dipilih berdasarkan tujuan penggunaan, kebutuhan this, serta apakah perlu menjadi konstruktor/generator
• Untuk callback sehari-hari/fungsi sederhana, fungsi arrow adalah pilihan terbaik
• Untuk method objek/konstruktor/generator, perlu menggunakan sintaks function
• Jika membutuhkan hoisting atau kebebasan dalam urutan deklarasi, deklarasi fungsi lebih menguntungkan

[ng0301]

Sama mendasarnya dengan ada atau tidaknya prototype juga ...
Cara mereferensikan fungsi orde tinggi yang dihasilkan juga ...

[bichi]

const a = (a: () => null): (() => () => null) =>() => a

[bichi]

() => ❤️