Sederhananya dari nama lengkapnya, Ekspresi Fungsi Segera Dipanggil, itu adalah fungsi yang berjalan segera setelah didefinisikan
IIEF terkenal untuk melindungi ruang lingkup variabel. Tapi apa sebenarnya artinya?
Anda akan tahu jawabannya di artikel ini. Mari selami lebih dalam
PenutupanVariabel yang didefinisikan dalam IIFE tidak dapat diakses dari luar. Atau ketika Anda menggunakan let atau (function ($) {
// You’re safe to use jQuery here
})(jQuery);0 untuk mendeklarasikan variabel, itu hanya dapat diakses di blok terlampir
Namun, terkadang Anda mungkin perlu mengubah nilai variabel tersebut. Apa itu mungkin?
Begini caranya
Anda tahu penutupan, bukan? . Membuat penutupan tidak lain adalah mendefinisikan fungsi di dalam fungsi lain dan memaparkannya
Saat menggabungkan penutupan dengan IIFE, Anda mendapatkan dua keuntungan besar
Yang pertama adalah cakupan variabel diamankan untuk mencegah perilaku tak terduga
Yang kedua, Anda dapat memodifikasi variabel di dalam fungsi dari luar. Sepertinya kita melanggar manfaat pertama. Kecuali kita tidak. Karena Anda tidak dapat mengubah nilai variabel secara langsung tetapi hanya dari fungsi yang terbuka. Dan itu aman
const user = (function() {let name = ‘anonymous’; return {
getName: _ => name,
setName: newName => name = newName
};
})();console.log(user.getName()) // anonymous
user.setName(‘Amy’);
console.log(user.getName()); // Amy_
Variabel (function ($) {
// You’re safe to use jQuery here
})(jQuery);1 bersifat pribadi, yang berarti kita hanya dapat mengaksesnya di dalam (function ($) {
// You’re safe to use jQuery here
})(jQuery);2 IIFE. Namun, karena kami menggunakan penutupan di sini, kami dapat memodifikasinya dari luar melalui metode (function ($) {
// You’re safe to use jQuery here
})(jQuery);3
Menggunakan banyak pustaka JavaScript dapat menyebabkan konflik karena beberapa di antaranya mungkin mengekspor objek dengan nama yang sama
Katakanlah Anda menggunakan jQuery. Kita semua tahu itu mengekspor (function ($) {
// You’re safe to use jQuery here
})(jQuery);_4 sebagai objek utamanya. Jadi, jika ada perpustakaan di dependensi Anda yang menggunakan (function ($) {
// You’re safe to use jQuery here
})(jQuery);4 sebagai objek yang diekspor juga, konflik akan terjadi
Untungnya, Anda dapat menggunakan IIFE untuk mengatasi masalah ini dengan menerapkan teknik aliasing
// You’re safe to use jQuery here
})(jQuery);
Dengan membungkus kode Anda di dalam IIFE yang menggunakan (function ($) {
// You’re safe to use jQuery here
})(jQuery);6 sebagai argumen, kami akan memastikan bahwa simbol (function ($) {
// You’re safe to use jQuery here
})(jQuery);4 sekarang merujuk ke (function ($) {
// You’re safe to use jQuery here
})(jQuery);6, bukan pustaka lain
ES6 telah memperkenalkan let dan (function ($) {
// You’re safe to use jQuery here
})(jQuery);0 untuk mendefinisikan variabel lebih aman. Menggunakan (function () {
var greeting = ‘Good morning! How are you today?’;
console.log(greeting); // Good morning! How are you today?
})();console.log(greeting); // error: Uncaught ReferenceError: greeting is not defined_1 dapat menyebabkan hasil yang tidak terduga karena cakupannya rentan
Tetapi bagaimana jika lingkungan produksi belum mendukung ES6?
Jangan khawatir. Anda masih memiliki IIFE, Ekspresi Fungsi Segera Dipanggil, untuk melayani tujuan yang sama
(function () {var greeting = ‘Good morning! How are you today?’;
console.log(greeting); // Good morning! How are you today?
})();console.log(greeting); // error: Uncaught ReferenceError: greeting is not defined
Seperti yang Anda lihat pada contoh di atas, apa yang terjadi dalam lingkup IIFE, tetap berada dalam lingkup IIFE. Anda tidak dapat menggunakan variabel yang ditentukan di dalam IIFE dari luar
Indeks LingkaranMenjalankan tugas asinkron di dalam satu lingkaran dapat menyebabkan hasil yang tidak terduga
Ambil menggunakan (function () {
var greeting = ‘Good morning! How are you today?’;
console.log(greeting); // Good morning! How are you today?
})();console.log(greeting); // error: Uncaught ReferenceError: greeting is not defined_4 misalnya
setTimeout(_ => console.log(`We’re at ${i}`), 100);
}
Anda mengharapkan hasilnya seharusnya
We’re at 0We’re at 1
We’re at 2
Tapi itu sebenarnya
We’re at 3We’re at 3
We’re at 3
Mengapa? . Loop mungkin selesai sebelum waktu itu, yang berarti indeks (function () {
var greeting = ‘Good morning! How are you today?’;
console.log(greeting); // Good morning! How are you today?
})();console.log(greeting); // error: Uncaught ReferenceError: greeting is not defined7 sebenarnya telah mencapai (function () {
var greeting = ‘Good morning! How are you today?’;
console.log(greeting); // Good morning! How are you today?
})();console.log(greeting); // error: Uncaught ReferenceError: greeting is not defined8. Hasilnya, semua (function () {
var greeting = ‘Good morning! How are you today?’;
console.log(greeting); // Good morning! How are you today?
})();console.log(greeting); // error: Uncaught ReferenceError: greeting is not defined_5 akan mencetak hasil akhir dari (function () {
var greeting = ‘Good morning! How are you today?’;
console.log(greeting); // Good morning! How are you today?
})();console.log(greeting); // error: Uncaught ReferenceError: greeting is not defined7, (function () {
var greeting = ‘Good morning! How are you today?’;
console.log(greeting); // Good morning! How are you today?
})();console.log(greeting); // error: Uncaught ReferenceError: greeting is not defined8
Kita dapat mengatasi masalah ini dengan melakukan panggilan (function () {
var greeting = ‘Good morning! How are you today?’;
console.log(greeting); // Good morning! How are you today?
})();console.log(greeting); // error: Uncaught ReferenceError: greeting is not defined4 ke IIFE
(function(index) {
setTimeout(_ => console.log(`We’re at ${index}`), 100);
})(i);
}
Hasilnya sekarang benar
We’re at 0We’re at 1
We’re at 2
Namun, ini adalah usia ES6, kita dapat menggunakan kata kunci let untuk menyederhanakan kode
for (let i = 0; i < 3; i++) {setTimeout(_ => console.log(`We’re at ${i}`), 100);
}Pemikiran Akhir
IIFE adalah cara yang baik untuk mengamankan ruang lingkup. Anda dapat menggunakan IIFE untuk mencegah masalah definisi variabel global, variabel alias, melindungi data pribadi, dan menghindari konflik penggunaan banyak pustaka yang mengekspor nama objek yang sama
Meskipun Anda dapat mengganti beberapa penggunaan IIFE dengan fitur ES6, Anda tetap harus mempelajari IIFE untuk memahami dengan jelas cara kerja lingkup dalam JavaScript. Selain itu, Anda tidak dapat segera mengadaptasi proyek lama ke ES6. Jadi, IIFE masih berperan besar