JavaScript'te IIFE'nin Tuzakları

İki kod parçasını ele alalım.

Birincisi:

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

console.log(result);

İkincisi:

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

console.log(result);

Bu iki kod parçası neredeyse aynı, ancak çalıştırıldığında sonuç farklı olacaktır. İlk kod konsola 3 sayısını yazdırır, ikincisi ise 1 sayısını.

Bu fark neden kaynaklanıyor: her şey bir durumda ilk satırın sonunda noktalı virgülün olmaması, diğer durumda ise olması.

Şunu sorabilirsiniz: bu nasıl olur, çünkü JavaScript'te komut sonunda noktalı virgül zorunlu değildir! Aslında bu tam olarak doğru değil. Gerçekte ne olduğunu anlamaya çalışalım.

İlk kod şu şekilde yeniden yazılabilir:

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

console.log(result); // 3 yazdırır

Artık birin üzerine, yerinde çağrılan fonksiyonun sonucunun, yani 2'nin eklendiği açıkça görülüyor. Bu nedenle nihai sonuç 3 olacaktır.

Ancak birden sonra noktalı virgül konulursa, kod yorumlayıcı tarafından farklı şekilde algılanacaktır:

javascript// İlk komut:
let result = 1;

// İkinci komut:
+function() {
  return 2;
}();

// Üçüncü komut:
console.log(result); // 1 yazdırır

Yani değişkene atama ve fonksiyonun yerinde çağrılması farklı komutlar haline gelir. Ve hepsi noktalı virgülün varlığından dolayı!

Anlaşılan bu durumda fonksiyonun yerinde çağrılması hiçbir şey yapmıyor - sadece hiçliğe 2 sayısını döndürüyor, bu da result değişkenini hiç etkilemiyor.

O zaman neden JavaScript'te noktalı virgül yazmak zorunda olmadığımızı anlayalım. Noktalı virgül olmadan şu koda sahip olalım:

javascriptlet result = 1 // result'a 1 yazılır
let test = 2   // test'e 2 yazılır

Bu kod doğru çalışır, çünkü yorumlayıcı her satırın sonuna kendisi noktalı virgül koyar.

Ancak şu koda bir bakın:

javascriptlet result = 1
+ 2; // result'a 3 yazılır

Artık ilk satırın sonuna otomatik olarak noktalı virgül konulmaz, çünkü yorumlayıcı ikinci satırdaki komutun, ilk satırdaki komutun bir parçası olduğunu anlar.

Ancak kendimiz noktalı virgül koyarsak - sonuç tamamen farklı olacaktır:

javascriptlet result = 1; // result'a 1 yazılır
+ 2; // komut hiçbir şey yapmaz, ancak hata da olmaz

Anlaşılan, yorumlayıcı sadece sonraki komut önceki komutun bir parçası değilse, kendisi noktalı virgül koyar.

Ve şimdi şu koda bir bakın:

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

console.log(result);

Gerçekten de, ikinci satır - ilk satırdaki komutun basitçe devamıdır ve yorumlayıcı otomatik olarak noktalı virgül koymaz. İşte bu yüzden, ilk satırın sonuna kendimiz noktalı virgül koyarsak - sonuç tamamen farklı olacaktır. Bu bize şunu gösteriyor: olası problemlerden kaçınmak için, gerekli yerlerde her zaman noktalı virgül koymak en iyisidir.