Tahun 2015 dan ECMAScript 6 (atau ES6) keluar, menambahkan beberapa fitur yang paling berguna untuk JavaScript, seperti fungsi panah. Fungsi ini menawarkan sintaks yang ringkas dan alternatif yang menarik untuk sintaks fungsi tradisional. Pada artikel ini, kita akan melihat apa itu fungsi panah, manfaat menggunakannya, dan bagaimana memanfaatkannya dalam pengembangan JavaScript modern.
Apa Itu Fungsi Panah?
Fungsi panah (atau fungsi panah gemuk) adalah sintaks baru untuk menulis fungsi dalam JavaScript. Fungsi ini dikenal sebagai ekspresi fungsi dan dilambangkan dengan sintaks => (panah). Fungsi panah lebih pendek daripada ekspresi atau deklarasi fungsi tradisional dan secara leksikal mengikat nilai ini.
 |
| sumber: minarsih.com |
Sintaks Dasar
Fungsi panah memiliki sintaks yang mirip dengan sintaks fungsi tradisional:
const add = (a, b) => a + b;
Di sini fungsi penjumlahan mengambil dua input, a dan b, dan mengembalikan jumlahnya. Fakta bahwa fungsi panah menghilangkan kata kunci fungsi dan hanya membutuhkan tubuh jika ada pernyataan tunggal yang mengikutinya membuatnya ringkas dan jelas.
Fungsi Argumen Tunggal
Untuk fungsi panah dengan parameter tunggal, tanda kurung di sekitar parameter bersifat opsional:
const square = x => x * x;
Tanpa Parameter
Jika fungsi tidak menerima parameter, maka Anda memerlukan sepasang tanda kurung kosong:
const greet = () => console.log('Hello, World!');
Badan Blok
Mari kita lanjutkan dan jelajahi bagaimana jika Anda harus mengimplementasikan logika yang lebih rumit yang membutuhkan beberapa pernyataan, dalam hal ini Anda dapat menggunakan badan blok, Anda akan membungkus badan fungsi dengan tanda kurung kurawal. Dalam hal ini, Anda perlu menggunakan kata kunci return untuk mengembalikan sebuah nilai:
const multiply = (a, b) => {
const result = a * b;
return result;
};
Keuntungan dari Fungsi Panah
Berikut ini beberapa manfaat fungsi panah yang menjadikannya pilihan utama dalam pengembangan JavaScript modern:
1. Keringkasan
Fungsi ini mengurangi kode boilerplate dan membuatnya lebih ringan untuk membuat/memuat fungsi. Mendemonstrasikan berbagai bentuk pengurangan larik yang sangat berguna untuk pemanggilan balik dan parabola pemrograman fungsional.
2. Leksikal ini
Fungsi panah memberikan beberapa keuntungan, salah satunya adalah pengikatan ini. Tidak seperti fungsi tradisional, yang membangun konteks ini sendiri, fungsi panah mewarisi ini dari cakupan leksikal di sekitarnya. Hal ini menghilangkan kebutuhan akan hal-hal seperti self = this atau bind sebagai solusi.
Sebagai contoh:
function Timer() {
this.seconds = 0;
setInterval(() => {
this.seconds++;
console.log(this.seconds);
}, 1000);
}
const timer = new Timer();
Pada kode di atas, karena kita berada di dalam objek Timer menggunakan fungsi panah di dalam callback setInterval dan meminta melalui konteks objek Timer ini
3. Pemanggilan Kembali yang Lebih Bersih
Satu tempat di mana fungsi panah sangat berguna adalah untuk menyediakan pemanggilan balik yang lebih bersih dan ringkas. Sebagai contoh:
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
Keterbatasan Fungsi Panah
Sintaks fungsi panah adalah singkatan yang bagus untuk banyak kasus, tetapi tidak untuk semua kasus! Penting untuk mengetahui apa yang tidak bisa dilakukannya:
1. Kurangnya argumen Objek
Bisa dibilang, yang paling penting adalah fakta bahwa fungsi panah tidak memiliki objek argumennya sendiri. Jika Anda harus meneruskan argumen ke fungsi, Anda harus menggunakan fungsi tradisional.
function showArgs() {
console.log(arguments);
}
showArgs(1, 2, 3); // [1, 2, 3]
2. Tidak cocok untuk Metode
Fungsi panah tidak dapat digunakan untuk mendefinisikan metode objek karena fungsi tersebut tidak membuatnya sendiri:
const person = {
name: 'Alice',
greet: () => {
console.log(`Hello, my name is ${this.name}`);
}
};
person.greet(); // Hello, my name is undefined
3. Tidak Dapat Digunakan dalam Konstruktor
Fungsi ini tidak mengikat nilai ini yang terpisah dan akan melemparkan kesalahan jika dicoba dieksekusi dengan new.
Kesimpulan
Fungsi panah JavaScript adalah fitur baru dalam JavaScript yang memungkinkan pengembang untuk menulis kode yang lebih bersih dan efisien. Fungsi panah memiliki sintaks yang kecil, dan secara leksikal memiliki cakupan yang sangat baik sehingga dapat digunakan dalam banyak kasus, terutama saat berurusan dengan pemanggilan balik dan pemrograman fungsional. Namun, dengan mengetahui keterbatasannya akan membantu Anda menghindari beberapa kesalahan umum. Penggunaan fungsi panah yang tepat memungkinkan pengembang untuk memanfaatkan fitur-fitur ES6 untuk menulis kode yang efisien dan mudah dipelihara.
kembali ke>>>> Memahami ES6: Fitur Baru dalam JavaScript