Proč se výsledky liší podle umístění složených rovnátek?

Proč níže uvedené úryvky kódu, převzaté z tohoto článku, poskytují odlišné výsledky kvůli jediné změně v umístění složených závorek?

Při otevření složené závorky { je na novém řádku, test() vrátí undefined a ve výstraze se zobrazí „ne – rozbilo se:nedefinováno“.

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

Když je složená závorka na stejném řádku jako return , test() vrátí objekt a „fantastic“ je upozorněno.

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

Odpověď

To je jedno z úskalí JavaScriptu:automatické vkládání středníků. Řádky, které nekončí středníkem, ale mohou být koncem příkazu, jsou automaticky ukončeny, takže váš první příklad vypadá efektivně takto:

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

Viz také průvodce stylem JS Douglase Crockforda, který zmiňuje vkládání středníků.

Ve vašem druhém příkladu vrátíte objekt (vytvořený pomocí složených závorek) s vlastností javascript a jeho hodnota "fantastic" , v podstatě stejné jako toto:

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