Почему пора перестать использовать JavaScript IIFE

Немедленно вызываемая функция (Immediately Invoked Function Expression — IIFE) в JavaScript — это конструкция, позволяющая вызывать функцию непосредственно после ее определения.

В этой статье мы разберемся, почему стоит отказаться от использования IIFE, несмотря на ее былые заслуги.

Мы можем объявлять переменные внутри автономных блоков

С тех пор как появился стандарт ES6, мы можем объявлять переменные и константы внутри блока с помощью let и const. Вместе с этим стандартом также появилась возможность выделять переменные и константы в автономные блоки, недоступные извне.

Например:

{  let x = 1; }

Тогда x не будет доступен извне. Это явно лучше, чем:

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

Теперь, когда ES6 поддерживают практически все современные браузеры, мы должны прекратить использование IIFE для отделения переменных от внешнего мира. Другой способ изолировать переменные — это модули, с поддержкой которых теперь тоже нет никаких проблем. Пока мы не экспортируем их, они не будут доступны для других модулей.

Мы можем избавиться почти от всех замыканий

Замыкание — это механизм, при котором функция запоминает свои внешние переменные и может получить к ним доступ. Если внутри функции мы создадим еще одну и вернем ее, то возвращаемая функция сможет обращаться к внешним переменным, которые являются внутренними для внешней функции.

Например, здесь мы можем получить некоторые побочные эффекты:

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

Опять же, теперь нет смысла городить весь этот огород, поскольку у нас есть автономные блоки и модули для изоляции данных. Мы можем просто поместить все это в свой собственный модуль, тогда нам не нужно будет беспокоиться о доступе к данным.

Замыкания вызывают побочные эффекты, что не очень хорошо, так как лучшие практики и здравый смысл предписывают нам избегать их, когда это возможно. Они затрудняют тестирование функций, которые в этом случае не являются чистыми.

Кроме того, не стоит плодить вложенные функции, когда этого можно избежать: с ними код становится более запутанным, чем без них.
Лучшая альтернатива — заменять их на модули:

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

В приведенном выше коде мы имеем такое же объявление переменной count и экспортируем функцию id (), чтобы она была доступна для других модулей. Так мы скрываем count и открываем id (), как и хотели, только без использования IIFE. В результате мы получаем меньшую вложенность и избавляемся от необходимости определять другую функцию и запускать ее.

Мы можем по-другому создавать алиасы для переменных

Мы могли бы написать такое:

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

Но теперь нет необходимости использовать IIFE для создания алиасов. Используя модули, мы просто можем импортировать переменную под другим именем, тем самым создавая для нее алиас.

И тогда достаточно написать:

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

Кроме того, не стоит добавлять объекту window новые свойства, так как это загрязняет глобальную область видимости.

Мы можем легко получить глобальный объект

С появлением globalThis нам не нужно беспокоиться об имени глобального объекта в различных окружениях, поскольку он становится стандартом.

Мы могли бы использовать IIFE для захвата глобального объекта:

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

Но теперь в этом нет необходимости. Да и раньше можно было обойтись без этого, просто написав следующую строку:

const globalObj = self || window || global;

Если быть более точным, то можно написать вот что:

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'); };

И тогда можно не добавлять дополнительный вызов функции и вложенность, которые появляются при использовании IIFE.

Мы можем проще выполнять минификацию

С модулями JavaScript нам больше не нужно отделять остальной код от IIFE, чтобы выполнить минификацию наших файлов должным образом.

Webpack, Browserify, Parcel, Rollup и так далее могут работать с модулями должным образом, поэтому мы должны использовать их для создания более чистого кода.

Вывод

Пора перестать использовать IIFE в нашем коде. Это добавляет лишние функции и избыточную вложенность.

Кроме того, сейчас это анахронизм: IIFE применялись еще до появления и широкого распространения практики использования модулей в JavaScript. В 2020 году для разделения кода мы должны использовать модули и автономные блоки.

Для предотвращения доступа извне к переменным, находящимся внутри модуля, мы можем использовать блочные области видимости.