Tutorial JavaScript Fungsi Panah - Bagaimana Mendeklarasikan Fungsi JS dengan Sintaks ES6 Baru

Anda mungkin pernah melihat fungsi panah ditulis dengan beberapa cara berbeda.

//example 1 const addTwo = (num) => {return num + 2;}; //example 2 const addTwo = (num) => num + 2; //example 3 const addTwo = num => num + 2; //example 4 const addTwo = a => { const newValue = a + 2; return newValue; }; 

Beberapa parameter memiliki tanda kurung, sementara yang lain tidak. Beberapa menggunakan tanda kurung keriting danreturnkata kunci, yang lainnya tidak. Satu bahkan mencakup beberapa baris, sedangkan yang lainnya terdiri dari satu baris.

Menariknya, ketika kita memanggil fungsi panah di atas dengan argumen yang sama, kita mendapatkan hasil yang sama.

console.log(addTwo(2)); //Result: 4 

Bagaimana Anda tahu sintaks fungsi panah mana yang digunakan? Itulah yang akan diungkapkan artikel ini: cara mendeklarasikan fungsi panah.

Perbedaan Utama

Fungsi panah adalah cara lain — lebih ringkas — untuk menulis ekspresi fungsi. Namun, mereka tidak memiliki pengikatan sendiri ke thiskata kunci.

//Function expression const addNumbers = function(number1, number2) { return number1 + number2; }; //Arrow function expression const addNumbers = (number1, number2) => number1 + number2; 

Ketika kita memanggil fungsi-fungsi ini dengan argumen yang sama, kita mendapatkan hasil yang sama.

console.log(addNumbers(1, 2)); //Result: 3 

Ada perbedaan sintaksis yang penting untuk diperhatikan: fungsi panah menggunakan panah =>alih-alih functionkata kunci. Ada perbedaan lain yang harus diperhatikan saat Anda menulis fungsi panah, dan itulah yang akan kita bahas selanjutnya.

Tanda kurung

Beberapa fungsi panah memiliki tanda kurung di sekitar parameter dan yang lainnya tidak.

//Example with parentheses const addNums = (num1, num2) => num1 + num2; //Example without parentheses const addTwo = num => num + 2; 

Ternyata, jumlah parameter yang dimiliki fungsi panah menentukan apakah kita perlu menyertakan tanda kurung atau tidak.

Fungsi panah dengan parameter nol membutuhkan tanda kurung.

const hello = () => "hello"; console.log(hello()); //Result: "hello" 

Fungsi panah dengan satu parameter tidak tidak memerlukan tanda kurung. Dengan kata lain, tanda kurung bersifat opsional.

const addTwo = num => num + 2; 

Jadi kita bisa menambahkan tanda kurung ke contoh di atas dan fungsi panah masih berfungsi.

const addTwo = (num) => num + 2; console.log(addTwo(2)); //Result: 4 

Fungsi panah dengan beberapa parameter membutuhkan tanda kurung.

const addNums = (num1, num2) => num1 + num2; console.log(addNums(1, 2)); //Result: 3 

Fungsi panah juga mendukung parameter istirahat dan perusakan . Kedua fitur tersebut membutuhkan tanda kurung.

Ini adalah contoh fungsi panah dengan parameter istirahat .

const nums = (first, ...rest) => rest; console.log(nums(1, 2, 3, 4)); //Result: [ 2, 3, 4 ] 

Dan inilah salah satu yang menggunakan perusakan .

const location = { country: "Greece", city: "Athens" }; const travel = ({city}) => city; console.log(travel(location)); //Result: "Athens" 

Untuk meringkas: jika hanya ada satu parameter — dan Anda tidak menggunakan parameter rest atau penghancuran — maka tanda kurung bersifat opsional. Jika tidak, pastikan untuk memasukkannya.

Badan Fungsi

Sekarang setelah aturan tanda kurung sudah tercakup, mari beralih ke badan fungsi fungsi panah.

Badan fungsi panah dapat memiliki "badan ringkas" atau "badan blok". Tipe tubuh memengaruhi sintaksis.

Pertama, sintaks "badan ringkas".

const addTwo = a => a + 2; 

Sintaks "badan ringkas" hanya itu: ringkas! Kami tidak menggunakanreturnkata kunci atau tanda kurung kurawal.

Jika Anda memiliki fungsi panah satu baris (seperti contoh di atas), maka nilainya secara implisit dikembalikan. Jadi, Anda dapat menghilangkanreturnkata kunci dan tanda kurung kurawal.

Sekarang mari kita lihat sintaks "tubuh blok".

const addTwo = a => { const total = a + 2; return total; } 

Perhatikan bahwa kita menggunakan kedua kurung keriting dan returnkata kunci dalam contoh di atas.

Anda biasanya melihat sintaks ini saat badan fungsi lebih dari satu baris. Dan itu adalah poin kuncinya: bungkus tubuh dari fungsi panah multi-garis dalam tanda kurung keriting dan gunakanreturnkata kunci.

Objek dan Fungsi Panah

Ada satu lagi sintaks yang perlu diketahui: bungkus badan fungsi dalam tanda kurung saat Anda ingin mengembalikan ekspresi literal objek.

const f = () => ({ city:"Boston" }) console.log(f().city) 

Tanpa tanda kurung, kami mendapatkan kesalahan.

const f = () => { city:"Boston" } //Result: error 

Jika Anda menemukan sintaks fungsi panah agak membingungkan, Anda tidak sendirian. Perlu beberapa waktu untuk membiasakannya. Tetapi menyadari opsi dan persyaratan Anda adalah langkah-langkah ke arah itu.

Saya menulis tentang belajar program dan cara terbaik untuk melakukannya ( amymhaddad.com).