Arrow Function di JavaScript – JavaScript ES6 #4

Arrow Function di JavaScript

Arrow function adalah salah satu fitur baru yang ditambahkan pada JavaScript di ES6. Dengan menggunakan arrow function kamu dapat menulis fungsi biasa dengan cara yang lebih ringkas.

Bukan hanya itu, arrow function digunakan pada keperluan tertentu karena pada arrow function tidak dilakukan binding ke dirinya sendiri untuk keyword this, arguments, super atau new.target.

Dengan menggunakan cara deklarasi fungsi biasa, kamu biasanya membuat fungsi dengan cara seperti berikut:

var hitungUsia = function(lahir){
    return 2019 – lahir;
}

Fungsi diatas adalah sebuah fungsi yang digunakan untuk mengitung usia sekarang (misalnya sekarang tahun 2019) dengan mengurangi tahun sekarang dengan tahun lahir yang dioper melalui paramer, kemudian fungsi tersebut mengembalikan hasil perhitungan usia.

Dengan menggunakan arrow function kamu dapat menulisnya dengan cara yang lebih gampang dan ringkas, seperti berikut:

var hitungUsia = lahir => 2019 – lahir;

Fungsi diatas berfungsi sama seperti fungsi dengan fungsi sebelumnya, hanya saja dengan menggunakan arrow function kita bisa menulisnya dengan lebih ringkas, tanpa perlu menggunakan keyword function dan bisa mengembalikan hasil langsung tanpa perlu menggunakan keyword return.

Penulisan Fungsi dengan Sintaks Arrow Function di JavaScript

Arrow Function Tanpa Parameter

Untuk menulis fungsi yang tidak memerlukan parameter menggunakan arrow function, kita bisa melakukannya dengan menggunakan cara berikut:

const hitungUsia = () => 2019 – 1998;

Kamu hanya perlu menuliskan keyword “()” untuk mendefinisikannya sebagai fungsi, kemudian dilanjutkan dengan tanda sama dengan dan lebih besar dari “=>” dan kemudian dilanjutkan dengan badan dari fungsi tersebut.

Arrow Function Dengan 1 Parameter

Untuk menulis fungsi dengan 1 parameter, kita bisa melakukannya seperti pada contoh arrow function yang pertama, seperti berikut:

const hitungUsia = lahir => 2019 – lahir;

Keyword lahir pada fungsi tersebut adalah parameter yang dibutuhkan oleh fungsi tersebut. Karena hanya menggunakan satu parameter, kamu tidak perlu menuliskan tanda buka dan tutup kurung.

Arrow Function Dengan Lebih 1 Parameter

Untuk menulis arrow function yang menggunakan lebih dari 1 parameter, kamu bisa melakukannya dengan menggunakan cara seperti berikut:

var hitungUsia = (tahunLahir, tahunSekarang) => tahunSekarang – tahunLahir;

Jika fungsi yang kamu tulis membutuhkan lebih dari 1 parameter, kamu melakukannya dengan menuliskannya di dalam tanda buka dan tanda tutup kurung.

Mengembalikan Nilai pada Arrow Function

Pada contoh-contoh arrow function sebelumnya kita bisa mengembalikan nilai dari sebuah fungsi langsung tanpa perlu menggunakan keyword “return”.

Hal ini memungkinkan dengan menggunakan arrow function karena fungsi-fungsi sebelumnya kita tulis hanya dalam satu baris dan tanpa kita bungkus dengan tanda kurung kurawal “{}”.

Namun jika badan dari fungsi yang kamu buat memiliki jumlah baris lebih dari 1 baris, untuk mengembalikan dari dari fungsi tersebut harus menggunakan keyword “return”, seperti berikut:

const hitungUsia = (tahunLahir) => {
    const tahunSekarang = new Date().getFullYear();
    const usia = tahunSekarang – tahunLahir;
    return usia;
}

Arrow Function Sebagai Fungsi Callback

Karena cara penulisannya yang lebih mudah dan ringkas, membuat callback function menjadi lebih mudah dengan menggunakan arrow function.

Misalnya kamu memiliki sebuah array berisi tahun kelahiran dari 4 orang. Kemudian kamu ingin menghitung usia dari masing-masing orang tersebut dan menyimpan hasil perhitungan usia tersebut ke dalam sebuah array.

Untuk melakukannya, kamu bisa menggunakan method map yang akan diberi callback function yang akan menghitung usia berdasarkan tahun kelahiran tersebut.

Sebelumnya, jika menggunakan fungsi callback biasa, kamu dapat melakukannya dengan cara seperti berikut:

const tahunLahir = [1998, 1980, 2000, 1990];

const umur = tahunLahir.map( function(el) {
return 2019 – el;
});

Dengan menggunakan arrow function sebagai callback function kita dapat menulis callback function dengan cara yang lebih ringkas dan mudah dibaca, seperti berikut:

const tahunLahir = [1998, 1980, 2000, 1990];

const umur = tahunLahir.map ( (el) => 2019 – el );

Potongan kode di atas akan berjalan sama persis seperti potongan kode yang kita tulis sebelumnya dengan menggunakan ES5. Dengan menggunakan arrow function kita bisa membacanya dengan cara yang lebih mudah.