🖐🏿 📢 🧑🏽 Mengapa sekarang saatnya berhenti menggunakan JavaScript IIFE 🏡 👴🏾 🦓

Fungsi Ekspresi Fungsi Segera Diminta (IIFE) dalam JavaScript adalah sebuah konstruk yang memungkinkan Anda untuk memanggil fungsi segera setelah ditetapkan.

gambar

Dalam artikel ini, kita akan mengerti mengapa perlu meninggalkan penggunaan IIFE, meskipun ada kelebihannya.

Kita dapat mendeklarasikan variabel di dalam blok otonom

Karena standar ES6 muncul, kita dapat mendeklarasikan variabel dan konstanta di dalam blok dengan let dan const. Seiring dengan standar ini, juga dimungkinkan untuk mengalokasikan variabel dan konstanta ke dalam blok otonom, tidak dapat diakses dari luar.

Contohnya:

{
 let x = 1;
}

Maka x tidak akan dapat diakses secara eksternal. Ini jelas lebih baik daripada:

(()=>{
 let x = 1;
})();

Sekarang ES6 didukung oleh hampir semua browser modern, kita harus berhenti menggunakan IIFE untuk memisahkan variabel dari dunia luar. Cara lain untuk mengisolasi variabel adalah dengan modul yang sekarang tidak memiliki masalah untuk mendukungnya. Sampai kami mengekspornya, mereka tidak akan tersedia untuk modul lain.

Kita bisa menyingkirkan hampir semua penutupan

Penutupan adalah suatu mekanisme di mana suatu fungsi mengingat variabel eksternal dan dapat mengaksesnya. Jika kita membuat yang lain di dalam fungsi dan mengembalikannya, maka fungsi yang dikembalikan akan dapat mengakses variabel eksternal yang internal ke fungsi eksternal.

Sebagai contoh, di sini kita bisa mendapatkan beberapa efek samping:

const id = (() => {
 let count = 0;
 return () => {
   ++count;
   return `id_${count}`;
 };
})();

Sekali lagi, sekarang tidak masuk akal untuk memagari seluruh taman ini, karena kami memiliki blok dan modul otonom untuk isolasi data. Kita bisa memasukkan semua ini ke modul kita sendiri, maka kita tidak perlu khawatir tentang akses data.

Penutupan menyebabkan efek samping, yang tidak terlalu baik, karena praktik terbaik dan akal sehat memerintahkan kita untuk menghindarinya bila memungkinkan. Mereka menyulitkan untuk menguji fungsi yang tidak bersih dalam kasus ini.

Selain itu, Anda seharusnya tidak menghasilkan fungsi bersarang saat ini dapat dihindari: dengan mereka, kode menjadi lebih membingungkan daripada tanpa mereka.
Alternatif terbaik adalah menggantinya dengan modul:

let count = 0;
export const id = () => {
 ++this.count;
 return `id_${count}`
}

Dalam kode di atas, kami memiliki deklarasi yang sama untuk variabel jumlah dan mengekspor fungsi id () sehingga tersedia untuk modul lain. Jadi kami menyembunyikan count dan membuka id (), seperti yang kami inginkan, hanya tanpa menggunakan IIFE. Sebagai hasilnya, kita mendapatkan lebih sedikit sarang dan menghilangkan kebutuhan untuk mendefinisikan fungsi lain dan menjalankannya.

Kita dapat membuat alias untuk variabel secara berbeda.

Kita bisa menulis ini:

window.$ = function foo() {
 // ...
};(function($) {
 // ...
})(jQuery);

Tapi sekarang tidak perlu menggunakan IIFE untuk membuat alias. Menggunakan modul, kita bisa mengimpor variabel dengan nama yang berbeda, sehingga membuat alias untuknya.

Dan kemudian cukup tulis:

import { $ as jQuery } from "jquery";
const $ = () => {};

Selain itu, Anda tidak boleh menambahkan properti baru ke objek jendela, karena ini mencemari lingkup global.

Kita dapat dengan mudah mendapatkan objek global.

Dengan munculnya globalThis, kita tidak perlu khawatir tentang nama objek global di berbagai lingkungan karena menjadi standar.

Kita bisa menggunakan IIFE untuk menangkap objek global:

(function(global) {
 // ...
})(this);

Tapi sekarang ini tidak perlu. Ya, dan sebelum itu bisa dilakukan tanpa ini, cukup dengan menulis baris berikut:

const globalObj = self || window || global;

Untuk lebih tepatnya, Anda dapat menulis ini:

const getGlobal = () => {
 if (typeof self !== 'undefined') { return self; }
 if (typeof window !== 'undefined') { return window; }
 if (typeof global !== 'undefined') { return global; }
 throw new Error('unable to locate global object');
};

Dan kemudian Anda tidak dapat menambahkan panggilan fungsi tambahan dan bersarang yang muncul saat menggunakan IIFE.

Kita dapat membuat minifikasi lebih mudah

Dengan modul JavaScript, kita tidak perlu lagi memisahkan sisa kode dari IIFE untuk memperkecil file kita dengan benar.

Webpack, Browserify, Parcel, Rollup dan sebagainya dapat bekerja dengan modul dengan benar, jadi kita harus menggunakannya untuk membuat kode yang lebih bersih.

Kesimpulan

Saatnya untuk berhenti menggunakan IIFE dalam kode kami. Ini menambahkan fungsionalitas ekstra dan bersarang berlebihan.

Selain itu, sekarang ini adalah anakronisme: IIFE digunakan bahkan sebelum munculnya dan penggunaan luas modul dalam JavaScript. Pada tahun 2020, kita harus menggunakan modul dan blok otonom untuk memisahkan kode.

Untuk mencegah akses eksternal ke variabel di dalam modul, kita dapat menggunakan blok lingkup.