Perangkap IIFE dalam JavaScript

Mari kita lihat dua potongan kod.

Pertama:

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

console.log(result);

Kedua:

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

console.log(result);

Kedua-dua potongan kod ini hampir sama, tetapi jika dijalankan - hasilnya akan berbeza. Kod pertama akan memaparkan nombor 3 dalam konsol, manakala kedua - nombor 1.

Mengapa terdapat perbezaan sedemikian: semuanya bermula dengan fakta bahawa dalam satu kes pada baris pertama kod tiada koma bertitik di hujungnya, manakala dalam kes kedua - ada.

Anda mungkin bertanya: bagaimana boleh, bukankah dalam JavaScript koma bertitik di hujung perintah bukanlah satu keperluan! Sebenarnya, ini tidak begitu tepat. Mari kita fahami, apa sebenarnya yang berlaku.

Kod pertama boleh ditulis semula seperti ini:

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

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

Sekarang menjadi jelas serta-merta bahawa satu ditambah dengan hasil panggilan fungsi serta-merta, iaitu 2. Oleh itu, hasil akhir akan menjadi 3.

Jika koma bertitik diletakkan selepas satu, kod akan ditafsirkan oleh interpretor secara berbeza:

// Perintah pertama:
let result = 1;

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

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

Iaitu, penetapan nilai ke pembolehubah dan panggilan fungsi serta-merta akan menjadi perintah yang berbeza. Dan semuanya kerana kehadiran koma bertitik!

Jadi, dalam kes ini panggilan fungsi serta-merta pada dasarnya tidak melakukan apa-apa - hanya memulangkan nombor 2 ke tempat kosong, yang tidak memberi kesan kepada pembolehubah result.

Mari kita fahami, mengapa kita secara amnya tidak perlu menulis koma bertitik dalam JavaScript. Katakan kita mempunyai kod tanpa koma bertitik seperti ini:

let result = 1 // 1 akan ditulis ke dalam result
let test = 2   // 2 akan ditulis ke dalam test

Ia berfungsi dengan betul, kerana interpretor sendiri meletakkan koma bertitik di hujung setiap baris.

Tetapi lihat kod ini:

let result = 1
+ 2; // 3 akan ditulis ke dalam result

Sekarang koma bertitik di hujung baris pertama tidak akan diletakkan secara automatik, kerana interpretor memahami bahawa perintah baris kedua adalah sebahagian daripada perintah baris pertama.

Tetapi jika kita sendiri meletakkan koma bertitik - hasilnya akan berbeza sama sekali:

let result = 1; // 1 akan ditulis ke dalam result
+ 2; // perintah tidak melakukan apa-apa, dan tiada ralat akan berlaku

Jadi, interpretor sendiri meletakkan koma bertitik, hanya jika perintah seterusnya bukan sebahagian daripada perintah sebelumnya.

Dan sekarang lihat kod ini:

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

console.log(result);

Sesungguhnya, baris kedua hanyalah kesinambungan perintah baris pertama dan interpretor tidak meletakkan koma bertitik secara automatik. Inilah sebabnya, jika kita sendiri menulis koma bertitik di hujung baris pertama - hasilnya akan berbeza sama sekali. Ini menunjukkan bahawa adalah lebih baik untuk sentiasa meletakkan koma bertitik di tempat yang sepatutnya, untuk mengelakkan masalah.