Fungsi JavaScript Panah Dapat Membuat Anda Pengembang yang Lebih Baik

Iklan

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 memerlukan sedikit penyesuaian jika Anda ahli dalam fungsi JavaScript tradisional. Mari kita lihat apa ini, bagaimana mereka bekerja, dan apa manfaatnya bagi Anda.

Apa Fungsi JavaScript Panah?

Fungsi panah adalah cara baru untuk menulis ekspresi fungsi yang sebelumnya termasuk dalam rilis JavaScript ES6 Apa itu ES6 dan Apa yang Harus Diketahui Pemrogram JavascriptES6 merujuk ke versi 6 bahasa pemrograman ECMA Script (Javascript). Mari kita sekarang melihat beberapa perubahan besar yang dibawa ES6 ke JavaScript. Baca lebih lajut . Mereka mirip dengan ekspresi fungsi JavaScript yang Anda gunakan, dengan beberapa aturan yang sedikit berbeda.

Fungsi panah selalu merupakan fungsi anonim, memiliki aturan berbeda untuk ini, dan memiliki sintaks yang lebih sederhana daripada fungsi tradisional.

Fungsi-fungsi ini menggunakan token panah baru:

=>

Jika Anda pernah bekerja dengan Python, fungsi-fungsi ini sangat mirip Ekspresi Python Lambda Panduan Pemula untuk Memahami Fungsi Python LambdaLambdas in Python adalah salah satu fitur yang paling berguna, penting, dan menarik untuk diketahui. Inilah cara menggunakannya dan mengapa mereka berguna. Baca lebih lajut .

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 untuk dibahas, jadi mari kita mulai dengan perbandingan dasar ekspresi fungsi.

Cara Menggunakan Fungsi Panah

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

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

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

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

Berikut ini ekspresi yang diubah menjadi fungsi panah:

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

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

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

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

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

Masih ada lagi fungsi panah. mari selami lebih dalam sehingga Anda bisa merasakan apa yang bisa mereka lakukan.

Fitur Fungsi Panah

Fungsi panah memiliki banyak kegunaan dan fitur yang berbeda.

Fungsi Biasa

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

misalkan kuadrat = x => x * x kuadrat (2); >>4

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

biarkan helloFunction = () => Console.log ("Halo pembaca!"); helloFunction (); Halo pembaca!

Fungsi sederhana seperti ini menggunakan lebih sedikit kode. Bayangkan betapa mudahnya sebuah kompleks memproyeksikan seperti slideshow JavaScript Cara Membuat SlideShow JavaScript dalam 3 Langkah MudahHari ini saya akan menunjukkan kepada Anda bagaimana membangun slideshow Javacript dari awal - mari langsung masuk! Baca lebih lajut menjadi ketika Anda memiliki cara yang lebih sederhana untuk menulis fungsi.

Menggunakan ini

Konsep ini cenderung menjadi bagian tersulit dalam menggunakan JavaScript. Fungsi panah dibuat ini lebih mudah digunakan.

Saat Anda menggunakan fungsi panah ini akan ditentukan oleh fungsi melampirkan. Ini dapat membuat masalah yang muncul ketika Anda membuat fungsi dan kebutuhan bersarang ini untuk diterapkan ke fungsi utama Anda

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

function Person () {var that = this; // Anda harus menetapkan 'ini' ke variabel baru that.age = 0; setInterval (function growUp () {that.age ++; }, 1000); }

Menetapkan nilai ini 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 ++; // Sekarang Anda dapat menggunakan 'ini' tanpa variabel baru dideklarasikan}, 1000); }

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

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

biarkan pizza = { topping: 5, removeToppings: () => {this.toppings--; } } // Objek pizza dengan 5 topping. > pizza. >> {topping: 5, removeToppings: f} pizza.removeToppings (); // Metode ini tidak akan melakukan apa pun pada objek> pizza. >> {topping: 5, removeToppings: f} // Masih memiliki 5 topping.

Bekerja Dengan Array

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 5 Metode Array JavaScript yang Harus Anda Kuasai Hari IniIngin memahami array JavaScript tetapi tidak bisa mengatasinya? Lihat contoh array JavaScript kami untuk panduan. Baca lebih lajut jadi Anda akan sering menggunakannya.

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

biarkan myArray = [1,2,3,4]; myArray.map (fungsi (elemen) { elemen pengembalian + 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 kode lebih sedikit dengan menggunakan fungsi panah.

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

Jauh lebih mudah dibaca sekarang.

Membuat Objek Literal

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

biarkan createObject = fungsi createName (pertama, terakhir) {return {first: first, last: last}; };

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

biarkan createArrowObject = (pertama, terakhir) => ({pertama: pertama, terakhir: terakhir});

Fungsi dan Luar Panah JavaScript

Anda sekarang tahu beberapa cara berbeda fungsi tanda panah JavaScript membuat hidup Anda lebih mudah sebagai pengembang. Mereka mempersingkat sintaksis, memberi Anda lebih banyak kontrol menggunakan ini, buat objek lebih mudah untuk dibuat dan memberi Anda cara baru untuk bekerja dengan metode array.

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

Ingin mempelajari lebih lanjut tentang JavaScript? Kami Lembar contekan JavaScript Lembar Cheat JavaScript TerbaikDapatkan penyegaran cepat pada elemen JavaScript dengan lembar contekan ini. Baca lebih lajut memberikan informasi berharga dan belajar lebih banyak tentang cara kerja JavaScript Apa itu JavaScript dan Bagaimana Cara Kerjanya?Jika Anda mempelajari pengembangan web, inilah yang perlu Anda ketahui tentang JavaScript dan cara kerjanya dengan HTML dan CSS. Baca lebih lajut dapat membuat Anda menjadi pengembang yang lebih baik.