JavascriptMateri CourseNusantech Academy

Modul 4-3. Arrow Function

Pendahuluan

Halo teman-teman semua selamat datang kembali di Javascript Course dari nusantech academy. Sebelum teman-teman melanjutkan membaca materi ini, diharapkan teman-teman sudah mengerti tentang materi sebelumnya, yaitu tentang pengenalan fungsi dalam javascript dan tentang argument & parameter. Pada pembahasan kali ini kita akan membahas tentang arrow function, yaitu cara lain untuk membuat fungsi.

Arrow Function

Pada update ES6 terdapat fitur arrow function yang menyediakan syntax yang lebih sederhana dan ringkas dalam membuat fungsi dibandingkan dengan menggunakan cara function expression.

Syntax:

let func = (arg1, arg2, ...argN) => expression

Jika kita bandingkan dengan syntax dari function expression:

let func = function(arg1, arg2, ...argN) {
 return expression;
};

Bisa dilihat bahwa syntax arrow function lebih ringkas. Jika kita coba dengan contoh kasus, kira-kira seperti ini:

// Menggunakan function expression
let add = function(a,b) {
 return a + b;
};
 
// Menggunakan arrow function
let add = (a,b) => a + b;

Dapat dilihat dari contoh di atas bahwa fungsi add yang dibuat dengan expression setara dengan fungsi add yang dibuat dengan arrow function. Kedua fungsi add tersebut memiliki 2 parameter a dan b, lalu fungsi tersebut mengembalikan hasil penjumlahan antara a dan b. 

Jika kita hanya memiliki satu argument, maka tanda kurung yang membungkus parameter bisa tidak digunakan. Contohnya: 

// Arrow function dengan satu argument
let triple = num => num * 3;

Akan tetapi, jika fungsi yang ingin kita buat tidak memiliki argument, maka tanda kurung tetap dibutuhkan. Contohnya:

// Arrow function dengan tanpa argument
let sayHello = () => console.log('Hello there');

Arrow function mungkin tampak asing dan tidak terlalu mudah dibaca pada awalnya, tetapi hal tersebut akan cepat berubah ketika kita sudah terbiasa dengan strukturnya. Arrow function sangat praktis digunakan untuk fungsi satu baris.

Arrow Function Multi Baris

Arrow function juga bisa digunakan untuk membuat fungsi yang memiliki statement lebih dari satu baris. Untuk membuat arrow function multi baris kita butuh kurung kurawal {} untuk membungkus statement fungsi dan kita juga akan membutuhkan return statement jika fungsi yang ingin kita buat tersebut akan mengembalikan sebuah value. Contohnya:

// Arrow function multi baris
let hitung = (a,b,c) => {
 const data1 = a + b;
 const data2 = a + c;
 const data3 = b + c;
 const result = data1 + data2 + data3;
 
 return result;
}

Penutup

Jadi untuk mereview materi yang telah kita bahas, arrow function adalah fitur ES6 yang dapat kita gunakan untuk membuat sebuah fungsi secara lebih sederhana dan ringkas. Jika fungsi yang kita buat hanya memiliki satu baris expression, maka arrow function akan menganggapnya sebagai return statement. Arrow function juga bisa digunakan untuk isi fungsi yang lebih dari satu baris, akan tetapi isi fungsi tersebut perlu diletakkan di dalam kurung kurawal {} dan menggunakan return statement jika diperlukan.

Quiz Time:

1. Output dari arrow function di bawah adalah:

const test = (a,b) => a > b ? 'a lebih besar dari b': 'a tidak lebih besar dari b';
 
test(10, 10);
  • a lebih besar dari b
  • a tidak lebih besar dari b
  • False
  • Error

2. Output dari arrow function di bawah adalah:

const checkDaftar = (daftarArray) => daftarArray.length > 0 ? 'List ada': 'List kosong';
 
checkDaftar(['Kunci', 'Sarapan', 'Tas kerja', 'Masker']);
  • List ada
  • List kosong
  • True
  • Error

Leave a Reply