Чому результати змінюються залежно від розміщення фігурних брекетів?

Чому фрагменти коду нижче, взяті з цієї статті , дають різні результати завдяки лише одній зміні розміщення фігурних дужок?

Коли вступна фігурна дужка {знаходиться на новому рядку, test()повертається undefined, а в повідомленні відображається "ні - вона зламалася: невизначено".

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

Коли дужка знаходиться на тій же лінії, що і return, test()повертає об'єкт, і "фантастичний" повідомляється.

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

Ось одна з підводних каменів JavaScript: автоматичне вставлення крапки з комою. Рядки, які не закінчуються крапкою з комою, але можуть бути кінцем заяви, автоматично припиняються, тому ваш перший приклад виглядає ефективно таким чином:

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

Дивіться також посібник із стилю JS Дугласа Крокфорда , де згадується вставка крапки з комою.

У другому прикладі ви повертаєте об'єкт (побудований фігурними дужками) із властивістю javascriptта його значенням "fantastic", фактично таким же, як цей:

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

Javascript не вимагає крапки з комою в кінці висловлювань, але недолік полягає в тому, що він повинен здогадуватися, де знаходиться крапка з комою. У більшості випадків це не проблема, але іноді вона видумує крапку з комою, де ви її не мали наміру.

Приклад з моєї публікації в блозі про це ( Javascript - майже не на основі рядка ):

Якщо ви форматуєте такий код:

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

Тоді це трактується так:

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

Оператор return приймає свою параметричну форму, і аргумент стає власним твердженням.

Те саме відбувається і з вашим кодом. Функція інтерпретується як:

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

Я особисто віддаю перевагу стилю Allman для читабельності (проти стилю K&R).

Замість…

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

Мені подобається…

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

  return obj;
}

Але це обхід. Я можу з цим жити.

Це тому, що JavaScript найчастіше ставить ";" в кінці кожного рядка, так що, коли ви повертаєтеся {в тому ж рядку, javascript-движок бачить, що буде щось більше, а коли його в новому рядку, він вважає, що ви забули поставити ";", і ставить його вам.

Кучеряві дужки тут вказують на побудову нового об’єкта. Таким чином ваш код еквівалентний:

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

яка працює, якщо ви пишете:

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

це більше не працює.

Проблема - це справді крапка з комою, як описано вище. Я просто прочитав хорошу публікацію в блозі на цю тему. Це пояснює це питання та ще багато іншого про JavaScript. Він також містить кілька хороших посилань. Ви можете прочитати його тут