Belajar ES6 – Arrow Function

Salah satu fitur yang banyak digunakan dari ES6 adalah arrow function. Dari namanya kita sudah bisa mengira, ini adalah fitur pada function. Salah satu kegunaan dari fitur ini adalah syntax javascript kita menjadi lebih ringkes.

Sebagai bahan perbandingan, mungkin kawan-kawan ada yang menggunakan syntak seperti ini untuk mendapatkan nilai penjumlahan.

adiputra@linux:~$ node
> var arr = [1,2,3]
undefined
> result = arr.map(function(x) { return x+5; });
[ 6, 7, 8 ]
>

Dengan arrow function pada ES6, kita bisa melakukannya dengan lebih ringkas seperti kode dibawah ini.

> var arr = [1,2,3]
undefined
> result = arr.map(x => x + 5);
[ 6, 7, 8 ]
> 

Salah satu keuntungan kembali kita menggunakan arrow function adalah kita bisa menggunakan ‘this’ tanpa perlu membuat that = this. Ada kawan-kawan yang pernah pakai that = this? 😀

Saya coba contohkan, saya membuat fungsi Person seperti kode dibawah ini.

> function Person() {
... this.age = 0;
... setInterval(function growUp() {
..... this.age++;
..... }, 100);
... }
undefined
> var p = new Person();
undefined
> console.log(p.age);
0
undefined

Pada kode diatas, saya ingin mengetahui age dari Person tersebut, tapi selalu menghasilkan nilai 0. Bagaimana agar age tersebut dapat dikalkulasi pada function setInterval? Caranya adalah this di dalam function setInterval tersebut tidak bisa digunakan kecuali kita buat variable pengganti di luar fungsi tersebut. that = this, ini adalah solusi.

> function Person() {
... this.age = 0;
... that = this;
... setInterval(function growUp(){
..... that.age++;
..... },100);
... }
undefined
> var p2 = new Person();
undefined
> p2.age
88
> p2.age
195

Terlihat kita menggunakan that = this; sehingga ketika di dalam block setInterval kita bisa mengakses property age tersebut.

Dengan arrow function pada ES6 ini kita tidak perlu menggunakan itu. Kita cukup langsung akses this.nama-property di dalam class function tersebut.

> function Animal() {
... this.age = 0;
... setInterval(() => {
..... this.age++;
..... },100);
... }
undefined
> var a = new Animal();
undefined
> console.log(a.age);
93
undefined
> console.log(a.age);
363

Terlihat ya, nilai dari property age tidak 0.

Syntax Arrow Function pada ES6 secara umum seperti ini.

() => { ... } // no parameter

artinya tanpa parameter ()

x => { ... } // one parameter, an identifier

Satu parameter dengan body. Kita bisa juga membungkusnya seperti kode ini

(x) => { ... } // one parameter, an identifier

Dan dengan lebih dari 1 parameter

(x, y) => { ... } // several parameters

Pada block body {}, selalu mengeluarkan nilai. Kita bisa menggunakan keyword ‘return’ atau tanpa keyword ‘return’.

x => { return x * x }  // block
x => x * x  // expression, equivalent to previous line

Pada arrow function, kita juga dapat membuat nilai default dari parameter. Misalnya ada kode seperti ini sebagai contoh.

> [1, undefined, 3].map((x='yes') => x)
[ 1, 'yes', 3 ]

Terlihat pada kode diatas, nilai x kita kasih default ‘yes’ jika terdapat parameter yang bernilai undefuned.


[crp]


Tidak ada Break/Enter ketika menulis Arrow Function

Ada beberapa pengecualian ketika menulis syntax arrow function.

const func1 = (x, y) // SyntaxError
=> {
    return x + y;
};


const func2 = (x, y) => // OK
{
    return x + y;
};


const func3 = (x, y) => { // OK
    return x + y;
};


const func4 = (x, y) // SyntaxError
=> x + y;


const func5 = (x, y) => // OK
x + y;

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: