Arrow Functions Pada ES2015

Pada ES2015 ada sebuah cara baru dalam menuliskan sebuah function dalam javascript yang bisa dikatakan lebih simpel,short (pendek) dan sederhana yang biasa dikenal dengan keyword Arrow functions.

Selain berguna dalam penyederhanaan dalam penulis function, ada beberapa kondisi yang memang akan lebih baik atau malah harus menggunakan arrow function daripada menulis function dengan cara yang biasa (tanpa arrow functions). Berikut beberapa contoh penulisan dan penggunaan Arrow functions :

// Contoh penulisan function dengan cara biasa
function func1() {
console.log("function biasa");
};
func1(); // function biasa

// Contoh penulisan function dengan arrow functions
const func2 = () => {
console.log("function dengan arrow functions");
}
func2(); //function dengan arrow functions

Karena arrow functions ini anonymous function sehingga jika kita ingin mendeklarasikan function tersebut yang berdiri sendiri tidak bisa langsung memberikan nama pada function tersebut seperti (function a() {}) tetapi harus dibungkus dengan sebuah variabel. ( const a = () => {} ).

// contoh 1
const func1 = (a) => {
console.log(a);
};
// contoh 2
const func2 = a => {
console.log(a);
};
func1(3); //3
func2(5); //5

Ada sedikit perbedaan pada penulisan 2 function dari contoh di atas. Biarpun sama-sama menggunakan arrow functions. Pada contoh kedua penulisan function tidak dengan tanda kurung, ini bisa dilakukan jika dalam function terdapat hanya ada 1 parameter, tetapi jika tidak ada parameter atau parameter lebih dari 1 makan function harus ditulis dengan tanda kurung ().

this.a = 25;
const print => function() {
// akan terjadi error :
// Uncaught TypeError: Cannot read property 'a' of undefined
console.log('this a using print', this.a);
}
print();

Contoh di atas jika dijalankan akan error karena value this di dalam blok function print itu tidak mengacu pada value objek this secara global, tetapi mengacu objek this di dalam function print itu sendiri yang mana tidak dideklarasikan sebuah variabel this.a di dlm function print tersebut. Dengan Arrow function kita bisa menyelesaikan permasalahan seperti di atas.

this.a  = 25;
const arrowPrint = () => {
console.log("this a using arrow print : ", this.a);
}
arrowPrint(); // this a using arrow print : 25

Arrow functions tidak mengikat this ke dalam function yang ditulis. Sehingga kode di atas jika dijalankan tidak akan terdapat error dan akan menghasilkan output 25.

Untuk awalnya pasti kita akan sedikit bingung dengan penggunaan arrow functions ini untuk penulisan function. Tetapi kalau terbiasa, kita pasti akan sangat terbantu dengan cara penulisan function menggunakan Arrow functions. Kalau ada kesalahan dalam penyampaian materi di atas, silahkan sampaikan kritik dan saran dalam kolom komentar. Terima kasih dan happy coding :)

Referensi :

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions