Mengenal Arrow Function pada Javascript

Belajar React Js 01: Mengenal Arrow Function pada Javascript

Kali ini AnakTik akan membahas tentang salah satu fitur terbaru dari javascript yaitu arrow function , arrow function adalah sintaks penulisan function pada javascript dengan kode yang lebih ringkas yaitu dengan menggunakan token ‘=>’.

Arrow function sendiri datang bersama fitur dari ES6, bagi yang belum tau apa itu ES6. ES6 adalah sebuah standarisasi scripting (javascript) yang dibuat oleh European Computer Manufacturers Association (ECMA).

Dengan menggunakan arrow function kita bahkan tidak perlu menginisialisasi function,nama function dan return karena sifatnya yang anonim.

Arrow Function pada Javascript

biasanya saat kita akan mendeklarasikan sebuah function pada javascript kita akan memulainya dengan sebuah variable atau menginisialisasi nama sebuah function lalu memasukan parameter apa saja yang akan diperlukan dan memulai proses didalam kurung kurawal seperti blok kode dibawah.

//sintaks javascript pada umumnya
var hello1 = function(nama){
    console.log("selamat datang"+nama);
}
function hello2 (nama,nama2){
    console.log("selamat datang "+nama+" dan "+nama2);
}

hello1("andi");
hello2("Rifaldy","andi");

namun dengan menggunakan fitur dari EcmaScript6 kita bisa meringkas kode tersebut menjadi lebih sederhana dari blok kode diatas.

// function dengan 1 parameter
var hello1 = nama => {console.log('selamat datang $(nama)')}
//function dengan lebih dari 1 parameter
var hello2 = (nama,nama2)=> {console.log('selamat datang $(nama) dan $(nama2)'}
//function tanpa parameter
var hello3 = () => {console.log("selamat datang di website saya")}

hello1("andi");
hello2("Rifaldy","andi");
hello3();

pada block kode diatas ada 3 contoh penggunaan arrow function, dimana pada penggunaannya arrow function tidak memerlukan kunci function di depannya dan langsung mendeklarasikan parameter yang dibutuhkan.

jika parameter yang dibutuhkan hanya 1 maka kita bisa meringkasnya kembali dengan menghilangkan tanda kurung pada baris kode tersebut.

namun jika kita tidak memiliki parameter yang dibutuhkan maka kita teap harus menggunakan tanda kurung agar block kodenya dapat berjalan dengan benar.

Baca juga  Pengertian Javascript Beserta Contohnya

selain itu jika kita hanya akan menjalankan 1 perintah di dalam function maka kita tidak perlu menggunakan kurung kurawal “{}”.

baca : perbedaan var let const

//tidak perlu {}
var tampil = nama => console.log('selamat datang di website saya $(nama)');
//perlu {}
var tampil2 = nama =>{
    if(nama === "admin"){
       console.log("selamat datang di page admin");
  }else{
       console.log("selamat datang di page member");
  }
}

dengan menggunakan arrow function kita bisa lebih menghemat waktu pada saat mendevelop sebuah script javascript, selain itu arrow function ini juga akan sangat berguna saat kita membuat aplikasi web/android menggunakan framework javascript, seperti React dan React native nantinya.

Selain arrow function ES6 juga hadir dengan membawa beberapa fitur baru pada javscript yang akan kita bahas di tutorial berikutnya.

Untuk lebih lengkap tetang arrow function kamu bisa mencobanya di w3School

nantinya arrow function akan sangat terpakai saat kita menggunakan react js.

baca : apa itu react js

Sementara itu dulu yang bisa saya sampaikan mengenai pengenalan Arrow function pada Javascript, Terimakasih.

Add a Comment

Alamat email Anda tidak akan dipublikasikan.