6 Perbedaan Antara Fungsi Panah dan Fungsi Reguler di JavaScript

Fungsi adalah bagian penting dari JavaScript yang perlu Anda gunakan untuk menulis kode yang dapat digunakan kembali. Dua jenis fungsi utama adalah fungsi reguler dan panah, dan ada banyak cara untuk mendefinisikannya.

Meskipun mereka memenuhi kebutuhan yang serupa, mereka memiliki beberapa perbedaan penting yang secara mendasar dapat memengaruhi cara Anda menggunakannya dalam kode Anda. Pelajari semua tentang beberapa perbedaan antara fungsi panah dan fungsi biasa.

1. Perbedaan Sintaks

Sintaks yang Anda pilih saat mengembangkan fungsi JavaScript berdampak besar pada betapa mudahnya membaca dan memahami kode Anda. Sintaks fungsi reguler dan panah berbeda secara signifikan, memengaruhi cara Anda menulis dan menggunakannya.

Fungsi panah JavaScript menggunakan struktur bahasa yang lebih kecil yang lebih dimengerti. Anda dapat menggunakannya untuk membuat fungsi dengan menggabungkannya menjadi satu ekspresi atau pernyataan.

const tambahkan = (a, b) => a + b;

Dalam contoh ini, menambahkan fungsi menerima dua input, A Dan B, dan mengembalikan totalnya. Itu => tanda mendefinisikan ini sebagai fungsi panah.

Di sisi lain, mendefinisikan fungsi reguler membutuhkan penggunaan the fungsi kata kunci, dengan sintaks yang lebih verbose, seperti yang ditunjukkan dalam contoh ini:

fungsimenambahkan(a, b) {
kembali a + b;
}

Dalam contoh ini, fungsi kata kunci mendefinisikan fungsi biasa yang juga menggunakan kurung kurawal dan kembali penyataan.

Fungsi reguler lebih berguna untuk sintaks kompleks yang membutuhkan banyak pernyataan atau ekspresi. Sebaliknya, fungsi panah menggunakan sintaks yang lebih ringkas yang dapat membuat kode Anda lebih mudah dibaca dan dipahami.

2. Perbedaan Lingkup

Istilah "pelingkupan" menjelaskan bagaimana variabel internal dan fungsi dapat diakses. Dalam JavaScript, Anda menentukan dan mengakses variabel dan fungsi di seluruh kode Anda menggunakan pelingkupan. Mereka berbeda pelingkupan dapat secara signifikan memengaruhi cara Anda menulis dan menggunakan JavaScript panah dan fungsi reguler.

Dalam pelingkupan, bagaimana fungsi panah menangani ini kata kunci berbeda secara signifikan dari fungsi normal. Fungsi reguler mendefinisikan ini kata kunci sendiri; oleh karena itu, ini dapat berubah tergantung pada konteks di mana Anda menjalankan fungsi tersebut.

Di sisi lain, karena mereka tidak menentukan ini kata kunci, fungsi panah menggunakan hal yang sama ini sebagai ruang lingkup statis yang mengelilinginya.

Untuk melihat perbedaannya, lihat contoh berikut. Katakanlah Anda memiliki orang objek dengan a nama properti dan metode yang disebut sayName() yang mencatat nama orang tersebut menggunakan fungsi biasa:

const orang = {
 nama: 'Yohanes,'
 sayName: fungsi() {
menghibur.catatan(ini.nama);
 }
};
person.sayName(); // mencatat 'John'

Di sini, fungsi sayName() reguler adalah metode dari objek person dan the ini kata kunci di dalam fungsi itu merujuk ke objek orang itu.

Sekarang mari kita coba hal yang sama dengan fungsi panah:

const orang = {
 nama: 'Yohanes',
 sayName: () => {
menghibur.catatan(ini.nama);
 }
};
person.sayName(); // log tidak terdefinisi

Karena fungsi panah digunakan dalam sayName() metode tidak mendefinisikan sendiri ini kata kunci, ia menggunakan the ini lingkup statis yang mengelilinginya. Dalam hal ini, itulah cakupan global dari instance.

Akibatnya, ketika Anda menelepon orang.sayName(), Anda mendapatkan belum diartikan daripada "Yohanes." Ini secara signifikan dapat memengaruhi cara Anda menulis dan menggunakan fungsi dalam kode Anda.

3. Gunakan Kasus dan Praktik Terbaik

Fungsi reguler lebih cocok untuk fungsi yang membutuhkannya sendiri ini kata kunci, seperti metode dalam suatu objek.

Fungsi panah lebih cocok untuk pemrograman fungsional dan panggilan balik yang tidak diperlukan ini kata kunci.

4. Perbedaan Binding Fungsi

Pengikatan fungsi adalah istilah yang digunakan untuk menggambarkan hubungan antara ini kata kunci dan fungsi dalam kode Anda. Variasi pengikatan fungsi antara fungsi panah dan fungsi normal dapat sangat memengaruhi cara Anda membuat dan menggunakan fungsi panah.

Menggunakan ini kata kunci membuatnya unik dalam fungsi biasa dan dikaitkan dengan berbagai objek berdasarkan metode yang digunakan untuk memanggil fungsi tersebut. Pengikatan fungsi adalah salah satu perbedaan terpenting antara fungsi reguler dan fungsi panah.

Sebaliknya, fungsi panah tidak memiliki ini kata kunci; sebaliknya, mereka mendapatkannya dari ruang lingkup sekitarnya.

Mari kita lihat contoh untuk lebih memahami perbedaan ini. Asumsikan Anda memiliki orang objek dengan a nama bidang dan metode yang disebut sayName() yang menggunakan fungsi reguler untuk mencatat nama orang tersebut:

const orang = {
 nama: 'Yohanes',
 sayName: fungsi() {
menghibur.catatan(ini.nama);
 }
};
const Orang lain = {
 nama: 'Jane'
};
person.sayName.call (anotherPerson); // mencatat 'Jane'

Dalam contoh ini, Anda memanggil objek orang tersebut sayName() metode dengan nilai orang lain menggunakan panggilan() metode. Karena itu, para sayName() metode, ini, kata kunci terikat ke orang lain objek, dan mencatat "Jane" daripada "Yohanes."

Sekarang mari kita gunakan hal yang sama dengan fungsi panah:

const orang = {
 nama: 'Yohanes',
 sayName: () => {
menghibur.catatan(ini.nama);
 }
};
const Orang lain = {
 nama: 'Jane'
};
person.sayName.call (anotherPerson); // log tidak terdefinisi

Sejak sayName() teknik tidak memiliki kata kuncinya sendiri, Anda menggunakan fungsi panah di dalamnya dalam contoh ini. Dalam hal ini, fungsi panah mewarisi properti dari lingkup sekitarnya, yang merupakan lingkup global.

Ini berarti bahwa ketika Anda menjalankan person.sayName.call (anotherPerson), fungsi panah ini kata kunci tetap menjadi objek global, dan belum diartikan menggantikan Jane dalam log.

Jika Anda perlu mengikat suatu fungsi ke yang spesifik ini nilai, fungsi biasa mungkin lebih disukai. Namun, jika Anda tidak perlu mengikat suatu fungsi ke fungsi tertentu ini nilai, fungsi panah mungkin lebih pendek dan lebih mudah dipahami.

5. Pengembalian Implisit

Fungsi panah memiliki fitur pengembalian implisit. Jika isi fungsi terdiri dari satu ekspresi tunggal, fungsi akan mengembalikan ekspresi tersebut.

Sebagai contoh:

const ganda = (X) => X * 2;

Fungsi panah ini mengembalikan ganda dari parameter. Anda tidak perlu menggunakan eksplisit kembali kata kunci karena badan fungsi hanya memiliki satu ekspresi.

6. Perbedaan Kompatibilitas

Perbedaan kompatibilitas mengacu pada fungsi panah tambahan ECMAScript 6, yang mungkin tidak berfungsi dengan browser atau lingkungan lama. Di sisi lain, fungsi reguler telah ada sejak awal JavaScript dan didukung secara luas.

Berikut adalah ilustrasi fungsi panah yang mungkin tidak berfungsi dalam kondisi yang lebih mapan:

const tambahkan = (a, b) => a + b;

Berikut ini adalah fungsi reguler serupa yang seharusnya berfungsi di sebagian besar situasi:

fungsimenambahkan(a, b) {
kembali a + b;
}

Gunakan fungsi reguler daripada fungsi panah saat menargetkan lingkungan lama untuk memastikan kompatibilitas. Namun, fungsi panah dapat memberikan sintaks yang lebih mudah dipahami dan lebih padat saat bekerja dengan browser dan lingkungan modern.

Memilih Antara Fungsi Panah dan Fungsi Reguler di JavaScript

Dalam JavaScript, panah dan fungsi reguler memiliki fitur dan aplikasi yang berbeda. Fungsi panah memiliki sintaks sederhana, mewarisi ini istilah kata kunci dari konteks penggunaannya sementara fungsi reguler lebih mudah beradaptasi dan dapat menangani situasi yang lebih kompleks.

Sangat penting untuk mengetahui perbedaannya dan cara menggunakannya sesuai kebutuhan kode Anda. Saat memilih jenis fungsi yang akan digunakan, Anda juga harus mempertimbangkan perbedaan kompatibilitas.

Pada akhirnya, panah JavaScript dan fungsi reguler adalah alat canggih yang membantu Anda menulis kode yang lebih bersih dan lebih efisien.