Belajar Menggunakan Arrow Function ES6

Celvine Adi Putra
3 min readOct 10, 2022

--

https://www.freepik.com/free-vector/flat-design-content-management-system-illustration_11855884.htm#page=2&query=web%20development&position=2&from_view=search

Pada bagian ini kita akan fokus pada apa itu arrow function, apa perbedaan dengan regular function dan bagaimana sih cara nya kita menggunakan arrow function ini.

apa itu arrow function ?, arrow function pertama kali dikenalkan pada javascript di ES6 yang memungkinkan kita membuat sebuah function yang lebih simple dari pada regular function.

Arrow function walaupun lebih simple dalam penulisannya tetapi terdapat kekurangan sehingga kita tidak dapat selalu menggunakan arrow function ini disetiap kasus. Jadi arrow function bukan untuk menggantikan regular function secara sepenuhnya.

Kita coba lihat dulu gimana sih bentuk dari regular function dan bagaimana bentuk dari arrow function itu.

Regular Function

Pada regular function ada 2 cara nih, yang pertama function declaration, dan yang kedua function expression. Kalau kalian bertanya kenapa ada 2 cara penulisan function dan apa perbedaan dari kedua cara itu.

Pertama function declaration atau ada juga yang mengenal dengan nama function statements, cara pembuatannya harus diawali dengan function lalu diikuti dengan nama functionnya.

Penulisan function jenis declaration ini dapat di letakkan dimana saja di dalam script, bahkan ketika function nya kita panggil dahulu baru kita deklarasikan functionnya setelahnya itu masih bisa, karna javascript interpreter pada browser membaca semua script dahulu baru menjalankan baris baris kode. Contoh deh cara ini masih bisa kalau di function declaration.

Kedua function expression, function ini disimpan di dalam sebuah variable, function nya dapat kita beri nama atau pun tidak, ngak ada masalah kalau tidak mau memberikan nama, contoh yang di atas saya tidak kasih nama function nya atau ada juga orang yang menyebutnya anonymous function yaitu sebuah function tanpa nama.

function expression ini tidak seperti function declaration yang bisa di panggil sebelum function di deklarasikan, kalau function expression karna disimpan dalam sebuah variable maka harus dideklarasikan dahulu baru bisa kita gunakan, saya coba kasih contoh lagi.

Arrow Function

Untuk menggunakan arrow function cukup mudah, biasanya di awali dengan variable boleh menggunakan const, let, atau pun var.

Perhatikan variable sayHelloArrowFunction , penulisan arrow function jika hanya mereturn 1 hasil tanpa proses lainnya dapat di tulis dengan cara yang pertama untuk meringkat penulisan kode.

perhatikan lagi variable sayHelloAgainArrowFunction ini contoh sederhana jika kita terdapat beberapa baris kode / proses sebelum kita melakukan return (optional jika function yang dibuat memang untuk mengembalikan nilai jika tidak, akan mengembalikan undefined). Oh iya untuk contoh ini ada parsing 2 parameter sebagai contoh a dan b, untuk lebih detailnya kita bahas setelah ini.

Arrow function tanpa parameter

Jika sebuah arrow function tidak parameter yang di minta, kita boleh menggunakan function tesebut seperti biasanya.

Arrow function dengan 1 parameter

Jika terdapat 1 parameter kita bisa meringkas kodenya, coba perhatikan parameter name, tidak wajib kita bungkus dengan kurung, kalau mau menggunakan kurung juga tidak ada masalah, tapi kalau ada default value nya, kita tetap menggunakan kurung ya.

sebagai latihan, coba ubah regular function di bawah menjadi arrow function 😁.

Oke, sampai disini dulu mudah mudahan kalian paham dengan apa yang ingin saya sampaikan.

Mampir ke github dan profile saya juga ya, Terimakasih

--

--