DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja

Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

ARROW FUNCTION PADA JAVASCRIPT

Pelajari tentang arrow function dalam JavaScript, termasuk cara penggunaannya dan perbedaan dengan function biasa.

Daftar Isi:

Syntax Arrow Function
Kelebihan Arrow Function
Kekurangan Arrow Function

Arrow function adalah cara baru untuk menulis fungsi dalam JavaScript yang diperkenalkan di ECMAScript 6 (ES6). Arrow function memiliki sintaks yang lebih singkat dan beberapa perilaku berbeda dibandingkan dengan fungsi biasa.

Syntax Arrow Function

Arrow function ditulis menggunakan sintaks berikut:

(param1, param2, ..., paramN) => {
    // kode fungsi
}

Contoh dasar penggunaan arrow function:

const tambah = (a, b) => {
    return a + b;
}

Jika fungsi hanya memiliki satu pernyataan, kamu bisa menghilangkan return dan kurung kurawal {}:

const tambah = (a, b) => a + b;

Jika fungsi hanya memiliki satu parameter, kamu bisa menghilangkan tanda kurung ():

const cetakNama = nama => console.log(nama);

Kelebihan Arrow Function

Sintaks Lebih Ringkas

Seperti yang terlihat di atas, arrow function memiliki sintaks yang lebih singkat dibandingkan dengan fungsi biasa. Ini membuat kode lebih mudah dibaca dan ditulis.

Tidak Mengikat this

Arrow function tidak memiliki this sendiri. Sebaliknya, arrow function mewarisi this dari konteks sekitarnya. Ini sangat berguna dalam metode yang memerlukan akses ke konteks this dari luar fungsi.

Contoh:

function Person() {
    this.nama = "John";

    setTimeout(() => {
        console.log(this.nama); // "John"
    }, 1000);
}

const orang = new Person();

Pada contoh di atas, this.nama berhasil memanggil properti nama dari objek Person.

Kekurangan Arrow Function

Tidak Bisa Digunakan Sebagai Constructor

Arrow function tidak bisa digunakan sebagai constructor dan akan menghasilkan kesalahan jika digunakan dengan new.

const Person = (nama) => {
    this.nama = nama;
}

// Akan menyebabkan error
const john = new Person("John");

Tidak Memiliki arguments

Arrow function tidak memiliki objek arguments. Jika kamu butuh arguments, sebaiknya gunakan fungsi biasa.

const func = () => {
    console.log(arguments); // ReferenceError: arguments is not defined
};

Untuk mengatasi ini, kamu bisa menggunakan parameter rest:

const func = (...args) => {
    console.log(args); // Menampilkan semua argumen sebagai array
};

Dengan memahami cara kerja arrow function, kamu bisa menulis kode JavaScript yang lebih efisien dan mudah dibaca.


Daftar newsletter skodev masukkan emailmu untuk dapat informasi menarik dari dunia koding