Mengapa Anda Harus Berhati-hati Menggunakan Fungsi Arrow di JavaScript
Table of content:
Sintaks fungsi panah tiba dengan rilis ECMAScript 2015, juga dikenal sebagai ES6. Saat ini, fungsi panah telah menjadi fitur favorit banyak programmer JavaScript. Kecintaan pada fungsi panah ini disebabkan oleh sintaksis yang ringkas dan perilaku langsung dari kata kunci “ini”.
Tetapi fungsi panah memiliki beberapa kelemahan. Pelajari tentang perbedaan utama antara fungsi panah dan fungsi reguler dan cari tahu mengapa, dalam kebanyakan kasus, sebaiknya Anda tetap menggunakan fungsi reguler.
1. Anda Harus Menentukan Fungsi Panah Sebelum Menggunakannya
Anda tidak dapat mengangkat fungsi panah. Aturan pengangkatan default JavaScript memungkinkan Anda memanggil fungsi sebelum mendefinisikannya, tetapi tidak demikian halnya dengan fungsi panah. Jika Anda memiliki file JavaScript dengan fungsi, ini berarti semua kode penting akan berada di bagian bawah file.
Baca Juga:
Pertimbangkan kode JavaScript berikut misalnya:
const doubleNumbers = (numbers) {
numbers.map(n => n * 2)
}const halveNumbers = (numbers) {
numbers.map(n => n / 2)
}
const sumNumbers = (numbers) {
numbers.reduce((sum, n) => {
return sum + n;
}, 0)
}
const numbers = [1, 20, 300, 700, 1500]
const doubled = doubleNumbers(numbers)
console.log(halveNumbers(doubled))
console.log(sumNumbers(numbers))
Pada blok kode di atas, kode penting ada di bagian bawah. Semua fungsi pembantu ditentukan sebelum titik eksekusi. Harus membuat fungsi JavaScript Anda di bagian atas file dapat merepotkan karena Anda harus menggulir ke bawah untuk melihat kode sebenarnya yang berfungsi.
Jika Anda memindahkan fungsi pembantu ke bawah dan kode aktual ke atas, Anda akan mendapatkan kesalahan referensi. Runtime memperlakukan fungsi sebagai variabel. Jadi, Anda harus mendefinisikannya terlebih dahulu sebelum mengakses atau menjalankannya. Tetapi jika Anda mengubah semua fungsi panah menjadi fungsi biasa (dengan fungsi kata kunci), maka kode Anda akan berfungsi dengan baik. Pada saat yang sama, kode penting tetap berada di bagian atas tempat Anda dapat menemukannya.
Ini adalah salah satu masalah terbesar dengan menggunakan fungsi panah. Mereka tidak menunjukkan perilaku hosting apa pun. Dengan kata lain, Anda harus mendefinisikannya sebelum tempat sebenarnya Anda akan menggunakannya. Di sisi lain, Anda dapat mengangkat fungsi biasa.
2. Fungsi Panah Mungkin Membingungkan Beberapa Orang
Alasan lain untuk menggunakan fungsi reguler daripada fungsi panah adalah keterbacaan. Fungsi reguler lebih mudah dibaca karena secara eksplisit menggunakan the fungsi kata kunci. Kata kunci ini mengidentifikasi bahwa kode yang dimaksud adalah fungsi.
Di sisi lain, Anda menetapkan fungsi panah ke variabel. Sebagai seorang pemula, ini mungkin membingungkan Anda untuk berpikir bahwa kode tersebut adalah variabel, bukan fungsi.
Bandingkan kedua fungsi di bawah ini:
const halveNumbers = (numbers) => {
return numbers.map(n => n / 2)
}function halveNumbers(numbers) {
return numbers.map(n => n / 2)
}
Sekilas, Anda dapat dengan mudah mengetahui bahwa potongan kode kedua adalah sebuah fungsi. Sintaks memperjelas bahwa kode adalah fungsi. Namun, yang pertama ambigu—Anda mungkin tidak mudah mengetahui apakah itu variabel atau fungsi.
3. Anda Tidak Dapat Menggunakan Fungsi Panah sebagai Metode
Saat Anda menggunakan fungsi panah, file ini kata kunci sesuai dengan apa pun yang berada di luar hal yang kita di dalam. Dalam kebanyakan kasus, itu adalah objek jendela.
Pertimbangkan objek berikut:
const person = {
firstName: "Kyle",
lastName: "Cook",
printName: () => {
console.log(`${this.firstName}` `${this.lastName}` )
}
}person.printName()
Jika Anda menjalankan kode, Anda akan melihat bahwa browser mencetak belum diartikan untuk nama depan dan nama belakang. Karena kita menggunakan fungsi panah, ini kata kunci sesuai dengan objek jendela. Juga, tidak ada nama depan atau nama keluarga properti didefinisikan di sana.
Untuk mengatasi masalah ini, Anda harus menggunakan fungsi reguler sebagai gantinya:
const person = {
firstName: "Kyle",
lastName: "Cook",
printName: function() {
console.log(`${this.firstName}` `${this.lastName}` )
}
}person.printName()
Ini akan bekerja dengan baik karena ini mengacu kepada orang obyek. Jika Anda akan sering melakukan pemrograman berorientasi objek semacam ini, maka Anda harus memastikan bahwa Anda menggunakan fungsi biasa. Fungsi panah tidak akan berfungsi.
Kapan Menggunakan Fungsi Panah
Gunakan fungsi panah terutama di tempat-tempat di mana Anda memerlukan fungsi anonim. Contoh skenario seperti itu adalah berurusan dengan fungsi callback. Lebih baik menggunakan fungsi panah saat menulis panggilan balik karena sintaksnya jauh lebih sederhana daripada menulis fungsi lengkap.
Bandingkan keduanya dan putuskan mana yang lebih mudah:
function halveNumbers(numbers) {
return numbers.map(n => n / 2)
}function halveNumbers(numbers) {
return numbers.map(function(n) {
return n / 2
})
}
Kedua kasus meneruskan fungsi callback ke metode map() . Tapi panggilan balik pertama adalah fungsi panah sedangkan yang kedua adalah fungsi penuh. Anda dapat melihat bagaimana fungsi pertama menggunakan lebih sedikit baris kode daripada fungsi kedua: tiga vs. lima.
Waktu lain untuk menggunakan fungsi panah adalah kapan pun Anda ingin berurusan dengan sintaks “ini” tertentu. Objek “ini” akan berubah tergantung pada apakah Anda menggunakan fungsi biasa atau fungsi panah untuk hal-hal tertentu.
Blok kode berikut mendaftarkan dua event listener “klik” pada objek dokumen. Contoh pertama menggunakan fungsi biasa sebagai panggilan balik, sedangkan yang kedua menggunakan fungsi panah. Di dalam kedua panggilan balik, kode mencatat objek eksekusi (ini) dan target peristiwa:
document.addEventListener("click", function(e) {
console.log("FUNCTION", this, e.target)
})document.addEventListener("click", (e) => {
console.log("ARROW", this, e.target)
})
Jika Anda menjalankan skrip ini, Anda akan melihat bahwa referensi “ini” berbeda untuk keduanya. Untuk fungsi reguler, properti ini mereferensikan dokumen, yang sama dengan e.target Properti. Tapi untuk fungsi panah, ini mereferensikan objek jendela.
Saat Anda menggunakan fungsi biasa sebagai panggilan balik, maka ini akan merujuk ke elemen tempat kami memicu peristiwa tersebut. Tetapi ketika Anda menggunakan fungsi panah, maka kata kunci ini defaultnya adalah objek jendela.
Pelajari Lebih Lanjut Tentang Fungsi Panah vs Fungsi Reguler
Ada beberapa perbedaan halus lainnya antara fungsi reguler dan fungsi panah. Menguasai kedua jenis fungsi tersebut merupakan dasar untuk mendapatkan penguasaan JavaScript. Pelajari kapan menggunakan satu dan kapan menggunakan yang lain; Anda kemudian akan memahami implikasi menggunakan fungsi biasa atau fungsi panah di JavaScript Anda.
Artikel Terkait
