why results varies upon placement of curly braces in javascript code

Question

Hello All,
i have read this javascript article, where an exmaple is shown , Please explain why below codes return different output due to changes the place of curly braces {

curly brace { on new line

function test()
{
  return
  { /* <----curly brace in new line*/
    javascript : "fantastic"
  };
}

var r = test();
try {
  alert(r.javascript); // does this work...?
} catch (e) {
  alert('no - it broke: ' + typeof r);
}

returns no - it broke: undefined

whereas

curly brace { on same line

function test()
{
  return { /* <----inline curly brace*/
    javascript : "fantastic"
  };
}

var r = test();
try {
  alert(r.javascript); // does this work...?
} catch (e) {
  alert('no - it broke: ' + typeof r);
}

returns fantastic

here is live exmpale beware of curly braces

Answer 1

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 http://javascript.crockford.com/code.html

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 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

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

Answer 4

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 5

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