Contoh Arrow Function Expression Javascript

Arrow function mirip seperti regular function secara perilaku, namun penulisannya jauh berbeda. Sama seperti namanya, fungsi didefinisikan dengan menggunakan tanda panah (=>) dan tentu penulisan fungsi dengan arrow ini akan lebih singkat.

Untuk gambaran awal, perhatikan penulisan regular fungsi sebagai callback berikut:

const upperizedNames = ["Dimas", "Widy", "Buchori"]
    .map(function(name) {
        return name.toUpperCase();
});
 
console.log(...upperizedNames);
 
/* output:
DIMAS WIDY BUCHORI
*/

Sedangkan menggunakan arrow function akan tampak seperti ini:

const upperizedNames = ["Dimas", "Widy", "Buchori"]
    .map(name => name.toUpperCase());
 
console.log(...upperizedNames);
 
/* output:
DIMAS WIDY BUCHORI
*/

Pada kasus fungsi yang dituliskan dalam satu baris dengan arrow function kita dapat menghapus kata function, tanda kurung, tanda kurawal, kata return, dan semicolon (;). Kita hanya perlu menambahkan tanda panah (=>) di antara parameter dan kode fungsinya.

Lihat betapa sederhananya jika kita menggunakan arrow function

Function Parameter

Pada penggunaan arrow function kita melihat bahwa variabel yang diletakan sebelum tanda panah (=>) adalah merupakan parameter dari fungsi. 

// name merupakan parameter dari fungsi
const sayName = name => console.log(`Nama saya ${name}`);

Namun penulisan tersebut hanya berlaku jika fungsi memiliki satu parameter saja. Lantas bagaimana jika kita ingin membuat fungsi yang memiliki lebih dari satu parameter atau tanpa sebuah parameter? Hal itu sangat biasa dilakukan bukan? 

Pada arrow function jika terdapat dua atau lebih parameter fungsi kita perlu membungkusnya dengan tanda kurung seperti ini: 

const sayHello = (name, greet) => console.log(`${greet}, ${name}!`);
 
sayHello("Dimas", "Selamat Pagi")
 
/* output:
Selamat Pagi, Dimas!
*/

Namun jika kita sama sekali tidak membutuhkan parameter, biarkan saja tanda kurung tersebut kosong.

const sayHello = () => console.log("Selamat pagi semuanya!");
 
sayHello()
 
/* output:
Selamat pagi semuanya!
*/

Atau beberapa developer biasanya mengubah tanda kurung menjadi garis bawah (_) agar penulisannya lebih simpel.

Block Body Function

Fungsi merupakan mini program sehingga sangat mungkin terdapat lebih dari satu logika di dalamnya. Seperti yang kita ketahui bahwa logika-logika pada pemrograman terdiri dari banyak expression ataupun statement. 

Pada contoh kode arrow function sebelumnya kita hanya menuliskan satu buah expression sehingga penulisannya bisa sangat ringkas. Namun bagaimana jika dalam sebuah fungsi terdapat banyak logika di dalamnya? Apakah bisa dituliskan menggunakan arrow function? Jawabannya tentu bisa!

Sama seperti regular function, arrow function sebenarnya tidak benar-benar menghilangkan tanda kurung kurawal ({ }) dalam penulisannya. Tanda kurung kurawal pun berfungsi sama seperti regular function yakni menampung body function di mana tempat logika fungsi dituliskan. Penulisan tanda kurung kurawal menjadi opsional ketika body fungsi hanya terdiri dari satu expression atau statement saja.

Jika kita butuh lebih dari satu baris dalam body function, kita bisa menuliskannya seperti ini:

const sayHello = language => {
    if(language.toUpperCase() === "INDONESIA") {
        return "Selamat Pagi!";
    } else {
        return "Good Morning!";
    }
}
 
console.log(sayHello("Indonesia"));
 
/* output:
Selamat Pagi!
*/

Selain itu juga, kita perlu menuliskan kembali keyword return agar fungsi tersebut dapat mengembalikan nilai

Apa Itu Class di Javascript?

Dalam paradigma Object-Oriented Programming (OOP), class merupakan sebuah blueprint yang dapat dikembangkan untuk membuat sebuah objek.

Blueprint ini merupakan sebuah template yang di dalamnya menjelaskan seperti apa perilaku dari objek itu (berupa properti ataupun method).

Paradigma OOP selalu digambarkan dengan kehidupan nyata. Visualisasi di atas mencontohkan gambaran umum OOP di mana terdapat sebuah blueprint kucing, nilai yang dimiliki kucing, dan kemampuan yang dapat dilakukan olehnya. 

Dalam OOP blueprint tersebut dikenal dengan class (kelas), nilai yang dimiliki olehnya dikenal dengan properti, kemampuan yang dimilikinya dikenal sebagai behaviour/method dan realisasi dari sebuah blueprint tersebut disebut instance.

Dalam dunia pemrograman khususnya dalam paradigma OOP, kita sering membuat banyak objek dengan jenis yang sama. Dengan membuat blueprint ini kita dapat mengurangi duplikasi kode dalam membuat objek yang serupa

Kebanyakan bahasa pemrograman memanfaatkan class dalam penerapan paradigma OOP. Pada JavaScript tidak ada konsep class murni bahkan hingga saat ini. Namun bukan berarti kita tidak bisa menerapkan paradigma OOP sepenuhnya.

Seperti yang kita ketahui, class pada OOP merupakan sebuah blueprint. Jika berbicara mengenai blueprint, JavaScript memiliki konsep untuk membuatnya tanpa melalui class. Konsep tersebut adalah prototype. Sejak awal developer menggunakan konsep ini dalam menerapkan paradigma OOP di JavaScript.

Walaupun dapat menggantikan class, konsep prototype tidak serupa dengan class pada bahasa lain. Terlebih pada penulisan sintaknya. Hal ini menjadikan banyak developer kebingungan khususnya developer yang dasarnya dari bahasa class basis (seperti Java, C++, C#, Swift, etc.). Meskipun banyak juga developer yang merasa bahwa class tidak diperlukan pada JavaScript, namun fitur class ini tetap menjadi salah satu yang dikembangkan pada ECMAScript 6.

A Class Before ES6

Sebelum ES6, Hal yang paling mendekati dengan class yaitu membuat sebuah objek menggunakan constructor function dan keyword new, lalu untuk menambahkan method kita gunakan konsep prototype.

function Car(manufacture, color) {
    this.manufacture = manufacture;
    this.color = color;
    this.enginesActive = false;
}
 
Car.prototype.startEngines = function () {
    console.log('Mobil dinyalakan...');
    this.enginesActive = true;
};
 
Car.prototype.info = function () {
    console.log("Manufacture: " + this.manufacture);
    console.log("Color: " + this.color);
    console.log("Engines: " + (this.enginesActive ? "Active" : "Inactive"));
}
 
var johnCar = new Car("Honda", "Red");
johnCar.startEngines();
johnCar.info();
 
/* output: 
Mobil dinyalakan...
Manufacture: Honda
Color: Red
Engines: Active
*/

Pada kode di atas Car merupakan constructor function yang akan membuat instance Car baru setiapkan kode new Car() dieksekusi. Melalui Car.prototype, method startEngines() dan carInfo()  diwarisi pada setiap instance Car yang dibuat, sehingga johnCar (sebagai instance Car) dapat mengakses kedua method tersebut.

Teknik dasar ini yang digunakan dalam membuat class di JavaScript sebelum ES6.

“Mengapa method pada instance harus disimpan pada prototype atau __proto__ ? Mengapa tidak disimpan pada constructor sama seperti properti? 

Alasannya adalah jika kita menyimpan method pada constructor maka method tersebut akan selalu dibuat ketika instance dibuat. Ini bukan pendekatan yang baik karena jika method memiliki kode yang banyak, maka akan memakan memori yang banyak.

Sedangkan jika menggunakan prototype, method hanya dibuat satu kali. Dan method tersebut diwarisi kepada setiap instance yang dibuat.”

ES6 Classes

Dengan hadirnya class pada ES6, pembuatan class di JavaScript menjadi lebih mudah dan juga penulisannya mirip seperti bahasa pemrograman lain berbasis class. Pembuatan class pada ES6 menggunakan keyword class itu sendiri kemudian diikuti dengan nama class-nya. 

class Car {
    
    // Sama seperti function constructor
    constructor(manufacture, color) {
        this.manufacture = manufacture;
        this.color = color;
        this.enginesActive = false;
    }
    
    // Sama seperti Car.prototype.startEngine
    startEngines() {
        console.log('Mobil dinyalakan...');
        this.enginesActive = true;
    }
    
    // Sama seperti car.prototype.info
    info() {
        console.log(`Manufacture: ${this.manufacture}`);
        console.log(`Color:  ${this.color}`);
        console.log(`Engines: ${this.enginesActive ? "Active" : "Inactive"}`);
    }
    
}
 
const johnCar = new Car("Honda", "Red");
johnCar.startEngines();
johnCar.info();
 
 
/* output: 
Mobil dinyalakan...
Manufacture: Honda
Color: Red
Engines: Active
*/

Jika Anda terbiasa dengan bahasa pemrograman berbasis class, pasti penulisannya sangat serupa bukan?

Walaupun dari segi sintaksis pembuatan class antara keduanya cukup berbeda, namun perilaku dari objek yang dibuat dengan keduanya sama.

Inilah mengapa class pada ES6 hanya sebuah syntactic sugar dari konsep prototype yang sudah ada.

“Ketika kita hendak membuat sebuah constructor function ataupun class. Secara code convention (aturan penulisan), gunakan CamelCase dalam penamaannya. Contohnya Car daripada car, SportCar daripada sportCar atau Sportcar

Cara Membuat Callback Function di Javascript

Hal yang membuat bingung ketika kita bekerja dengan synchronous dan asynchronous program adalah bagaimana menangani suatu nilai yang didapatkan secara asynchronous pada program yang berjalan secara synchronous. 

Contohnya seperti kode berikut:

const getCake = () => {
 let cake = null;
 console.log("Sedang membuat kue, silakan tunggu ....")
 setTimeout(() => {
   cake = "Kue Selesai!"
 }, 3000)
 return cake;
}
 
const cake = getCake();
console.log(cake);
 
/*output:
Sedang membuat kue, silakan tunggu ....
null
*/

Jika kita melakukan hal seperti ini untuk mencetak nilai cake yang sesungguhnya, maka hal tersebut tidak akan pernah terjadi. Karena seperti yang sudah kita ketahui fungsi setTimeout() tidak akan menghentikan JavaScript untuk mengeksekusi kode yang ada selanjutnya. Jadi fungsi getCake() akan selalu mengembalikan nilai null, karena kode return cake akan dieksekusi terlebih dahulu dibandingkan dengan cake = “Kue Selesai!”. Kode asynchronous perlu disusun dengan cara yang berbeda dari synchronous code. Cara paling dasar adalah dengan menggunakan callback function.

Apa itu callback function? Mari kita bayangkan kembali melalui pandangan dunia nyata. Kita menunggu pesanan kopi datang di meja kita tapi , pada saat itu juga kita tidak bisa berada terus di tempat itu karena ada urusan mendadak. Pada kasus ini mungkin terdapat dua aksi yang bisa kita lakukan:

• (Synchronous) Kita tetap menunggu di meja hingga kopi itu datang dan kemudian meninggalkan kedai kopi.
• (Asynchronous) Kita meminta tolong kepada teman kita untuk menerima kopi itu, dan bertemu nanti untuk memberikan kopinya. Sehingga kita tidak perlu menunggu untuk meninggalkan kedai kopi.

Nah pada JavaScript, teman kita berperan layaknya callback function. Ia diperintahkan pada sebuah fungsi asynchronous kemudian akan dipanggil/digunakan ketika tugas itu selesai.

Bagaimana cara melakukannya? Yang pertama kita tambahkan parameter dengan nama callback pada fungsi asynchronous.

const getCake = callback => {
 let cake = null;
 console.log("Sedang membuat kue, silakan tunggu ....")
 setTimeout(() => {
   cake = "Kue Selesai!";
 }, 3000)
 return cake;
}

Kemudian kita panggil/gunakan callback yang diisikan dengan data yang akan dibawa (cake) ketika task selesai dilakukan.

setTimeout(function() {
   cake = "Kue Selesai!";
   callback(cake);
 }, 3000)

Setelah menggunakan callback, fungsi tidak perlu lagi mengembalikan nilai. Sehingga kita bisa hapus kode return cake;. Sehingga keseluruhan fungsi akan tampak seperti ini:

const getCake = callback => {
 let cake = null;
 console.log("Sedang membuat kue, silakan tunggu ....")
 setTimeout(() => {
   cake = "Kue Selesai!";
   callback(cake);
 }, 3000)
}

Kemudian untuk menggunakan fungsi getCake, kita ubah kode dari:

const cake = getCake();
console.log(cake);

Menjadi:

getCake(cake => {
 console.log(cake);
})

Sehingga ketika dijalankan akan sesuai dengan harapan kita.

const getCake = callback => {
 let cake = null;
 console.log("Sedang membuat kue, silakan tunggu ....")
 setTimeout(() => {
   cake = "Kue Selesai!";
   callback(cake);
 }, 3000)
}
 
getCake(cake => {
 console.log(cake);
})
 
/* output:
Sedang membuat kue, silakan tunggu ....
---- setelah 3 detik ----
Kue Selesai!
*/

Callback Hell

Kita sudah mengetahui bahwa callback dibutuhkan untuk mendapatkan nilai yang berasal dari asynchronous function. Lantas bagaimana jika terdapat proses satu sama lain yang saling bergantungan? Contohnya, untuk membuat kue tahapan yang perlu kita lakukan adalah:

1. Mempersiapkan bahan
2. Membuat adonan
3. Menyiapkan adonan ke cetakan
4. Memanggang adonan

Tahapan tersebut sangat tergantung satu sama lain. Kita tidak bisa memanggang adonan sebelum membuat adonannya, dan kita tidak bisa membuat adonan tanpa mempersiapkan bahannya terlebih dahulu. Jika seluruh tahapan tersebut berjalan secara synchronous, mungkin kita bisa melakukanya seperti ini:

function makeACake(...rawIngredients) {
 const ingredients = gatheringIngredients(rawIngredients),
 dough = makeTheDough(ingredients),
 pouredDough = pourDough(dough),
 cake = bakeACake(pourDough),
 console.log(cake);
}

Namun jika fungsi-fungsi tersebut berjalan secara asynchronous, maka kita akan membuat yang namanya callback hell. Callback hell terjadi karena banyak sekali callback function yang bersarang karena saling membutuhkan satu sama lain, sehingga kode akan tampak seperti ini:

function makeACake(...rawIngredients) {
 gatheringIngredients(rawIngredients, function(ingridients) {
   makeTheDough(ingridients, function(dough) {
     pourDough(dough, function(pouredDough) {
       bakeACake(pouredDough, function(cake) {
         console.log(cake);
       });
     });
   });
 });
}

Melihat kode seperti ini saja, kepala jadi pusing. Terbayang sulitnya memelihara kode ini di masa yang akan datang.

Lantas apa solusi agar kita dapat menghindari callback hell? Salah satunya adalah dengan menggunakan Promise.

function makeACake(...rawIngredients) {
 gatheringIngredients(rawIngredients)
 .then(makeTheDough)
 .then(pourDough)
 .then(bakeACake)
 .then(console.log);
}

Dengan Promise, kita dapat meminimalisir callback hell dan mengubahnya menjadi kode yang sangat mudah dibaca. Bahkan dengan kode seperti itu, non-developer pun dapat mengerti apa maksud dari kode tersebut