Advance JavaScript 6 - arrow function

Advance JavaScript 6 - arrow function



Apa itu arrow function?

Arrow function adalah bentuk lain yang lebih ringkas dari function expression

Comtoh nya jika function expression biasa seperti ini :

let nampilpesan = function(nama) {
alert (` hallo` + nama);

}

nampilpesan('gimasn')

Kalau ini Kita ringkas jadi arrow function maka akan berubah menjadi seperti ini

let nampilpesan = (mama) => {
alert('hallo' + nama);

}

nampilpesan('gimasn')

Keyword function nya hilang ,hanya Ada kurang buka Dan tutup untuk menyimpan argument lalu Tanda panah

Tetapi Ada perbedaan nya Kita liat

Const nampilpesan = (nama) => { return ('hallo' + nama); }

Jika bisa bikin satu baris seperti ini

Jika argument nya lebih dari satu kslian bisa tulis seperti ini

Const nampilpesan = (nama, waktu) => {

return (`hallo ${nama}, selamat ${waktu});

}

console.log(nampilpesan("gimasn","siang))

Kalau argument nya satu sebenarnya kalian tidak perlu pake kurung  jadi seperti ini

Const nampilpesan = nama => { return ('hallo' + nama); }

Lalu kalau misalnya isi dari function hanya return seperti yang di atas Kita bahkan tidak perlu menulis return nya Dan lebih ringkas lagi tidak perlu kurung kurawal nya

Const nampilpesan = nama => ('hallo' + nama);

Ini disebut dengan implisit return

Dan kalau tanpa parameter ,Kita wajib menuliskan kurung buka kurung tutup nya seperti ini

Const nampilpesan = () => ('hallo world');

Inilah arrow function ,Tapi pada kenyataan nya Kita tidak mungkin membuat function ringkas seperti ini Kita akan melihat contoh lain dari arrow function.

Misal menggunakan function map

let nama = ['gimasn','nuralamsah','entahlah']

let jumlahHuruf = nama.map( nama => nama.length);

Tapi kalau mereturn object Kita bungkus lagi kurung kurawal dengan kurung ,baru Kita menulis object didalamnya contoh

let jumlahHuruf = nama.map( nama => ({nama : nama, jumlahHuruf : mama.length }) );

Komentar

Postingan populer dari blog ini

ethical hacking part 14 membuat malware Trojan

CSS layouting - box model: CSS reset

ethical hacking part 3 reconnaissance & information gethering