Cara menggunakan ARREOW pada JavaScript

Question

JavaScript: Apa itu Arrow Function?

Table of Contents Show

JavaScript: Apa itu Arrow Function?
1. Arrow function
2. Perbedaan arrow function dan traditional 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:

Pembelajaran kali ini adalah memahami arrow function. Tujuan pembuatan arrow function ini adalah supaya function kelihatan lebih ringkas. Untuk memperjelas pembahasan mengenai arrow function maka kita langsung mencoba saja.

Source code Javascript yang mengandung arrow function adalah seperti berikut ini:

let  luasPersegipanjang = function(p,l)
{
	return p*l;
};
console.log('Function =',luasPersegipanjang(10,5));


let  luas = (p,l) => { return p*l;};
console.log('Arrow =',luas(10,5));

Demo dapat dilihat di https://js.aris.proweb.asia/7-12-arrow.html dengan tampilan seperti berikut ini:

Yang perlu diperhatikan mengenai function biasa dengan arrow function ini adalah mengenai this:
a. pada function biasa, this ini menunjuk kepada pemanggil
b. pada arrow function, this ini menunjuk kepada dirinya sendiri .

Informasi lebih lanjut silahkan mengunjungi https://www.w3schools.com/js/js_arrow_function.asp.

Kunjungi www.proweb.co.id untuk menambah wawasan anda.

kode javascript Arrow function JavaScript React JS adalah