JavaScript: Apa itu Arrow Function?


1. Arrow function

Sejak dirilisnya EcmaScript(ES) 6, terdapat beberapa tambahan fitur yang ditambahkan salah satunya adalah arrow function. Secara garis besar arrow function adalah fungsi yang dideklarasikan dengan tanda arrow(panah) "=>" tanpa menggunakan kata kunci "function" dalam syntax seperti cara penulisan fungsi sebelum ES6 rilis(ES 5 kebawah) yang kini juga disebut traditional function. Selain itu kita juga bisa menuliskannya tanpa fungsi "return" , kurung "()" dan kurung kurawal "{}" dengan aturan tertentu. Agar lebih jelas mari kita bandingkan keduanya.


2. Perbedaan arrow function dan traditional function 


a. Cara Penulisan


  • fungsi tanpa parameter
// Traditional Function
function (){
  return "Good Morning!";
}

//Arrow function
() => {
    "Good Morning!";
}
  • fungsi dengan parameter
// Traditional Function
function (name){
  return "Good Morning!" + name;
}

// Arrow function
(name) => {
  return "Good Morning!" + name;
}

// Arrow function (tanpa kurung kurawal)
(name) => "Good Morning!" + name;


// Arrow function (tanpa tanda kurung)
name => "Good Morning! + name";
Seperti yang sempat diulas tentang arrow function, fungsi dapat melakukan penulisan tanpa tanda kurung "()" apabila fungsi memiliki hanya satu parameter, ini juga berlaku dengan aturan tanpa tanda kurung kurawal "{}" dan fungsi "return" yaitu dapat dilakukan apabila syntax ekspresi dalam fungsi hanya satu baris.


  • fungsi dengan beberapa parameter
// Traditional Function
function (fistname, lastname){
  let greeting = "Good Morning!";
  return fistname + lastname + greeting;
}

// Arrow Function
(a, b) => {
  let greeting = "Good Morning!";
  return fistname + lastname + greeting;
}
Untuk aturan penulisan fungsi dengan lebih dari satu parameter dan lebih dari satu baris ekspresi didalamnya, tanda kurung "()", kurung kurawal "{}" dan fungsi "return" wajib ditulis.


b. Limitasi

  • Tidak boleh ada jeda baris(line breaks).
  • Tidak cocok untuk methods call, apply dan bind.
  • Tidak bisa digunakan sebagai constructor.

Sekian untuk ulasan tentang arrow function. Jika ada tambahan atau pertanyaan jangan sungkan untuk meninggalkan komentar. Untuk lebih lengkapnya silahkan kunjungi link dokumentasi dibawah ini.


Sources: