Cara menggunakan AROOW pada JavaScript

JavaScript: Apa itu Arrow Function?

1. Arrow function

Sejak dirilisnya EcmaScript(ES) 6, terdapat beberapa tambahan fitur yang ditambahkan salah satunya adalah arrow function. Secara garis besar arrow function adalah fungsi yang dideklarasikan dengan tanda arrow(panah) "=>" tanpa menggunakan kata kunci "function" dalam syntax seperti cara penulisan fungsi sebelum ES6 rilis(ES 5 kebawah) yang kini juga disebut traditional function. Selain itu kita juga bisa menuliskannya tanpa fungsi "return" , kurung "()" dan kurung kurawal "{}" dengan aturan tertentu. Agar lebih jelas mari kita bandingkan keduanya.

2. Perbedaan arrow function dan traditional function 

a. Cara Penulisan

• fungsi tanpa parameter

// Traditional Function
function (){
  return "Good Morning!";
}

//Arrow function
() => {
    "Good Morning!";
}

• fungsi dengan parameter

// Traditional Function
function (name){
  return "Good Morning!" + name;
}

// Arrow function
(name) => {
  return "Good Morning!" + name;
}

// Arrow function (tanpa kurung kurawal)
(name) => "Good Morning!" + name;


// Arrow function (tanpa tanda kurung)
name => "Good Morning! + name";

Seperti yang sempat diulas tentang arrow function, fungsi dapat melakukan penulisan tanpa tanda kurung "()" apabila fungsi memiliki hanya satu parameter, ini juga berlaku dengan aturan tanpa tanda kurung kurawal "{}" dan fungsi "return" yaitu dapat dilakukan apabila syntax ekspresi dalam fungsi hanya satu baris.

• fungsi dengan beberapa parameter

// Traditional Function
function (fistname, lastname){
  let greeting = "Good Morning!";
  return fistname + lastname + greeting;
}

// Arrow Function
(a, b) => {
  let greeting = "Good Morning!";
  return fistname + lastname + greeting;
}

Untuk aturan penulisan fungsi dengan lebih dari satu parameter dan lebih dari satu baris ekspresi didalamnya, tanda kurung "()", kurung kurawal "{}" dan fungsi "return" wajib ditulis.

b. Limitasi

• Tidak boleh ada jeda baris(line breaks).
  
• Tidak cocok untuk methods call, apply dan bind.
• Tidak bisa digunakan sebagai constructor.

Sekian untuk ulasan tentang arrow function. Jika ada tambahan atau pertanyaan jangan sungkan untuk meninggalkan komentar. Untuk lebih lengkapnya silahkan kunjungi link dokumentasi dibawah ini.

Sources:

Deklarasi function pada JavaScript dapat ditulis seperti ini:

1function updateDinoName(name) {
2  name = 't-rex';
3  return name;
4}
5
6const dinoName = 'brachio';
7
8updateDinoName(dinoName); 

Namun bentuk deklarasi function pada JavaScript tidak hanya satu, ada beberapa bentuk yang lain:

Function Expression

Pada function expression, function disimpan di dalam sebuah variable.

syntax

1const functionName = function (parameter) {
2  ...
3}

1const updateDinoName = function (name) {
2  name = 't-rex';
3  return name;
4};
5
6let dinoName = 'brachio';
7
8updateDinoName(dinoName); 

Perbedaan Function Declaration dengan Function Expression

Kita bisa memanggil function yang dibuat menggunakan Function Declaration meskipun deklarasi dilakukan setelah pemanggilan.

1let dinoName = 'brachio';
2
3updateDinoName(dinoName); 
4
5function updateDinoName(name) {
6  name = 't-rex';
7  return name;
8}

Sedangkan hal ini tidak berlaku untuk Function Expression.

1let dinoName = 'brachio';
2
3updateDinoName(dinoName); 
4
5const updateDinoName = function (name) {
6  name = 't-rex';
7  return name;
8};

Hal ini disebut dengan Function Hoisting, yaitu sebuah mekanisme dimana JavaScript Engine akan memindahkan semua function declaration ke bagian atas source code sebelum dieksekusi.

Anonymous Function

Anonymous Function adalah function yang tidak memiliki nama.

1function() {
2    console.log('Hi Brachio');
3}

Penggunaan anonymous function biasa ditemukan pada Arrow function dan Immediately Invoked Function Expression (IIFE).

Arrow Function

Bisa dibilang arrow function adalah bentuk function yang paling simple.

Karena syntaxnya yang cukup sederhana, arrow function semakin sering digunakan ketimbang bentuk function yang lain.

Contoh:

1const updateDinoName = (name) => {
2  name = 't-rex';
3  return name;
4};
5
6let dinoName = 'brachio';
7
8updateDinoName(dinoName); 

Kita bisa menghilangkan parentheses() pada parameter sehingga menjadi:

1const updateDinoName = (name) => {
2  name = 't-rex';
3  return name;
4};

Contoh arrow function tanpa parameter:

1const sayHi = () => console.log('Hi Brachio!');
2
3sayHi(); 

Contoh code pada pembahasan array.map() dapat lebih disederhanakan dengan mengubah bentuk function menjadi arrow function.

1const numbers = [1, 2, 3, 4, 5];
2



3function doubleIt(number) {
4  return number * 2;
5}
6
7const result = numbers.map(doubleIt);

menjadi:

1const numbers = [1, 2, 3, 4, 5];
2
3const result = numbers.map((number) => number * 2);

Arrow Function adalah bentuk function yang akan sering kita gunakan pada pembelajaran materi-materi selanjutnya

IIFE adalah bentuk function yang dieksekusi segera setelah function dideklarasikan.

1(function () {
2  console.log('Hello Brachio');
3})();

IIFE sering ditemui pada pemrograman JavaScript di browser terutama jika kita menggunakan plugin seperti jQuery.

Ketika sebuah function dideklarasikan, function tersebut akan ditambahkan ke window object.

1function sayHi() {
2  console.log('Hi Brachio');
3}
4
5
6window.sayHi;

Tidak hanya function, ketika kita mendeklarasikan sebuah variable, variable tersebut juga ditambahkan ke window object.

1let word = 'Hi Brachio';
2
3console.log(window.word); 

Hal ini tidak terlalu menjadi masalah jika nama function dan variable tersebut berbeda.

Tetapi seiring waktu baris code pada sebuah project JavaScript bisa berubah menjadi sangat panjang dan komplek, kita akan sulit mengingat setiap nama dari function dan variable yang sudah dideklarasikan.

Sehingga sangat mungkin terjadi kita memberi satu nama yang sama untuk dua function yang berbeda.

Oleh karena itu salah satu tujuan penggunaan IIFE adalah menghindari Global NameSpace Pollution yang dapat berakibat terjadinya name collisions, yaitu 'tabrakan' antara nama function satu dengan function yang lain atau bahkan nama function dengan nama variable.

Function Parameter

Multiple Parameter

Sebuah function dapat memiliki banyak parameter, namun seperti yang sudah dibahas pada Teknik Coding sebelumnya bahwa function sebaiknya memiliki parameter seminim mungkin.

1const sendMessage = (dinoName, message) => {
2  console.log(`Hi ${dinoName}, ${message}`);
3};
4
5const dinoName = 'Brachio';
6const message = 'Where are you going?';
7
8sendMessage(dinoName, message); 

Namun bagaimana jika kita harus menggunakan banyak parameter ?

Salah satu cara yang bisa digunakan agar code tetap clean adalah menggunakan rest parameter.

Default Parameter

Jika kita memiliki sebuah function yang memiliki dua parameter:

1const sendMessage = (dinoName, message) => {
2  console.log(`Hi ${dinoName}, ${message}`);
3};

Kemudian kita hanya menyediakan salah satunya, maka salah satu valuenya adalah undefined.

1const sendMessage = (dinoName, message) => {
2  console.log(`Hi ${dinoName}, ${message}`);
3};
4
5const dinoName = 'Brachio';
6
7sendMessage(dinoName); 

Oleh karena itu kita dapat menambahkan Default Parameter untuk mengganti value undefined dengan value lain.

1const sendMessage = (dinoName, message = 'How are you?') => {
2  console.log(`Hi ${dinoName}, ${message}`);
3};
4
5const dinoName = 'Brachio';
6
7sendMessage(dinoName); 

Selanjutnya kita akan membahas konsep JavaScript yang akan kita gunakan sebagai pendahuluan React library.

Apa yang dimaksud arrow function dalam Javascript?

Kapan Menggunakan Arrow function?

Apa itu es 6?

Jelaskan apa yang dimaksud standarisasi ECMAScript 6?