Apa itu Fungsi Panah JavaScript?

Pada artikel ini, Anda akan mempelajari segala sesuatu tentang Fungsi Panah JavaScript. Fungsi panah kita gunakan untuk membuat kode lebih ringkas dan banyak variasi yang bisa Anda tulis.

Javascript adalah bahasa yang sangat berat fungsi . Fungsi dalam javascript adalah salah satu konsep yang paling berharga. Kami menulis fungsi, kami meneruskan fungsi, panggilan balik, dan kode sinkronisasi yang kami miliki fungsi. Itu hanya bagian mendasar dari JavaScript.

Untuk waktu yang lama, kami telah menulis kata kunci fungsi untuk menulis fungsi dalam javascript. Berikut adalah beberapa contoh fungsi dalam JavaScript. Anda dapat melihat kami menggunakan kata kunci fungsi di sini.

(function () {
   //...
});

Fungsi anonim tidak dapat diakses setelah pembuatan awal. Oleh karena itu, Anda sering perlu menugaskannya ke sebuah variabel.

Misalnya, berikut ini menunjukkan fungsi anonim yang menampilkan pesan:

let show = function() {
    console.log('Anonymous function');
};

show();

Karena kita perlu memanggil fungsi anonim nanti, kita menugaskan fungsi anonim ke show variabel.

Karena seluruh penugasan fungsi anonim ke variabel show membuat ekspresi yang valid, Anda tidak perlu membungkus fungsi anonim di dalam tanda kurung ().

Dalam praktiknya, Anda sering melewatkan fungsi anonim sebagai argumen ke fungsi lain. Sebagai contoh:

setTimeout(function() {
    console.log('Execute later after 1 second')
}, 1000);

Perhatikan bahwa fungsi adalah warga negara kelas satu di JavaScript. Oleh karena itu, Anda dapat meneruskan fungsi ke fungsi lain sebagai argumen.

Di sini Anda dapat melihat setiap kali kita perlu menulis kata kunci fungsi dan mendefinisikan suatu fungsi. Tapi di sinilah Fungsi Panah muncul. ES6 memperkenalkan ekspresi fungsi panah yang menyediakan singkatan untuk mendeklarasikan fungsi anonim. Ekspresi fungsi panah adalah alternatif ringkas untuk ekspresi fungsi tradisional , dengan beberapa perbedaan semantik dan batasan penggunaan yang disengaja

Biasanya fungsi Panah lebih pendek dan terkadang berperilaku berbeda jika dibandingkan dengan fungsi javascript tradisional.

Fungsi Panah tidak didukung untuk Internet Explore .

Kami menggunakan simbol '= dan >' saat kami mendefinisikan fungsi panah. Sepertinya panah itu sebabnya kami memanggil fungsi-fungsi itu fungsi panah.

let show = () => console.log('Anonymous function');

Kita dapat menulis fungsi normal sebagai fungsi panah seperti ini.

let add = function (a, b) { // Normal Fucntion
    return a + b;
};
let add = (a, b) => a + b;  // Arrow Fucntion

• Jika Anda memiliki 2 argumen, Anda dapat menggunakan tanda kurung sebagai fungsi normal:

let add = function (a, b) { // Normal Fucntion
    return a + b;
};



let add = (a, b) => a + b;  // Arrow Fucntion

let square = function(x){ // Normal Fucntion
    return x * x;
}


let square = (x) => { // Arrow fucntion with parenthesis
    return x * x;
}

let square = x => { // You can modify it as like this
    return x * x;
}

let square = x => (  // Furthermore you can modify by removing return keyword
     x * x   // Replace {} with  ()
);

let square = x => x * x; // Furthermore you can modify

let test  = () => console.log('No Arguments');

Untuk menghilangkan masalah ini, kita perlu membungkusnya dengan tanda kurung .

Sekarang javascript tahu itu sebagai nilai balik dan itu bukan hanya kurung kurawal untuk badan fungsi.

Fungsi panah tidak memiliki pengikatan sendiri ke this, arguments, atau super, dan tidak boleh digunakan sebagai metode

• Ekspresi fungsi panah hanya boleh digunakan untuk fungsi non-metode karena mereka tidak memilikinya sendiri this.

const person ={
    name: "Kasun",
    action: function(){
        console.log(this.name, "says Hi");
    }
}

person.action();

Saya memanggil tindakan pada objek seseorang dan nilai nama akan kembali dengan string gabungan. Sekarang mari gunakan fungsi panah alih-alih fungsi biasa.

const person ={
    name: "Kasun",
    action: () => console.log(this.name, "says Hi")
}

person.action();

Sekarang kita hanya mendapatkan " says Hi " sebagai output. Apa yang terjadi disini? Saat kami menggunakan fungsi panah, nilai nama tidak disetel karena fungsi normal berfungsi. Itu hanya diatur ke objek jendela saat kita menggunakan ini dalam fungsi panah. Berperilaku seperti fungsi tindakan adalah fungsi mandiri.

Untuk alasan serupa, metode call(), apply(), dan bind()tidak berguna saat dipanggil pada fungsi panah, karena fungsi panah ditetapkan thisberdasarkan cakupan fungsi panah didefinisikan di dalamnya, dan thisnilainya tidak berubah berdasarkan cara fungsi dipanggil.

• Fungsi panah tidak dapat digunakan sebagai konstruktor dan akan memunculkan kesalahan saat dipanggil dengan new. Mereka juga tidak memiliki prototypeharta.

const Foo = () => {};
const foo = new Foo(); // TypeError: Foo is not a constructor
console.log("prototype" in Foo); // false

Ini semua tentang fungsi Panah dan saya harap Anda mendapatkan pemahaman yang sempurna tentang fungsi panah. Sampai jumpa di tutorial lainnya.

Terima kasih!