Sonuçlar neden küme ayracı yerleşimine göre değişiyor?

Bu makaleden alınan aşağıdaki kod parçacıkları neden küme parantezlerinin yerleşimindeki tek bir değişiklik nedeniyle farklı sonuçlar veriyor?

Açılış küme ayracı {yeni bir satırdayken, test()döner undefinedve uyarıda "hayır - kırıldı: tanımsız" görüntülenir.

function test()
{
  return
  { /* <--- curly brace on new line */
    javascript: "fantastic"
  };
}

var r = test();
try {
  alert(r.javascript); // does this work...?
} catch (e) {
  alert('no - it broke: ' + typeof r);
}

Küme ayracı ile aynı satırda olduğunda return, test()bir nesne döndürür ve "harika" uyarısı alır.

function test()
{
  return { /* <---- curly brace on same line */
    javascript: "fantastic"
  };
}

var r = test();
try {
  alert(r.javascript); // does this work...?
} catch (e) {
  alert('no - it broke: ' + typeof r);
}

Bu, JavaScript'in tuzaklarından biridir: otomatik noktalı virgül ekleme. Noktalı virgülle bitmeyen ancak bir ifadenin sonu olabilecek satırlar otomatik olarak sonlandırılır, böylece ilk örneğiniz şu şekilde etkili bir şekilde görünür:

function test()
{
  return; // <- notice the inserted semicolon
  { 
    javascript: "fantastic"
  };
}

Noktalı virgül eklemeden bahseden Douglas Crockford'un JS stil kılavuzuna da bakın .

İkinci örneğinizde, özelliği javascriptve değeri ile "fantastic"etkin bir şekilde şununla aynı olan bir nesneyi (küme parantezleriyle oluşturulmuş) döndürürsünüz :

function test() {
    var myObject = new Object();
    myObject.javascript = "fantastic";
    return myObject;
}

Javascript ifadelerin sonunda noktalı virgül gerektirmez, ancak dezavantajı noktalı virgüllerin nerede olduğunu tahmin etmesi gerektiğidir. Çoğu zaman bu bir sorun değildir, ancak bazen istemediğiniz noktalı virgül icat eder.

Bununla ilgili blog yazımdan bir örnek ( Javascript - neredeyse satır temelli değil ):

Kodu şu şekilde biçimlendirirseniz:

function getAnswer() {
   var answer = 42;
   return
      answer;
}

Sonra şu şekilde yorumlanır:

function getAnswer() {
  var answer = 42;
  return;
  answer;
}

Return ifadesi parametresiz biçimini alır ve argüman kendi başına bir ifade haline gelir.

Aynı şey kodunuz için de geçerlidir. İşlev şu şekilde yorumlanır:

function test()
{
  return;
  {
    javascript : "fantastic"
  };
}

Okunabilirlik için kişisel olarak Allman Stilini tercih ediyorum (K&R stiline karşı).

Onun yerine…

function test() {
  return {
    javascript : "fantastic"
  };
}

Severim…

function test() 
{
  var obj =
  {
    javascript : "fantastic"
  };

  return obj;
}

Ancak bu bir çözümdür. Bununla yaşayabilirim.

Bunun nedeni, javascript'in genellikle ";" her satırın sonunda, o kadar basit ki, {aynı satırda döndüğünüzde, javascript motoru daha fazla bir şey olacağını görür ve yeni satıra geldiğinde ";" koymayı unuttuğunuzu düşünür ve sizin için koyar.

Buradaki küme parantezleri yeni bir nesnenin yapısını gösterir. Dolayısıyla kodunuz şuna eşdeğerdir:

function test() {
  var a = { javascript : "fantastic" };
  return a;
}

hangisi işe yarıyor oysa yazarsanız:

function test() {
  var a = { javascript : "fantastic" };
  return; // ; is automatically inserted 
      a;
}

artık çalışmıyor.

Sorun aslında yukarıda açıklandığı gibi noktalı virgül enjeksiyonudur. Bu konuyla ilgili güzel bir blog yazısı okudum. Bu sorunu ve javascript hakkında çok daha fazlasını açıklıyor. Aynı zamanda bazı iyi referanslar içerir. Buradan okuyabilirsiniz