DEV Community

Discussion on: JavaScript Best Practices for Beginners

View post
Collapse
 
jayjeckel profile image
Jay Jeckel •

Slight terminology correction:
{ } are Braces or Curly Brackets
[ ] are Brackets or Square Brackets
( ) are Parentheses or Round Brackets
< > are Chevrons or Angle Brackets

Also, as someone who is not a javascript dev, I have to ask, what problems does the language have with the proper formatting of braces on their own lines?

Collapse
 
syedafrozpasha profile image
Syed Afroz Pasha •

In JavaScript, it is recommended to start the braces in the same line, because of the automatic semicolon insertion. When a code gets parsed by JavaScript Engine, it will automatically insert a semicolon at the end of the line where tokens (such as if, else, etc.) are present. Because of this your code might not work as expected. To understand it better, execute this code snippet - one with braces on the next line and another one with braces on the same line.

Nowadays, most of the modern browsers can handle it gracefully. But again it is preferred to define braces in the same line.

Collapse
 
jayjeckel profile image
Jay Jeckel •

Looking at the ECMAScript standard section 11.9, I think you are misunderstanding automatic semicolon insertion. ASI is only going to insert semicolons if there is ambiguity in how to parse the code.

In other words, to insert a semicolon, the parser first has to find a token that it doesn't understand or isn't certain about, what the spec calls an "offending token". In a well formatted if-else statement like the example below there are no offending tokens and no semicolons will be inserted.

if (someBoolean)
{
}
else
{
}
Enter fullscreen mode Exit fullscreen mode

Same thing for your examples in the article. There are no offending tokens in these examples, so the parser has no reason to insert semicolons.

if (!userName)
{
}

for (let i = 0; i < n; i++)
{
}

function getUser()
{
}
Enter fullscreen mode Exit fullscreen mode

If the parser did include semicolons as you suggest, it would break the code. The examples below would print "do not print", even though the condition is false, because the if is now an empty and its block of code is just regular inline code in the file. Same for the loop, it now does effectively nothing and is separated from its block, so "loop" is printed once and not 10 times. Where as the semicolon in the function is an error, so the function isn't called and nothing is printed.

if (false);
{
    console.log('do not print');
}

for (let i = 0; i < 10; i++);
{
    console.log('loop');
}

function getUser();
{
    console.log('broken function');
}

getUser();
Enter fullscreen mode Exit fullscreen mode

The ASI issue is a quirk that arises when splitting statements and expressions across multiple lines and has nothing directly to do with braces or general conventions of putting them on the same line or a new line.

I'll close by including the practical advice from the EMCA spec itself:

The resulting practical advice to ECMAScript programmers is:

  • A postfix ++ or -- operator should appear on the same line as its operand.
  • An Expression in a return or throw statement or an AssignmentExpression in a yield expression should start on the same line as the return, throw, or yield token.
  • A LabelIdentifier in a break or continue statement should be on the same line as the break or continue token.