Warum variieren die Ergebnisse je nach Platzierung der geschweiften Klammern?

Warum machen die Codeschnipsel unten, entnommen aus Dieser Beitragaufgrund nur einer einzigen Änderung in der Platzierung der geschweiften Klammern unterschiedliche Ergebnisse erzeugen?

Wenn die öffnende geschweifte Klammer { ist in einer neuen Zeile, test() kehrt zurück undefinedund “nein – es ist kaputt: undefiniert” wird in der Warnung angezeigt.

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);
}

Wenn sich die Klammer auf derselben Linie befindet wie return, test() gibt ein Objekt zurück und “fantastisch” wird gewarnt.

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);
}

Das ist eine der Fallstricke von JavaScript: das automatische Einfügen von Semikolons. Zeilen, die nicht mit einem Semikolon enden, aber das Ende einer Anweisung sein könnten, werden automatisch beendet, sodass Ihr erstes Beispiel effektiv so aussieht:

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

Siehe auch JS-Styleguide von Douglas Crockfordder das Einfügen von Semikolons erwähnt.

In Ihrem zweiten Beispiel geben Sie ein Objekt (durch die geschweiften Klammern aufgebaut) mit der Eigenschaft zurück javascript und sein Wert von "fantastic"effektiv dasselbe wie dieses:

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

Javascript benötigt keine Semikolons am Ende von Anweisungen, aber der Nachteil ist, dass es erraten muss, wo die Semikolons sind. Meistens ist das kein Problem, aber manchmal erfindet es ein Semikolon, wo Sie es nicht beabsichtigt haben.

Wenn Sie den Code wie folgt formatieren:

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

Dann wird es so interpretiert:

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

Die return-Anweisung nimmt ihre parameterlose Form an, und das Argument wird zu einer eigenen Anweisung.

Dasselbe passiert mit Ihrem Code. Die Funktion wird interpretiert als:

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

Ich persönlich bevorzuge den Allman-Stil für die Lesbarkeit (gegenüber dem K&R-Stil).

Anstatt…

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

Ich mag…

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

  return obj;
}

Aber das ist ein Workaround. Damit kann ich aber leben.

Das liegt daran, dass Javascript am häufigsten “;” Am Ende jeder Zeile, also im Grunde, wenn Sie return { in derselben Zeile haben, sieht die Javascript-Engine, dass es noch etwas mehr geben wird, und wenn es in einer neuen Zeile steht, denkt es, dass Sie vergessen haben, “;” zu setzen, und setzt es für Sie.

Die geschweiften Klammern zeigen hier die Konstruktion eines neuen Objekts an. Somit ist Ihr Code äquivalent zu:

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

was funktioniert, während wenn Sie schreiben:

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

es funktioniert nicht mehr.

Das Problem ist in der Tat die oben beschriebene Semikolon-Injektion. Ich habe gerade einen guten Blogbeitrag zu diesem Thema gelesen. Es erklärt dieses Problem und noch viel mehr über Javascript. Es enthält auch einige gute Referenzen. Du kannst es lesen Hier