Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
IIFE, scopes, explanation
What is the output of this code?
var a = 5; // (1)
!function(x) { // (2)
  a = x; // (3)
}(7); // (4)

console.log(a); // a = 7 (5)

(1) - объявляется переменная a с помощью ключевого слова var (смотри ссылку ниже). На этой же строчке она инициализируется, то есть переменной присваивается значение, равное 5. Наша переменная - это глобальная (видна в глобальной области видимости) переменная (смотри ссылку ниже)


(2) - Это IIFE - immediately-invoked function expressions (смотри ссылку и примеры ниже)


(3) - Мы присваиваем переменной a (БЕЗ ключевого слова var) в теле функции (то, что между фигурными скобками) значение аргумента (а впоследствии параметра) функции - x. Анализатор пробегается по коду и понимает, что глобальной переменной a, равной 5, присваивается аргумент x, значение которого будет известно чуть ниже (смотри пункт 4). То есть значение будет перезаписано. В ячейке памяти, на которую ссылается переменная a, будет уже другое значение. Потому что это немедленновызываемая функциональное выражение


(4) - функции пробрасывается сразу параметр x со значением 7. Это значит, что переменной a переприсваивается значение, у неё теперь новое значение, равное 7


(5) - Выводится в консоль браузера значение глобальной переменной a, которое равно 7


По IIFE: Такая запись (функции) означает, что это это IIFE - immediately-invoked function expressions. То есть немедленно исполняемое функциональное выражение("выражение" объяснить можно отдельно).

IIFE можно записать несколькими способами:

(function() {
  alert("Parentheses around the function");
})();

(function() {
  alert("Parentheses around the whole thing");
}());

!function() {
  alert("Bitwise NOT operator starts the expression");
}();

+function() {
  alert("Unary plus starts the expression");
}();

Можно скопировать то, что выше в консоль браузера и посмотреть на результаты. То есть эти функции объявляются и сразу же выполняются (а именно тело функций - что между фигурными скобками) выполнятся сразу. Потому и "немедленно исполняемое" в названии IIFE (immediately-invoked)

Для проверки можно добавить несколько выводов переменной в консоль до и после инициализации внутри функции:

var a = 5;

!function(x) {

  console.log('before initialization', a); // before initialization 5

  a = x;

  console.log('after initialization', a); // after initialization 7

}(7);




Ссылки с полезной информацией для лучшего понимания того почему и как этот пример работает
- Ключевое слово var
- Что такое и как рботает IIFE
- Что такое глобальный объект
- Про функции, про области видимости, про локальные переменные
- Function Expression
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment