Прежде всего, эта история основана на Стивене Кертисе -33 Основы, которые должен знать каждый разработчик Javascript, и вы можете прочитать ее здесь. Поэтому я решил изучить и объяснить эти концепции одну за другой.

№8. IIFE и модуль

IIFE

Если вы хотите создать переменную, к которой нельзя получить глобальный доступ, вы можете объявить переменную в локальной области видимости. Однако как сделать так, чтобы наша функция также не была доступна? Вот где на помощь приходит IIFE!!

IIFE (Immediately Invoked Function Expression) относится к функции, которая выполняется, как только она объявлена. IIFE состоит из двух частей: первая скобка, которая включает анонимную функцию, не имеющую имени функции, и вторая скобка, которая немедленно вызывает анонимную функцию.

Основной синтаксис показан ниже.

// IIFE defined with regular function syntax
(function () {
  statements
})();
// IIFE defined with arrow function syntax
(()=>{
  statements
})();

Поскольку функция вызывается только один раз, нам больше не нужно давать ей имя.

Модуль

Если мы не используем модульную систему, переменные используются глобально. Давайте посмотрим, что я имею в виду на примере ниже.

<script defer src=”app.js”></script>
<script defer src=”app2.js”></script>

Сначала мы импортируем app.js и app2.js в html-файл.

// app.js
const age = 20;

В app.js мы объявляем age и назначаем 20

// app2.js
console.log(age);

В app2.js напишите одну строку кода, которая выводит age на консоль.
Что будет регистрироваться на консоли???

Хотя age был объявлен из файла app.js, его можно прочитать внутри файла app2.js, поскольку в этом случае все глобальные переменные являются общими.

Это не проблема, если вы достаточно сообразительны, чтобы помнить все переменные, объявленные глобально, и обладаете отличными навыками именования, чтобы каждая глобальная переменная имела другое имя. Но у большинства людей, включая меня, нет этих удивительных навыков. Вот тут-то и появляется модульная система ES6.

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

<script type=’module’ defer src=”app.js”></script>
<script type=’module’ defer src=”app2.js”></script>

Написав type= «module», мы можем просто использовать модульную систему. И это приведет к другому результату на консоли.

Чтобы использовать переменные, объявленные в другом модуле, мы должны их экспортировать. Но я не буду писать об этом здесь. Если вы хотите узнать больше нажмите здесь

Вывод

Честно говоря, я никогда не использовал IIFE в своих проектах. Мысль, что просто хорошо знать концепцию. Однако модуль — это то, что большинство из нас использует для создания больших проектов, не тратя время на размышления об уникальных именах переменных.
Я хочу, чтобы этот пост был полезен для вас, ребята. Если это было полезно, оставьте несколько ответов хлопков!!!

ссылка: средний