Fungsi Arrow vs. Fungsi Reguler dalam JavaScript

Seperti hampir setiap bahasa pemrograman modern, JavaScript menawarkan cara untuk membuat fungsi agar kode dapat digunakan kembali. Bagi mereka yang tidak terbiasa dengan bahasa tersebut, ada dua cara berbeda untuk mendeklarasikan fungsi dalam JavaScript.

Awalnya, the fungsi kata kunci digunakan, dan kemudian, sintaks panah dibuat. Meskipun berbeda dalam aksesibilitas cakupan, kata kunci fungsi dan sintaks panah menghasilkan hasil yang serupa.

Ketidakmampuan untuk membedakan keduanya dapat menyebabkan masalah dan menyebabkan penggunaan yang salah. Merupakan keharusan bagi pengembang JS modern untuk memahami bagaimana setiap deklarasi fungsi memengaruhi ruang lingkup dan visibilitas.

Apa Fungsi Panah JavaScript?

Fungsi panah JavaScript adalah cara alternatif untuk mendefinisikan fungsi yang tidak menggunakan default fungsi kata kunci:

Baca Juga:

Mau Berkarir di Dunia blockchain? Ini Dia 10 Skill yang Harus Kamu Dalami!

function logMessage(message) {
    console.log(message);
}

const logMessage = (message) => {
console.log(message);
}const logMessage = message => console.log(message);

Di atas, Anda dapat melihat pesan yang sama ditulis dalam tiga cara berbeda. Yang pertama menggunakan metode deklarasi fungsi biasa. Dua berikutnya menunjukkan dua cara untuk menggunakan fungsi panah ES6.

JavaScript pertama kali mengadopsi sintaks fungsi panah dengan merilis standar ECMAScript 2015. Fungsi panah menawarkan cara yang bersih dan ringkas untuk membuat fungsi dengan cepat dan solusi menarik untuk beberapa masalah cakupan jangka panjang dalam JavaScript.

Fitur-fitur ini dengan cepat membuat fungsi panah menjadi hit di antara banyak pengembang. Pemrogram yang mencari basis kode JavaScript modern kemungkinan besar akan menemukan fungsi panah sebagai fungsi biasa.

Apa Perbedaan Fungsi Panah Dengan Fungsi Biasa di JavaScript?

Sekilas, fungsi panah tampaknya tidak jauh berbeda dari fungsi yang dideklarasikan menggunakan kata kunci function. Di luar sintaks, keduanya merangkum serangkaian tindakan yang dapat digunakan kembali yang dapat dipanggil dari tempat lain dalam kode.

Meskipun ada kesamaan di antara keduanya, ada beberapa perbedaan yang perlu diperhatikan pengembang.

Perbedaan Lingkup

Setiap kali fungsi reguler dideklarasikan dalam JavaScript, fungsi tersebut berfungsi sebagai penutup yang membuat ruang lingkupnya sendiri. Ini dapat menyebabkan masalah saat menggunakan fungsi khusus tertentu seperti setTimeout Dan setInterval.

Sebelum ES6, ada banyak solusi yang akan mengangkat item ke tingkat cakupan yang lebih tinggi untuk digunakan dalam panggilan balik. Peretasan ini berhasil, tetapi seringkali sulit untuk dipahami, dan dapat menyebabkan masalah dengan penimpaan variabel tertentu.

Fungsi panah memecahkan kedua masalah dengan cara yang sederhana dan elegan. Saat fungsi panah digunakan sebagai bagian dari callback, fungsi tersebut memiliki akses ke cakupan yang sama dengan fungsi asal pemanggilannya.

Ini memungkinkan fungsi untuk digunakan sebagai panggilan balik tanpa kehilangan akses ke konteks di mana peristiwa asli dipanggil. Sebagai tes sederhana untuk menunjukkan prinsip ini dalam tindakan, Anda dapat mengatur fungsi perpesanan tertunda seperti di bawah ini:

function delayedMessage(message, delay) {
 
    setTimeout(function(message) {
        console.log(message);
    }, delay);

}

delayedMessage(“Hello World”, 1000);

Fungsinya sederhana, menerima pesan Dan menunda dalam milidetik. Setelah penundaan berlalu, itu harus mencatat pesan ke konsol. Namun, ketika kode dijalankan, belum diartikan akan dicatat ke konsol alih-alih pesan yang diteruskan.

Saat fungsi panggilan balik dijalankan, ruang lingkup berubah dan pesan asli tidak lagi dapat diakses. Menggunakan pesan dari dalam penutupan memerlukan pesan untuk diangkat ke variabel global, yang dapat mengakibatkannya ditimpa sebelum panggilan balik.

Fungsi panah adalah perbaikan yang tepat untuk masalah ini. Jika Anda mengganti argumen pertama untuk setTimeoutruang lingkup dapat dipertahankan, dan fungsi akan memiliki akses ke pesan yang diteruskan delayMessage.

function delayedMessage(message, delay) {
 
    setTimeout(() => {
        console.log(message);
    }, delay);

}

delayedMessage(“Hello World”, 1000);

Sekarang, ketika dieksekusi, file delayMessage fungsi akan mencatat pesan. Selain itu, ini memungkinkan banyak pesan untuk diantrekan dengan penundaan yang berbeda, dan semuanya akan tetap terjadi pada waktu yang tepat.

Ini karena fakta bahwa setiap kali delayMessage digunakan, itu menghasilkan ruang lingkupnya sendiri dengan salinannya sendiri dari fungsi panah internal.

Keterbacaan Kode

Sementara fungsi panah berguna sebagai panggilan balik, mereka juga digunakan untuk menjaga kode tetap bersih dan ringkas. Pada bagian di atas, Anda dapat melihat bahwa menggunakan fungsi panah membuat jelas apa yang akan terjadi saat delayMessage fungsi disebut.

Karena fungsi menjadi lebih kompleks, memiliki sedikit kejelasan dapat membuat kode jauh lebih mudah dibaca. Saat menyusun objek, ini dapat membuat kode lebih sederhana saat menambahkan fungsi singkat:

class counter {
    _count = 0;
    increment = () => {
        this._count += 1;
    }
    decrement = () => {
        this._count -= 1;
    }
    count = () => {
        return this._count;
    }
}

let ct = new counter();

Peran dalam Pemrograman Berorientasi Objek

Sementara fungsi panah JavaScript merupakan bagian integral dari pemrograman fungsional, mereka juga memiliki tempat dalam pemrograman berorientasi objek. Fungsi panah dapat digunakan dalam deklarasi kelas:

class orderLineItem {
    _LineItemID = 0;
    _Product = {};
    _Qty = 1;

constructor(product) {
this._LineItemID = crypto.randomUUID();
this._Product = product
}

changeLineItemQuantity = (newQty) => {
this._Qty = newQty;
}
}

Menggunakan fungsi panah untuk mendeklarasikan metode dalam deklarasi kelas tidak mengubah perilaku fungsi di dalam kelas. Di luar kelas, bagaimanapun, itu mengekspos fungsi, yang memungkinkan untuk digunakan oleh kelas lain.

Fungsi reguler tidak dapat diakses di luar deklarasi kelas tanpa dipanggil. Ini berarti bahwa sementara deklarasi kelas lain dapat mewarisi fungsi ini, mereka tidak dapat diakses secara langsung untuk membuat kelas lain.

Kapan Anda Harus Menggunakan Fungsi Panah JavaScript?

Fungsi panah JavaScript adalah fitur yang sangat kuat yang memberi pengembang lebih banyak kontrol atas ruang lingkup yang dapat diakses oleh suatu fungsi. Mengetahui kapan callback harus memiliki akses ke cakupan induknya, dan kapan seharusnya tidak, dapat membantu developer menentukan jenis deklarasi yang akan digunakan.

Fungsi panah memberi pemrogram cara yang jelas dan ringkas untuk menulis panggilan balik tanpa memaparkan bagian ruang lingkup yang harus disembunyikan. Mereka juga memungkinkan pembuatan komposisi yang bersih dan sederhana, yang selanjutnya memungkinkan pemrograman fungsional dalam JavaScript.

Pengembang JS harus menyadari perbedaan antara kedua sintaks dan memperhatikan sintaks mana yang sesuai saat mendeklarasikan fungsinya.