Cara menggunakan ARRPW pada JavaScript

Kali ini kita akan mengenal salah satu fitur Javascript yang ditambahkan sejak EcmaScript 6, yaitu arrow function.

Arrow function adalah sintak penulisan fungsi yang bisa dibilang lebih singkat, menggunakan token baru yaitu “=>”, fungsi yang dideklarasikan menggunakan panah ini bersifat anonim. Mirip lambda arrow operator di bahasa lain. Dengan arrow function kita bisa menulis fungsi tanpa menggunakan kata kunci “function”, “return”, dan kurung kurawal. Oke mari kita langsung saja membahas sedikit.

Sintak banyak parameter:

// ES5
var multiplyES5 = function(x, y) {
  return x * y;
};

// ES6
var multiplyES6 = (x, y) => { return x * y };

console.log(multiplyES6 (2,3));  // 6

Berhubung contoh fungsi multiplyES6 di atas hanya satu ekspresi, maka bisa disingkat lagi:

var multiplyES6 = (x, y) => x * y;

console.log(multiplyES6 (2,3));  // 6

Sintak satu parameter:

Jika parameter hanya satu, tidak wajib menggunakan tanda kurung.

//ES5
var phraseSplitterEs5 = function phraseSplitter(phrase) {
  return phrase.split(' ');
};

//ES6

var phraseSplitterEs6 = phrase => phrase.split(" ");

console.log(phraseSplitterEs6("ES6 Awesomeness"));  // ["ES6", "Awesomeness"]

Sintak tanpa parameter:

//ES5
var docLogEs5 = function docLog() {
    console.log(document);
};

//ES6
var docLogEs6 = () => { console.log(document); };

docLogEs6(); // #document... <html> ….

Sintak returnnya object:

Jika return object, maka harus dibungkus tanda kurung agar bias membedakan antara blok fungsi dengan objek.

//ES5
var setNameIdsEs5 = function setNameIds(id, name) {
  return {
    id: id,
    name: name
  };
};

// ES6
var setNameIdsEs6 = (id, name) => ({ id: id, name: name });

console.log(setNameIdsEs6 (1, "Akhdani"));   // Object {id: 1, name: "Akhdani"}

Apakah ada batasan pada arrow function ini?

Arrow function paling baik digunakan untuk fungsi non-method. Perhatikan contoh berikut:

'use strict';
var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log(this.i, this);
  }
}

obj.b(); // prints undefined, Window {...} (or the global object)
obj.c(); // prints 10, Object {...}

Dari contoh di atas bisa dilihat fungsi b() tidak bisa mengakses properti i, saat mengakses this, ia justru menghasilkan global object.

Arrow function tidak bisa digunakan sebagai konstruktor dan akan terjadi error jika menggunakan new.

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

Arrow function tidak memiliki objek arguments.

var f = () => arguments[0] + n;
f(2); // Uncaught ReferenceError: arguments is not defined

Arrow function ini bisa digunakan pada javascript higher order function pada postingan saya sebelumnya, silakan coba-coba.

Mungkin untuk sementara sekian dulu saja, jika ada tambahan, maka akan saya tambahkan di kemudian hari.

Terima kasih.

Hai teman-teman semuanya, apa kabar? semoga tetap dalam keadaan baik, kembali lagi pada tutorial dumet school, kali ini kita akan belajar tentang arrow function pada javascript.

apa itu function?

function merupakan sebuah kumpulan perintah atau baris kode yang bisa digunakan ketika kita membutuhkan fungsi tersebut, bagi teman-teman yang sudah lumrah dengan function standart pasti mengenal penulisan script seperti berikut ini:

functionsatu(){

console.log("function biasa");

};

satu();

ini dalah script kita menuliskan sebuah perintah function dengan cara biasa atau standart,

Penulisan seperti diatas dapat lebih dipersimple dengan penulisan ES yang kita biasa sebut arrow function, Selain berguna dalam penyederhanaan script function, ada beberapa kondisi dimana memang akan lebih baik atau malah harus menggunakan arrow function, berikut ini adalah penulisan arrow function:

constdua=()=>{

console.log("arrow functions");

}

dua();

Untuk membuat sebuah arrow function kita harus terlebih dahul membuat perintah variable yaitu kita menggunakan const(konstanta).

penulisan :

digunakan ketika ketika parameter lebih dari satu atau tidak ada parameter

dan penulisan seperti :

ini digunakan ketika kita kita hanya memiliki satu parameter,

bentuk contoh penulisannya kurang lebih seperti ini:

//contoh 1//

constsatu=(a)=>{

console.log(a);

};

//contoh 2//

constdua= a=>{

console.log(a);

};

satu(3);

dua(5);

Oke teman-teman untuk tutorial tips kali ini tentang arrow function pada javascript saya rasa cukup sampai disini dulu, semoga tutorial kali ini bermanfaat untuk teman-teman semuanya.

Terima kasih