Why do the results depend on the location of braces?

Question

Why do the following code snippets taken from this article give different results due to just one change in the placement of curly braces?

When the opening brace { is on a new line, test() returns undefined , and the warning displays "no - broken: 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); } 

When the brace is on the same line as return , test() returns the object, and a “fantastic” signal appears.

 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

This is one of the pitfalls of JavaScript: automatically inserting semicolons. Lines that do not end with a semicolon, but may be the end of a statement, automatically end, so your first example looks something like this:

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

See also the Douglas Crockford JS Style Guide for semicolon insertion.

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

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

Answer 2

Javascript does not require semicolons at the end of statements, but the disadvantage is that it must guess where the semicolons are. In most cases, this is not a problem, but sometimes it comes up with a semicolon where you did not intend it.

An example from my blog post about this ( Javascript is almost non-line-based ):

If you format the code as follows:

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

It is then interpreted as follows:

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

The return statement takes its form without parameters, and the argument becomes its own expression.

The same thing happens with your code. The function is interpreted as:

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

Answer 3

This is because javascript most often puts ";" at the end of each line, so when you return {on the same line, the javascript engine sees that there will be something else, and when it thinks in a new line that you forgot to put ";" and placed it for you.

Answer 4

Here, curly braces indicate the design of a new object. So your code is equivalent:

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

which works if you write:

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

it doesn't work anymore.

Answer 5

The problem is that the injection is with a comma as described above. I just read a good blog on this topic. This explains this problem and more about javascript. It also contains some good links. You can read it here.

Answer 6

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

Instead...

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

I like...

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

But this is a workaround. I can live with him, though.

Answer 7

Excluding the standard reason return; .

Brackets in new BAD HABBITS lines taken from other C-shaped lagoons where this is standard. If readability is the reason, then we can also provide this variable name written in your own laguange, but we do not, right? The new ARE BAD HABBITS linear brackets, as well as, for example, in google chrome, are displayed as debbuger errors.

When you work with commands, there is a 99% chance that a new line { will be disabled due to IDEs that automatically save the code. Like WebStorm / VisualStudio.

When you look at github, you will see that the most popular is { on the same line. (If you find another version, provide an example)

In addition, each line of code should have a value in laguanges, which are mostly interpreted as uncompiled. How would you “explain” to intrereter a line that starts with:

  { 

? is this the beginning of the block? I think you said yes . Now tell me how much you can say about:

 function foo() { 

(of course, we are talking about non-minified files, for which we also save little memory)

I do not like to make inteprer look forward / backward. He should read the line and do what is in the line not in two lines.

I am sure that ECMA 202X will add it as a STANDARD. I don’t care, someone does this in their projects, but as a person who works mainly with TEAMS programmers, I would not accept this hipsterizing code.

The following case will be added, like CoffeScript / TypeScript and other dialects. These tools will return you code with { with the same line. What for? Try how it should be done.

EDIT:

I delved into my research about this and I contacted the ECMA team.

Hello, I am sure that I will probably not be responsible for this. But I would like to know what the ECMA team prefers. What curly braces in javascript will be written on one line or in a new line? (except for the example with the condition “return;” and an automatic semicolon. I am writing my dissertation and your message will be as useful as some professional POINT OF VIEW. Thanks for the great work.

as Answere I get this:

TC39 does not accept any formal provisions on stylist issues such as this. I am sure that among the member delegates participating in TC39 you will find various code formatting options. However, I suspect that most prefer to use explicit semicolons rather than relying on ASI .

edit: I know that some people are disappointed with the fact that they are doing something wrong, but giving "-1" is not the best approach. The comments section is open, so share your opinion with others.