Це вираження функції, воно означає вираз негайно викликаної функції (IIFE). IIFE - це просто функція, яка виконується відразу після її створення. Таким чином, функція, яка повинна чекати, поки вона буде викликана, вона буде виконана негайно. Побудуємо IIFE на прикладі. Припустимо, у нас є функція додавання, яка приймає два цілі числа як аргументи і повертає суму, щоб перетворити функцію додавання у IIFE,
Крок 1: Визначте функцію
function add (a, b){
return a+b;
}
add(5,5);
Крок 2: Викличте функцію, загорнувши всю декларацію функції у круглі дужки
(function add (a, b){
return a+b;
})
//add(5,5);
Крок 3. Щоб викликати функцію негайно, просто видаліть текст "додати" з виклику.
(function add (a, b){
return a+b;
})(5,5);
Основна причина використання IFFE - це збереження приватної сфери в межах вашої функції. Всередині коду javascript ви хочете переконатися, що ви не перекриваєте жодної глобальної змінної. Іноді ви можете випадково визначити змінну, яка перекриває глобальну змінну. Спробуємо на прикладі. припустимо, у нас є файл html під назвою iffe.html, а коди всередині тегу body -
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
Ну, вищезгаданий код буде виконуватись із будь-яким питанням, тепер припустимо, що ви скасуєте змінну з ім'ям документа випадково чи навмисно.
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
const document = "hi there";
console.log(document);
</script>
</body>
ви потрапите в SyntaxError : документа глобальної власності.
Але якщо ваше бажання оголосити документ змінної імені, ви можете зробити це за допомогою IFFE.
<body>
<div id = 'demo'></div>
<script>
(function(){
const document = "hi there";
this.document.getElementById("demo").innerHTML = "Hello JavaScript!";
console.log(document);
})();
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
Вихід:
Спробуємо на іншому прикладі, припустимо, у нас є об’єкт калькулятора, як
<body>
<script>
var calculator = {
add:function(a,b){
return a+b;
},
mul:function(a,b){
return a*b;
}
}
console.log(calculator.add(5,10));
</script>
</body>
Добре це працює як принадність, що робити, якщо ми випадково повторно призначимо значення об’єкта калькулятора.
<body>
<script>
var calculator = {
add:function(a,b){
return a+b;
},
mul:function(a,b){
return a*b;
}
}
console.log(calculator.add(5,10));
calculator = "scientific calculator";
console.log(calculator.mul(5,5));
</script>
</body>
так, ви закінчите з TypeError: Calculator.mul не є функцією iffe.html
Але за допомогою IFFE ми можемо створити приватну область, де ми можемо створити інший калькулятор імен змінної імені та використовувати її;
<body>
<script>
var calculator = {
add:function(a,b){
return a+b;
},
mul:function(a,b){
return a*b;
}
}
var cal = (function(){
var calculator = {
sub:function(a,b){
return a-b;
},
div:function(a,b){
return a/b;
}
}
console.log(this.calculator.mul(5,10));
console.log(calculator.sub(10,5));
return calculator;
})();
console.log(calculator.add(5,10));
console.log(cal.div(10,5));
</script>
</body>
Вихід:
