Jebakan-Jebakan IIFE dalam JavaScript

Mari kita lihat dua potongan kode.

Pertama:

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

console.log(result);

Kedua:

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

console.log(result);

Kedua potongan kode ini hampir sama, tapi jika dijalankan - hasilnya akan berbeda. Kode pertama akan mencetak angka 3 ke konsol, sedangkan kode kedua - angka 1.

Mengapa ada perbedaan seperti ini: semuanya bermuara pada fakta bahwa dalam satu kasus, di baris pertama kode, tidak ada titik koma di akhir, sedangkan dalam kasus kedua - ada.

Anda mungkin bertanya: bagaimana bisa, bukankah dalam JavaScript titik koma di akhir perintah tidak wajib! Sebenarnya, hal ini tidak sepenuhnya benar. Mari kita cari tahu, apa yang sebenarnya terjadi.

Kode pertama dapat ditulis ulang seperti ini:

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

console.log(result); // akan mencetak 3

Sekarang langsung menjadi jelas, bahwa angka satu ditambahkan dengan hasil pemanggilan fungsi secara langsung, yaitu 2. Oleh karena itu, hasil akhirnya adalah 3.

Namun, jika titik koma diletakkan setelah angka satu, maka kode akan dipersepsikan berbeda oleh interpreter:

// Perintah pertama:
let result = 1;

// Perintah kedua:
+function() {
	return 2;
}();

// Perintah ketiga:
console.log(result); // akan mencetak 1

Artinya, assignment ke variabel dan pemanggilan fungsi secara langsung akan menjadi perintah yang terpisah. Dan semuanya karena keberadaan titik koma!

Ternyata, dalam kasus ini, pemanggilan fungsi secara langsung pada dasarnya tidak melakukan apa pun - hanya mengembalikan angka 2 ke kekosongan, yang tidak mempengaruhi variabel result sama sekali.

Lalu mari kita cari tahu, mengapa kita bahkan bisa tidak menulis titik koma di JavaScript. Misalkan kita memiliki kode seperti ini tanpa titik koma:

let result = 1 // 1 akan disimpan ke result
let test = 2   // 2 akan disimpan ke test

Kode ini bekerja dengan benar, karena interpreter secara otomatis menempatkan titik koma di akhir setiap baris.

Tapi perhatikan kode ini:

let result = 1
+ 2; // 3 akan disimpan ke result

Sekarang titik koma di akhir baris pertama tidak akan ditempatkan secara otomatis, karena interpreter memahami bahwa perintah di baris kedua adalah bagian dari perintah di baris pertama.

Tapi jika kita sendiri meletakkan titik koma - hasilnya akan sangat berbeda:

let result = 1; // 1 akan disimpan ke result
+ 2; // perintah tidak melakukan apa-apa, dan juga tidak akan error

Ternyata, interpreter sendiri menempatkan titik koma, hanya jika perintah berikutnya bukan merupakan bagian dari perintah sebelumnya.

Dan sekarang perhatikan kode ini:

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

console.log(result);

Memang, baris kedua hanyalah kelanjutan dari perintah baris pertama dan interpreter tidak menempatkan titik koma secara otomatis. Inilah mengapa, jika kita sendiri menulis titik koma di akhir baris pertama - hasilnya akan sangat berbeda. Hal ini menunjukkan bahwa sebaiknya kita selalu menempatkan titik koma di posisi yang seharusnya, untuk menghindari masalah.