Why do results vary based on curly brace placement

Question

Why do the code snippets below, taken from this article, produce different results due to only a single change in the placement of curly braces?

When the opening curly brace { is on a new line, test() returns undefined, and "no - it broke: undefined" is displayed in the alert.

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

When the brace is on the same line as return, test() returns an object, and "fantastic" is alerted.

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

Answer 1

I personally prefer the Allman Style for readability (vs K&R style).

Instead of…

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

I like…

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

  return obj;
}

But this is a work-around. I can live with it though.

Answer 2

It's because javascript most often puts ";" at the end of each line, so basicly when you have return { in same line, javascript engine see that there will be something more, and when its in new line it thinks you forgot to put ";", and puts it for you.

Answer 3

Javascript doesn't require semicolons at the end of statements, but the drawback is that it has to guess where the semicolons are. Most of the time this is not a problem, but sometimes it invents a semicolon where you didn't intend one.

An example from my blog post about this (Javascript – almost not line based):

If you format the code like this:

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

Then it is interpreted like this:

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

The return statement takes it’s parameterless form, and the argument becomes a statement of it’s own.

The same happens to your code. The function is interpreted as:

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

Answer 4

That's one of the pitfalls of JavaScript: automatic semicolon insertion. Lines that do not end with a semicolon, but could be the end of a statement, are automatically terminated, so your first example looks effectively like this:

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

See also Douglas Crockford's JS style guide, which mentions semicolon insertion.

In your second example you return an object (built by the curly braces) with the property javascript and its value of "fantastic", effectively the same as this:

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

Answer 5

The curly braces here indicate the construction of a new object. Thus your code is equivalent to:

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

which works whereas if you write:

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

it no longer works.

Answer 6

The problem is indeed semicolon injection as described above. I just read a good blog posting on this subject. It explains this issue and a whole lot more about javascript. It also contains some good references. You can read it here