Arrow Functions Pada ES2015
Seorang web programmer yang bekerja secara remote dan saat ini tinggal di kota Pekalongan. Tertarik belajar apa saja tentang Javascript.
4 Oktober 2017

Pada ES2015 ada sebuah cara baru dalam menuliskan sebuah function dalam javascript yang bisa dikatakan lebih simpel,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

Blog ini telah dibaca sebanyak 520 kali
javascript es2015 arrow function beginner

Sekilas Tentang Penulis

Rizqi Maulana
Seorang web programmer yang bekerja secara remote dan saat ini tinggal di kota Pekalongan. Tertarik belajar apa saja tentang Javascript.

KOMENTAR

blog comments powered by Disqus