Úskalí IIFE v JavaScriptu

Pojďme se podívat na dva kousky kódu.

První:

javascriptlet result = 1
+function() {
  return 2;
}();

console.log(result);

Druhý:

javascriptlet result = 1;
+function() {
  return 2;
}();

console.log(result);

Tyto dva kousky kódu jsou téměř totožné, ale pokud je spustíte - výsledek se bude lišit. První kód vypíše do konzole číslo 3, a druhý - číslo 1.

Proč je takový rozdíl: celé je to v tom, že v jednom případě na konci prvního řádku chybí středník, a ve druhém případě - je přítomen.

Můžete se zeptat: jak to, vždyť v JavaScriptu středník na konci příkazu není povinný! Ve skutečnosti to není úplně tak. Pojďme se podívat, co se u nás vlastně děje.

První kód lze přepsat takto:

javascriptlet result = 1 + function() {
  return 2;
}();

console.log(result); // vypíše 3

Nyní je hned zřejmé, že k jedničce se přičítá výsledek volání funkce na místě, tedy 2. Proto konečný výsledek bude 3.

Pokud však za jedničku napíšeme středník, kód bude interpretem vnímán jinak:

javascript// První příkaz:
let result = 1;

// Druhý příkaz:
+function() {
  return 2;
}();

// Třetí příkaz:
console.log(result); // vypíše 1

To znamená, že přiřazení do proměnné a volání funkce na místě se stanou různými příkazy. A to všechno kvůli přítomnosti středníku!

Vychází to tak, že v tomto případě volání funkce na místě vlastně nic nedělá - prostě do ničeho vrátí číslo 2, které žádným způsobem neovlivní proměnnou result.

Pojďme se tedy podívat, proč vůbec můžeme nepsat středník v JavaScriptu. Předpokládejme, že máme takový kód bez středníků:

javascriptlet result = 1 // do result se zapíše 1
let test = 2   // do test se zapíše 2

Funguje korektně, protože interpret sám umístil na konec každého řádku středník.

Ale podívejte se na takový kód:

javascriptlet result = 1
+ 2; // do result se zapíše 3

Nyní se středník na konci prvního řádku neumístí automaticky, protože interpret chápe, že příkaz na druhém řádku - to je část příkazu z prvního řádku.

Ale pokud my sami napíšeme středník - výsledek bude úplně jiný:

javascriptlet result = 1; // do result se zapíše 1
+ 2; // příkaz nic nedělá, ale ani nebude chyba

Vychází to tak, že interpret sám umisťuje středník, pouze pokud následující příkaz není částí předchozího.

A nyní se podívejte na tento kód:

javascriptlet result = 1
+function() {
  return 2;
}();

console.log(result);

Opravdu, druhý řádek - je prostě pokračování příkazu z prvního řádku a interpret nekladl středník automaticky. Právě proto, pokud my sami napíšeme středník na konci prvního řádku - výsledek bude úplně jiný. To říká, že nejlépe je vždy umístit středník na potřebná místa, aby se předešlo problémům.