Fallgropar med IIFE i JavaScript

Låt oss titta på två kodstycken.

Första:

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

console.log(result);

Andra:

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

console.log(result);

Dessa två kodstycken är nästan identiska, men om de exekveras så blir resultatet annorlunda. Den första koden skriver ut talet 3 i konsolen, medan den andra skriver ut talet 1.

Anledningen till denna skillnad: allt handlar om att i det ena fallet saknas semikolon i slutet av den första raden, medan i det andra fallet finns det.

Du kanske frågar: hur kan det komma sig, eftersom semikolon i JavaScript i slutet av ett uttryck inte är obligatoriskt! Egentligen stämmer det inte helt. Låt oss ta reda på vad som verkligen händer.

Den första koden kan skrivas om så här:

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

console.log(result); // skriver ut 3

Nu blir det direkt uppenbart att ettan adderas med resultatet från funktionsanropet på plats, det vill säga 2. Därför blir det slutgiltiga resultatet 3.

Om man däremot sätter ett semikolon efter ettan, kommer koden att uppfattas annorlunda av tolken:

// Första uttrycket:
let result = 1;

// Andra uttrycket:
+function() {
	return 2;
}();

// Tredje uttrycket:
console.log(result); // skriver ut 1

Det vill säga, tilldelningen till variabeln och anropet av funktionen på plats blir separata uttryck. Och allt på grund av närvaron av ett semikolon!

Det visar sig att i detta fall gör funktionsanropet på plats ingenting som helst - den returnerar bara talet 2 till ingenstans, vilket inte påverkar variabeln result på något sätt.

Låt oss då ta reda på varför vi överhuvudtaget kan låta bli att skriva semikolon i JavaScript. Anta att vi har en sådan här kod utan semikolon:

let result = 1 // i result skrivs 1 in
let test = 2   // i test skrivs 2 in

Den fungerar korrekt, eftersom tolken själv satte semikolon i slutet av varje rad.

Men titta på den här koden:

let result = 1
+ 2; // i result skrivs 3 in

Nu sätts inte semikolon automatiskt i slutet av den första raden, eftersom tolken förstår att uttrycket på den andra raden är en del av uttrycket på den första raden.

Men om vi sätter semikolon själva - blir resultatet helt annorlunda:

let result = 1; // i result skrivs 1 in
+ 2; // uttrycket gör ingenting, men det blir inget fel heller

Det visar sig att tolken själv sätter semikolon, men bara om nästa uttryck inte är en del av det föregående.

Och titta nu på den här koden:

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

console.log(result);

Ja, den andra raden är bara en fortsättning på uttrycket från den första raden och tolken sätter inte semikolon automatiskt. Det är därför, om vi själva skriver semikolon i slutet av den första raden, blir resultatet helt annorlunda. Detta talar för att det är bäst att alltid sätta semikolon på de ställen där det behövs, för att undvika problem.