Perché i risultati variano in base al posizionamento del tutore riccio?

Perché gli snippet di codice riportati di seguito, presi da questo articolo , producono risultati diversi a causa di un solo cambiamento nel posizionamento delle parentesi graffe?

Quando la parentesi graffa di apertura si {trova su una nuova riga, test()restituisce undefinede "no - si è rotto: undefined" viene visualizzato nell'avviso.

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

Quando la parentesi graffa si trova sulla stessa riga di return, test()restituisce un oggetto e "fantastico" viene avvisato.

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

Questa è una delle insidie ​​di JavaScript: l'inserimento automatico del punto e virgola. Le righe che non terminano con un punto e virgola, ma potrebbero essere la fine di un'istruzione, vengono terminate automaticamente, quindi il tuo primo esempio è effettivamente simile a questo:

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

Vedi anche la guida di stile JS di Douglas Crockford , che menziona l'inserimento del punto e virgola.

Nel tuo secondo esempio restituisci un oggetto (costruito dalle parentesi graffe) con la proprietà javascripte il suo valore di "fantastic", effettivamente lo stesso di questo:

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

Javascript non richiede il punto e virgola alla fine delle istruzioni, ma lo svantaggio è che deve indovinare dove sono i punti e virgola. Il più delle volte questo non è un problema, ma a volte inventa un punto e virgola dove non ne avevi l'intenzione.

Un esempio dal mio post sul blog su questo ( Javascript - quasi non basato sulla riga ):

Se formatti il ​​codice in questo modo:

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

Quindi viene interpretato in questo modo:

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

L'istruzione return assume la sua forma senza parametri e l'argomento diventa un'istruzione a sé stante.

Lo stesso accade al tuo codice. La funzione viene interpretata come:

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

Personalmente preferisco lo stile Allman per la leggibilità (rispetto allo stile K&R).

Invece di…

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

Mi piace…

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

  return obj;
}

Ma questa è una soluzione. Però posso conviverci.

È perché javascript molto spesso inserisce ";" alla fine di ogni riga, quindi fondamentalmente quando hai return {nella stessa riga, il motore javascript vede che ci sarà qualcosa di più, e quando è in una nuova riga pensa che ti sei dimenticato di mettere ";", e lo mette per te.

Le parentesi graffe qui indicano la costruzione di un nuovo oggetto. Quindi il tuo codice è equivalente a:

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

che funziona mentre se scrivi:

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

non funziona più.

Il problema è in effetti l'iniezione di punto e virgola come descritto sopra. Ho appena letto un bel post sul blog su questo argomento. Spiega questo problema e molto altro su javascript. Contiene anche alcuni buoni riferimenti. Puoi leggerlo qui