Cara menggunakan ARROW pada JavaScript

Arrow functions were introduced in ES6.

Table of Contents Show

Arrow Functions Return Value by Default:
What About this?
Browser Support
Jadi…. apa itu ES6 atau ECMAScript 2015?
Arrow Function (=>)
Apa yang dimaksud arrow function dalam Javascript?
Kapan Menggunakan Arrow function?
Apa itu es 6?
Jelaskan apa yang dimaksud standarisasi ECMAScript 6?

Arrow functions allow us to write shorter function syntax:

let myFunction = (a, b) => a * b;

Try it Yourself »

It gets shorter! If the function has only one statement, and the statement returns a value, you can remove the brackets and the return keyword:

Arrow Functions Return Value by Default:

hello = () => "Hello World!";

Try it Yourself »

Note: This works only if the function has only one statement.

If you have parameters, you pass them inside the parentheses:

In fact, if you have only one parameter, you can skip the parentheses as well:

What About this?

The handling of this is also different in arrow functions compared to regular functions.

In short, with arrow functions there are no binding of this.

In regular functions the this keyword represented the object that called the function, which could be the window, the document, a button or whatever.

With arrow functions the this keyword always represents the object that defined the arrow function.

Let us take a look at two examples to understand the difference.

Both examples call a method twice, first when the page loads, and once again when the user clicks a button.

The first example uses a regular function, and the second example uses an arrow function.

The result shows that the first example returns two different objects (window and button), and the second example returns the window object twice, because the window object is the "owner" of the function.

Example

With a regular function this represents the object that calls the function:

// Regular Function:
hello = function() {
document.getElementById("demo").innerHTML += this;
}

// The window object calls the function:
window.addEventListener("load", hello);

// A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);

Try it Yourself »

Example

With an arrow function this represents the owner of the function:

// Arrow Function:
hello = () => {
document.getElementById("demo").innerHTML += this;
}

// The window object calls the function:
window.addEventListener("load", hello);

// A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);

Try it Yourself »

Remember these differences when you are working with functions. Sometimes the behavior of regular functions is what you want, if not, use arrow functions.

Browser Support

The following table defines the first browser versions with full support for Arrow Functions in JavaScript:


Chrome 45	Edge 12	Firefox 22	Safari 10	Opera 32
Sep, 2015	Jul, 2015	May, 2013	Sep, 2016	Sep, 2015

Pembelajaran kali ini adalah memahami arrow function. Tujuan pembuatan arrow function ini adalah supaya function kelihatan lebih ringkas. Untuk memperjelas pembahasan mengenai arrow function maka kita langsung mencoba saja.

Source code Javascript yang mengandung arrow function adalah seperti berikut ini:

let  luasPersegipanjang = function(p,l)
{
	return p*l;
};
console.log('Function =',luasPersegipanjang(10,5));


let  luas = (p,l) => { return p*l;};
console.log('Arrow =',luas(10,5));

Demo dapat dilihat di https://js.aris.proweb.asia/7-12-arrow.html dengan tampilan seperti berikut ini:

Yang perlu diperhatikan mengenai function biasa dengan arrow function ini adalah mengenai this:
a. pada function biasa, this ini menunjuk kepada pemanggil
b. pada arrow function, this ini menunjuk kepada dirinya sendiri .

Informasi lebih lanjut silahkan mengunjungi https://www.w3schools.com/js/js_arrow_function.asp.

Kunjungi www.proweb.co.id untuk menambah wawasan anda.

Halo guys, kali ini saya akan sharing sedikit tentang ES6 (ECMA Script 2015). Banyak orang ingin belajar framework atau library tertentu yang menggunakan bahasa Javascript seperti (React, React-Native, Angular, Vue, dll) . Nah tapi merasa kesulitan untuk memahami (seperti saya), salah satu faktornya adalah kita belum tau atau belum paham tentang bahasa yang dipakai oleh framework/library itu sendiri. Oleh karena itu saya ingin sharing tulisan tentang ES6, agar mempermudah developer yang ingin mempelajari suatu framework/library yang menggunakan JS. Btw tulisan ini cocok untuk dibaca oleh orang yang sudah paham tentang basic pemrograman di bahasa tertentu misal java, php, python, dll.

Jadi…. apa itu ES6 atau ECMAScript 2015?

ES6 adalah sebuah singkatan dari ECMAScript versi 6. ES6 release pada tahun 2015, jadi ES6 sama ES 2015 sama aja ya. Lalu apa itu ECMAScript? ECMAScript adalah sebuah standarisasi scripting language (Javascript) yang dibuat oleh European Computer Manufacturers Association (ECMA). Bahasa gampangnya ECMAScript itu standarnya, Javascript itu implementasinya.

Untuk menjalankan sebuah program yang ditulis menggunakan ES6 kalian dapat menggunakan NodeJS dengan command dibawah ini. Panduan untuk installasi NodeJS bisa kalian lihat di sini.

node namaFileJS

Variabel

Di dalam JavaScript kita tidak perlu mendeklarasikan jenis tipe data. Seluruh variabel di dalam JavaScript dapat berisi nilai apapun (tipe data apapun), dan dapat diubah menjadi tipe lain sepanjang program. Untuk mendeklrasikan sebuah variabel ada 3 cara yaitu menggunakan const, let, dan var.

let dan var : fungsi dari let dan var sebenarnya sama untuk mendeklarasikan variabel yang nilainya dapat diubah. Namun perbedaanya adalah var mempunyai cakupan dalam sebuah fungsi (function scope) dan let mempunyai cakupan dalam sebuah block (block scope). Bingung apa maksudnya? oke saya akan memberikan sebuah contoh melalui code.

Untuk mendapatkan experience lebih, harap tidak copy paste contoh code.

var (function scope)

Jika code var-1.js dijalankan maka akan mengeluarkan output yang sesuai pada comment code baris 2 dan 4.

Nah gimana kalau code var-2.js dijalankan? program akan mengeluarkan output ReferenceError: i is not defined. Kenapa? karena varibel i di deklarasikan menggunakan var di dalam function looping(). Sedangkan pada baris 7 kita memanggi variabel i di luar function looping(). Hal ini menunjukan jika var berjalan pada cakupan function (function scope).

Bagaimana jika code var-3.js dijalankan? tidak ada error kan? apakah ada yang bingung kenapa baris 6 tidak error padahal variabel i tidak dalam scope function inLooping() ? ini dikarenakan function inLooping() masuk ke dalam scope function looping(). Oleh karena itu variabel i pada baris 6 dapat dipanggil.

Kesimpulannya variabel yang dideklarasikan menggunakan var hanya dapat dipanggil dalam cakupan sebuah fungsi dimana variabel tersebut dideklarasikan. Child function juga dapat memanggil variabel yang dideklarasikan menggunakan var pada root functionnya (contohnya seperti code var-3.js)

let (block scope)

Jika code let-1.js dijalankan maka akan mengeluarkan output ReferenceError: i is not defined. kenapa? karena batas sebuah block adalah sebuah kurung kurawal { some code here }. Jika kalian lihat pada code let-1.js terdapat block scope (baris 1–3). Variabel i dideklarasikan menggunakan let di dalam block scope tersebut, namun variabel i dipanggil dari luar block scope (baris 4).

Nah jika kalian menjalankan code let-2.js akan mengeluarkan output seperti comment pada baris 2 dan 6. Ini dikarenakan variabel yang dideklarasikan menggunakan let dipanggil dalam block scope masing-masing. Terdapat dua block scope pada code let-2.js (baris 1–3) dan (baris 4–7).

Kesimpulannya dari dua contoh code diatas adalah variabel yang dideklarasikan menggunakan let hanya dapat dipanggil dalam sebuah block scope yang sama. Sebuah block scope dapat ditandai dengan sebuah kurung kurawal { ….. some code here ….. }

const (variabel konstanta)

Sifat const sama seperti let, namun perbedaanya variabel yang dideklarasikan menggunakan const tidak dapat diubah nilainya atau immutable variables.

Jika code const-1.js dijalankan maka akan mengeluarkan output error TypeError: Assignment to constant variable. Ini menandakan sebuah variabel yang dideklarasikan menggunakan const nilainya tidak dapat diubah atau di-reassign.

Arrow Function (=>)

jadi syntax ini => maksudnya apa ?

Dulu pertama kali saya membaca code ES6, arrow function (=>) membuat saya bingung untuk memahami code tersebut. Setelah saya pelajari sebenarnya arrow function itu hanyalah penyederhanaan penulisan sebuah function. untuk lebih jelasnya kalian bisa mencoba code arrow-1.js di bawah ini. Tapi bukan hanya untuk penyederhanaan saja, memang ada saatnya dimana kita benar-benar harus memakai arrow function.

Gimana bisa kalian lihat kan? perbedaan tulisan pada contoh code 1–3. Namun outputan dari ketiga potongan code tersebut adalah sama. Perbedaan dari contoh code 1 dan contoh code 2 hanyalah dipenulisan yaitu menghilangkan kata function sebelum paramater dan menambahkan => setelah parameter. Begitu juga perbedaan dari contoh code 2 dan code 3, karena pada body fungsi tersebut hanya mempunyai single javascript expression maka kita dapat menghilangkan kata return dan kurung kurawalnya.
Sedangkan pada contoh code 4 dan 5, karena function tersebut hanya mempunyai satu argument maka kita dapat menghilangkan kurung buka dan tutupnya. Bagaimana dengan contoh code 6 dan 7? buat yang belum paham dengan array helper mungkin akan merasa bingung. Oke next part kita akan membahas beberapa macam array helper yang sering digunakan pada ES6. Dokumentasi lengkap arrow function bisa kalian lihat di sini.

Sekian tulisan dari saya kali ini, jika ada yang kurang atau ingin bertanya bisa post responses di bawah sini ya.

Apa yang dimaksud arrow function dalam Javascript?

Jadi untuk mereview materi yang telah kita bahas, arrow function adalah fitur ES6 yang dapat kita gunakan untuk membuat sebuah fungsi secara lebih sederhana dan ringkas. Jika fungsi yang kita buat hanya memiliki satu baris expression, maka arrow function akan menganggapnya sebagai return statement.

Kapan Menggunakan Arrow function?

Arrow Function diperkenalkan pada ES6. Arrow Function memungkinkan kita untuk menulis sintaks fungsi dengan cara lebih pendek. Kode menjadi semakin pendek! Jika fungsi hanya memiliki satu statement, dan statement tersebut mengembalikan nilai, maka kita dapat menghapus tanda kurung dan kata kunci return.

Apa itu es 6?

ES6 adalah singkatan dari ECMAScript 6. ECMAScript 6 sendiri digunakan untuk memperkuat JavaScript dan ES6 adalah versi-6 ECMAScript yang diterbitkan pada tahun 2015, dan juga dikenal sebagai ECMAScript 2015.

Jelaskan apa yang dimaksud standarisasi ECMAScript 6?

ES6 atau Ecmascript6 versi 6 adalah sebuah standarisasi scripting language Javascript. ES6 dibuat ECMA (European Computer Manufacturers Association) dan dirilis sekitar tahun 2015 lalu. Untuk memahaminya, ES boleh pula diartikan sebagai standar sedangkan Javascript sebagai implementasinya.