Fungsi Panah JavaScript

Dalam tutorial ini, Anda akan belajar tentang fungsi panah JavaScript dengan bantuan contoh.

Fungsi panah adalah salah satu fitur yang diperkenalkan dalam JavaScript versi ES6. Ini memungkinkan Anda membuat fungsi dengan cara yang lebih bersih dibandingkan dengan fungsi biasa. Misalnya,
fungsi ini

 // function expression let x = function(x, y) ( return x * y; )

dapat ditulis sebagai

 // using arrow functions let x = (x, y) => x * y;

menggunakan fungsi panah.

Sintaks Fungsi Panah

Sintaks dari fungsi panah adalah:

 let myFunction = (arg1, arg2,… argN) => ( statement(s) )

Sini,

  • myFunction adalah nama fungsinya
  • arg1, arg2,… argN adalah argumen fungsi
  • statement(s) adalah fungsi tubuh

Jika tubuh memiliki pernyataan atau ekspresi tunggal, Anda dapat menulis fungsi panah sebagai:

 let myFunction = (arg1, arg2,… argN) => expression

Contoh 1: Fungsi Panah Tanpa Argumen

Jika suatu fungsi tidak mengambil argumen apa pun, Anda harus menggunakan tanda kurung kosong. Sebagai contoh,

 let greet = () => console.log('Hello'); greet(); // Hello

Contoh 2: Fungsi Panah dengan Satu Argumen

Jika suatu fungsi hanya memiliki satu argumen, Anda dapat menghilangkan tanda kurung. Sebagai contoh,

 let greet = x => console.log(x); greet('Hello'); // Hello

Contoh 3: Fungsi Panah sebagai Ekspresi

Anda juga dapat membuat fungsi secara dinamis dan menggunakannya sebagai ekspresi. Sebagai contoh,

 let age = 5; let welcome = (age console.log('Baby') : () => console.log('Adult'); welcome(); // Baby

Contoh 4: Fungsi Panah Multiline

Jika badan fungsi memiliki beberapa pernyataan, Anda harus meletakkannya di dalam tanda kurung kurawal (). Sebagai contoh,

 let sum = (a, b) => ( let result = a + b; return result; ) let result1 = sum(5,7); console.log(result1); // 12

ini dengan Fungsi Panah

Di dalam fungsi biasa, kata kunci ini merujuk ke fungsi yang dipanggil.

Namun, thistidak terkait dengan fungsi panah. Fungsi panah tidak punya sendiri this. Jadi, setiap kali Anda menelepon this, ini merujuk ke lingkup induknya. Sebagai contoh,

Di dalam fungsi biasa

 function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( // this is accessible console.log(this.age); function innerFunc() ( // this refers to the global object console.log(this.age); console.log(this); ) innerFunc(); ) ) let x = new Person(); x.sayName();

Keluaran

 25 Jendela yang tidak ditentukan ()

Di sini, this.agedi dalam this.sayName()dapat diakses karena this.sayName()merupakan metode suatu objek.

Namun, innerFunc()merupakan fungsi normal dan this.agetidak dapat diakses karena thismengacu pada objek global (objek Window di browser). Oleh karena itu, this.agedi dalam innerFunc()fungsi memberi undefined.

Di dalam fungsi panah

 function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( console.log(this.age); let innerFunc = () => ( console.log(this.age); ) innerFunc(); ) ) const x = new Person(); x.sayName();

Keluaran

 25 25

Di sini, innerFunc()fungsi didefinisikan menggunakan fungsi panah. Dan di dalam fungsi panah, thismengacu pada ruang lingkup induk. Karenanya, this.ageberikan 25 .

Argumen Mengikat

Fungsi reguler memiliki argumen yang mengikat. Itulah mengapa saat Anda meneruskan argumen ke fungsi biasa, Anda dapat mengaksesnya menggunakan argumentskata kunci. Sebagai contoh,

 let x = function () ( console.log(arguments); ) x(4,6,7); // Arguments (4, 6, 7)

Fungsi panah tidak mengikat argumen.

Ketika Anda mencoba mengakses argumen menggunakan fungsi panah, itu akan memberikan kesalahan. Sebagai contoh,

 let x = () => ( console.log(arguments); ) x(4,6,7); // ReferenceError: Can't find variable: arguments

Untuk mengatasi masalah ini, Anda dapat menggunakan sintaks penyebaran. Sebagai contoh,

 let x = (… n) => ( console.log(n); ) x(4,6,7); // (4, 6, 7)

Fungsi Panah dengan Janji dan Panggilan Balik

Fungsi panah menyediakan sintaks yang lebih baik untuk menulis janji dan panggilan balik. Sebagai contoh,

 // ES5 asyncFunction().then(function() ( return asyncFunction1(); )).then(function() ( return asyncFunction2(); )).then(function() ( finish; ));

dapat ditulis sebagai

 // ES6 asyncFunction() .then(() => asyncFunction1()) .then(() => asyncFunction2()) .then(() => finish);

Hal Yang Harus Anda Hindari Dengan Fungsi Panah

1. Anda tidak boleh menggunakan fungsi panah untuk membuat metode di dalam objek.

 let person = ( name: 'Jack', age: 25, sayName: () => ( // this refers to the global… // console.log(this.age); ) ) person.sayName(); // undefined

2. Anda tidak dapat menggunakan fungsi panah sebagai konstruktor . Sebagai contoh,

 let Foo = () => (); let foo = new Foo(); // TypeError: Foo is not a constructor

Catatan : Fungsi panah diperkenalkan di ES6 . Beberapa browser mungkin tidak mendukung penggunaan fungsi panah. Kunjungi dukungan Fungsi Panah JavaScript untuk mempelajari lebih lanjut.

Artikel yang menarik...