¿Por qué los resultados varían según la colocación de las llaves?

¿Por qué los siguientes fragmentos de código, extraídos de este artículo , producen resultados diferentes debido a un solo cambio en la ubicación de las llaves?

Cuando la llave de apertura {está en una nueva línea, test()regresa undefinedy "no - se rompió: indefinido" se muestra en la alerta.

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

Cuando la llave está en la misma línea que return, test()devuelve un objeto y se alerta "fantástico".

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

Esa es una de las trampas de JavaScript: inserción automática de punto y coma. Las líneas que no terminan con un punto y coma, pero que podrían ser el final de una declaración, se terminan automáticamente, por lo que su primer ejemplo se ve efectivamente así:

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

Consulte también la guía de estilo JS de Douglas Crockford , que menciona la inserción de punto y coma.

En su segundo ejemplo, devuelve un objeto (construido por las llaves) con la propiedad javascripty su valor de "fantastic", efectivamente, el mismo que este:

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

Javascript no requiere punto y coma al final de las declaraciones, pero el inconveniente es que tiene que adivinar dónde están los puntos y comas. La mayoría de las veces esto no es un problema, pero a veces inventa un punto y coma donde no pretendía.

Un ejemplo de la publicación de mi blog sobre esto ( Javascript, casi no basado en líneas ):

Si formatea el código de esta manera:

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

Entonces se interpreta así:

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

La declaración de retorno toma su forma sin parámetros y el argumento se convierte en una declaración propia.

Lo mismo sucede con tu código. La función se interpreta como:

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

Personalmente, prefiero el estilo Allman por su legibilidad (frente al estilo K&R).

En vez de…

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

Me gusta…

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

  return obj;
}

Pero esta es una solución alternativa. Aunque puedo vivir con eso.

Es porque javascript suele poner ";" al final de cada línea, así que, básicamente, cuando tienes return {en la misma línea, el motor javascript ve que habrá algo más, y cuando está en una línea nueva, cree que olvidaste poner ";", y lo pone por ti.

Las llaves aquí indican la construcción de un nuevo objeto. Por lo tanto, su código es equivalente a:

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

que funciona mientras que si escribe:

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

ya no funciona.

De hecho, el problema es la inyección de punto y coma como se describe anteriormente. Acabo de leer una buena publicación de blog sobre este tema. Explica este problema y mucho más sobre javascript. También contiene algunas buenas referencias. Puedes leerlo aqui