Fungsi Panah JavaScript Dapat Membuat Anda Menjadi Pengembang yang Lebih Baik

JavaScript ES6 membawa perubahan menarik ke dunia pengembangan web. Penambahan baru pada bahasa JavaScript membawa kemungkinan baru.

Salah satu perubahan yang lebih populer adalah penambahan fungsi panah ke dalam JavaScript. Fungsi panah adalah cara baru untuk menulis ekspresi fungsi JavaScript, memberi Anda dua cara berbeda untuk membuat fungsi di aplikasi Anda.

Fungsi panah membutuhkan sedikit penyesuaian jika Anda ahli dalam fungsi JavaScript tradisional. Mari kita lihat apa itu, bagaimana mereka bekerja, dan bagaimana mereka menguntungkan Anda.

Apa Fungsi Panah JavaScript?

Fungsi panah adalah cara baru untuk menulis ekspresi fungsi yang termasuk dalam rilis JavaScript ES6 . Mereka mirip dengan ekspresi fungsi JavaScript yang telah Anda gunakan, dengan beberapa aturan yang sedikit berbeda.

Fungsi panah selalu merupakan fungsi anonim, memiliki aturan berbeda untuk

this

, dan memiliki sintaks yang lebih sederhana daripada fungsi tradisional.

windows stop code info konfigurasi sistem yang buruk

Fungsi-fungsi ini menggunakan token panah baru:

=>

Jika Anda pernah bekerja dengan Python, fungsi-fungsi ini sangat mirip dengan Ekspresi Python Lambda .

Sintaks untuk fungsi-fungsi ini sedikit lebih bersih daripada fungsi normal. Ada beberapa aturan baru yang perlu diingat:

Kata kunci fungsi dihapus
Kata kunci kembali adalah opsional
Kurung kurawal adalah opsional

Ada banyak perubahan kecil yang harus dilakukan, jadi mari kita mulai dengan perbandingan dasar ekspresi fungsi.

Cara Menggunakan Fungsi Panah

Fungsi panah mudah digunakan. Memahami fungsi panah lebih mudah jika dibandingkan dengan ekspresi fungsi tradisional.

Berikut adalah ekspresi fungsi yang menambahkan dua angka; pertama menggunakan metode fungsi tradisional:

 let addnum = function(num1,num2){  
 return num1 + num2;  
};  
addnum(1,2);  
>>3

Ini adalah fungsi yang cukup sederhana yang mengambil dua argumen dan mengembalikan jumlahnya.

Berikut adalah ekspresi yang diubah menjadi fungsi panah:

let addnum = (num1,num2) => { return num1 + num2;};  
addnum(1,2);  
>>3

Sintaks fungsi sangat berbeda dengan menggunakan fungsi panah. Kata kunci fungsi dihapus; tanda panah memberi tahu JavaScript bahwa Anda sedang menulis sebuah fungsi.

Kurung kurawal dan kata kunci kembali masih ada. Ini adalah opsional dengan fungsi panah. Berikut adalah contoh yang lebih sederhana dari fungsi yang sama:

let addnum = (num1,num2) => num1 + num2;

Kata kunci kembali dan kurung kurawal sekarang hilang. Apa yang tersisa adalah fungsi satu baris yang sangat bersih yang hampir setengah kode sebagai fungsi aslinya. Anda mendapatkan hasil yang sama dengan kode tertulis yang jauh lebih sedikit.

Ada lebih banyak fungsi panah. mari selami lebih dalam sehingga Anda lebih memahami apa yang dapat mereka lakukan.

Fitur Fungsi Panah

Fungsi panah memiliki banyak kegunaan dan fitur yang berbeda.

cara membuat plot kotak dan kumis di excel

Fungsi Reguler

Fungsi panah dapat menggunakan satu atau lebih argumen. Jika Anda menggunakan dua atau lebih argumen, Anda harus menyertakannya dalam tanda kurung. Jika Anda hanya memiliki satu argumen, Anda tidak perlu menggunakan tanda kurung.

let square = x => x * x  
square(2);  
>>4

Fungsi panah dapat digunakan tanpa argumen. Jika Anda tidak menggunakan argumen apa pun dalam fungsi Anda, Anda harus menggunakan tanda kurung kosong.

let helloFunction = () => Console.log('Hello reader!');  
helloFunction();  
>>Hello reader!

Fungsi sederhana seperti ini menggunakan lebih sedikit kode. Bayangkan betapa lebih mudahnya sebuah kompleks proyek seperti slideshow JavaScript menjadi ketika Anda memiliki cara yang lebih sederhana untuk menulis fungsi.

Menggunakan Ini

Konsep dari

this

cenderung menjadi bagian tersulit dalam menggunakan JavaScript. Fungsi panah membuat

this

lebih mudah digunakan.

Saat Anda menggunakan fungsi panah

this

akan ditentukan oleh fungsi terlampir. Ini dapat membuat masalah yang muncul saat Anda membuat fungsi dan kebutuhan bersarang

this

untuk diterapkan ke fungsi utama Anda

Berikut adalah contoh populer yang menunjukkan solusi yang harus Anda gunakan dengan fungsi biasa.

function Person() {  
 var that = this; //You have to assign 'this' to a new variable  
 that.age = 0;  
 setInterval(function growUp() {  
 that.age++;  
 }, 1000);  
}

Menetapkan nilai

this

ke variabel membuatnya dapat dibaca ketika Anda memanggil fungsi di dalam fungsi utama Anda. Ini berantakan, inilah cara yang lebih baik untuk melakukan ini menggunakan fungsi panah.

function Person(){  
 this.age = 0;  
 setInterval(() => {  
 this.age++; // Now you can use 'this' without a new variable declared  
 }, 1000);  
}

Meskipun bagus untuk fungsi, mereka tidak boleh digunakan untuk membuat metode di dalam objek. Fungsi panah tidak menggunakan pelingkupan yang tepat untuk

this

Berikut adalah objek sederhana yang membuat metode di dalam menggunakan fungsi panah. Metode harus mengurangi topping variabel satu per satu saat dipanggil. Sebaliknya, itu tidak berfungsi sama sekali.

bagaimana cara mengeluarkan air dari port pengisian daya?

let pizza = {  
toppings: 5,  
removeToppings: () => {  
 this.toppings--;  
 }  
}  
//A pizza object with 5 toppings  
>pizza  
>>{toppings: 5, removeToppings: f}  
pizza.removeToppings(); //The method will not do anything to the object  
>pizza  
>>{toppings: 5, removeToppings: f} //Still has 5 toppings

Bekerja dengan Array

Dengan menggunakan fungsi panah, Anda dapat menyederhanakan kode yang digunakan untuk bekerja dengan metode array. Array dan metode array adalah bagian yang sangat penting dari JavaScript jadi Anda akan sering menggunakannya.

Ada beberapa metode yang berguna seperti peta metode yang menjalankan fungsi pada semua elemen array dan mengembalikan array baru.

let myArray = [1,2,3,4];  
myArray.map(function(element){  
return element + 1;  
});  
>> [2,3,4,5]

Ini adalah fungsi yang cukup sederhana yang menambahkan satu ke setiap nilai dalam array. Anda dapat menulis fungsi yang sama dengan lebih sedikit kode dengan menggunakan fungsi panah.

let myArray = [1,2,3,4];  
myArray.map(element => {  
return element + 1;  
});  
>> [2,3,4,5]

Jauh lebih mudah untuk membaca sekarang.

Membuat Literal Objek

Fungsi panah dapat digunakan untuk membuat literal objek dalam JavaScript. Fungsi reguler dapat membuatnya, tetapi sedikit lebih lama.

let createObject = function createName(first,last) {  
 return {  
 first: first,  
 last: last  
 };  
};

Anda dapat membuat objek yang sama dengan fungsi panah menggunakan lebih sedikit kode. Menggunakan notasi panah, Anda perlu membungkus badan fungsi dalam tanda kurung. Inilah sintaks yang ditingkatkan dengan fungsi panah.

let createArrowObject = (first,last) => ({first:first, last:last});

Fungsi Panah JavaScript dan Lebih Lanjut

Anda sekarang tahu beberapa cara berbeda fungsi panah JavaScript membuat hidup Anda lebih mudah sebagai pengembang. Mereka mempersingkat sintaks, memberi Anda lebih banyak kontrol menggunakan

this

, membuat objek lebih mudah dibuat dan memberi Anda cara baru untuk bekerja dengan metode array.

Pengenalan fungsi panah, bersama dengan banyak fitur lainnya, di JavaScript ES6 menunjukkan betapa pentingnya JavaScript dalam pengembangan web. Masih banyak lagi yang bisa Anda lakukan.

Ingin mempelajari lebih lanjut tentang JavaScript? Pelajari kerangka kerja JavaScript ini. Ditambah, kami lembar contekan JavaScript memberikan informasi berharga dan belajar lebih banyak tentang cara kerja JavaScript dapat membuat Anda menjadi pengembang yang lebih baik.

Membagikan Membagikan Menciak Surel 6 Alternatif Audible: Aplikasi Audiobook Gratis atau Murah Terbaik

Jika Anda tidak suka membayar untuk buku audio, berikut adalah beberapa aplikasi hebat yang memungkinkan Anda mendengarkannya secara gratis dan legal.

Baca Selanjutnya Topik-topik yang berkaitan

Pemrograman
JavaScript

Tentang Penulis Anthony Grant(40 Artikel Diterbitkan)

Anthony Grant adalah penulis lepas yang meliput Pemrograman dan Perangkat Lunak. Dia jurusan Ilmu Komputer yang berkecimpung dalam pemrograman, Excel, perangkat lunak, dan teknologi.

Berlangganan newsletter kami

Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!

Klik di sini untuk berlangganan