Home » Javascript » Arrow Function di JavaScript: Contoh Code dan Sintaknya

Arrow Function di JavaScript: Contoh Code dan Sintaknya

by Catur Kurnia Sari
by Catur Kurnia Sari

Arrow Function diperkenalkan pada ES6.

Arrow Function memungkinkan kita untuk menulis sintaks fungsi dengan cara lebih pendek.

Sebelum penggunaan Arrow Function:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Function</h2>

<p> Contoh ini menunjukkan sintaks dari suatu fungsi, tanpa menggunakan sintaks Arrow Function. </p>
<p id="demo"></p>

<script>
var hello;

hello = function() {
  return "Hello World!";
}

document.getElementById("demo").innerHTML = hello();
</script>

</body>
</html>

Setelah:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrow Function</h2>

<p> Contoh ini menunjukkan sintaks dari Arrow Function, dan cara menggunakannya. </p>
<p id="demo"></p>

<script>
var hello;

hello = () => {
  return "Hello World!";
}

document.getElementById("demo").innerHTML = hello();
</script>

</body>
</html>

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.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrow Function</h2>

<p> Contoh ini menunjukkan Arrow Function tanpa tanda kurung atau kata kunci kembali. </p>
<p id="demo"></p>

<script>
var hello;

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

document.getElementById("demo").innerHTML = hello();
</script>

</body>
</html>

Catatan: Ini hanya berfungsi jika fungsi hanya memiliki satu statement.

Jika kita memiliki parameter, maka kita meneruskannya di dalam tanda kurung.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrow Function</h2>

<p> Contoh ini menunjukkan Arrow Function dengan parameter. </p>
<p id="demo"></p>

<script>
var hello;

hello = (val) => "Hello " + val;

document.getElementById("demo").innerHTML = hello("Universe!");
</script>

</body>
</html>

Faktanya, jika anda hanya memiliki satu parameter, anda juga dapat melewati tanda kurung:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrow Function</h2>

<p> Contoh ini menunjukkan bahwa jika Anda hanya memiliki satu parameter dalam Arrow Function, Anda dapat melewati tanda kurung. </p>
<p id="demo"></p>

<script>
var hello;

hello = val => "Hello " + val;

document.getElementById("demo").innerHTML = hello("Universe!");
</script>

</body>
</html>

Bagaimana dengan this?

Penanganannya juga berbeda pada Arrow Function dibandingkan dengan fungsi biasa.

Singkatnya, dengan Arrow Function tidak ada pengikatan this.

Dalam fungsi reguler, kata kunci this mewakili object yang disebut fungsi, yang bisa berupa jendela, dokumen, tombol, atau apa pun.

DenganArrow Function kata kunci this selalu mewakili object yang mendefinisikan Arrow Function.

Mari kita lihat dua contoh untuk memahami perbedaannya.

Kedua contoh memanggil method dua kali, pertama saat halaman dimuat, dan sekali lagi saat pengguna mengklik tombol.

Contoh pertama menggunakan fungsi reguler, dan contoh kedua menggunakan Arrow Function.

Hasilnya menunjukkan bahwa contoh pertama mengembalikan dua object berbeda (jendela dan tombol), dan contoh kedua mengembalikan object jendela dua kali, karena object jendela adalah “pemilik” dari fungsi tersebut.

Contoh:

Dengan fungsi biasa, this mewakili object yang memanggil fungsi tersebut.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript "this"</h2>

<p> Contoh ini menunjukkan bahwa dalam fungsi biasa, kata kunci "this" mewakili object yang berbeda bergantung pada bagaimana fungsi itu dipanggil. </p>
<p> Klik tombol untuk menjalankan fungsi "halo" lagi, dan Anda akan melihat bahwa kali ini "this" mewakili objek tombol. </p>
<button id="btn">Klik!</button>

<p id="demo"></p>

<script>
var hello;

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);
</script>

</body>
</html>

Contoh:
Dengan Arrow Function, this mewakili pemilik fungsi.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript "this"</h2>

<p>Contoh ini menunjukkan bahwa dalam Arrow Function, kata kunci "this" mewakili objek yang memiliki fungsi, tidak peduli siapa yang memanggil fungsi tersebut. </p>

<p> Klik tombol untuk menjalankan fungsi "halo" lagi, dan Anda akan melihat bahwa "ini" masih mewakili objek jendela. </p>

<button id="btn">Klik!</button>

<p id="demo"></p>

<script>
var hello;

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);
</script>

</body>
</html>

Ingatlah perbedaan ini saat kita akan menggunakan fungsi. Terkadang behavior fungsi reguler adalah apa yang kita inginkan, jika tidak, gunakan Arrow Function.

Browser Support

Tabel berikut menjelaskan versi browser pertama dengan dukungan penuh untuk Arrow Function di JavaScript:

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

You may also like