2

I was used in this type of convention of indentation and curly brackets placement in college.

function code()
{
    if(code)
    {
     code
    }
}

but online tutorials in javascript tells me to do this style instead

function code(){
    if(code){
    code
    }
}

this first one is also my preferred style because it is more clear and understandable. My question is why do I have to follow the second example? is there any advantages??

joseMana
  • 23
  • 1
  • 7
  • 1
    No advantages at all, except for two less lines of code. It also may be more readable for some people in the first form. – hRdCoder Jun 12 '17 at 16:28
  • You can hide unwanted whitespaces in the first example. – Ioan Jun 12 '17 at 16:28
  • Same code. Believe that the cause is that this is the preferred style for PHP which tends to have multiple layers and most JavaScript developers come from a PHP background. My opinion. – AntonZlatkov Jun 12 '17 at 16:30
  • I personally hate the first form, but when coding in Visual Studio I have no choice... I think you should use your editor's shortcut for indentation and work with it. – Washington Guedes Jun 12 '17 at 16:30
  • 1
    Read [this almost identical question from 7 years ago](https://stackoverflow.com/questions/3218756/javascript-braces-on-new-line-or-not). – chazsolo Jun 12 '17 at 16:31
  • @WashingtonGuedes Visual Studio gives you the option to decide how you want curly braces placed. Check Tools > Options > Text Editor > JavaScript – Scott Marcus Jun 12 '17 at 16:34
  • @ScottMarcus :o ... I'm gonna do it right now ;-) Thank you – Washington Guedes Jun 12 '17 at 16:35
  • thanks guys!!. I love this community. :) – joseMana Jun 12 '17 at 16:41

2 Answers2

3

The official answer is that you can use either, but the practical answer is that it is safer to use the version where the opening curly brace is on the same line as the code block it defines.

In JavaScript, {} is the syntax for an object literal and JavaScript also has automatic semi-colon insertion. This automatic semi-colon insertion can cause functions written with the opening curly-brace on a different line than the function it defines the body of, to execute differently than you would expect. See this for details:

Why do results vary based on curly brace placement?

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • That is correct but you can use the first syntax and minify it, which solves the problem, The first one is more readable and helps when the code is very long/large. – 27px Jan 16 '21 at 15:37
  • @27px The question is not about minification. Also what is "more readable" is subjective. I would say that the second is more readable because I spend much more time coding in JavaScript (where placement matters) than in C# (where it doesn't). So, since reasonable people will disagree on style, it's best to go with substance. There is a substantive difference in the way some code will execute and placing the `{` on a new line can lead to bugs, so just don't do that. – Scott Marcus Jan 16 '21 at 16:43
  • That is only in case of return statement, may be in some others line anonymous functions too, but those are only exceptions in js, I also mostly code in JS, I use first syntax all the time except in some places like return and object together etc. – 27px Jan 16 '21 at 16:50
  • Yes, and that's the point. If one syntax can cause unintended results in edge cases and another will never cause those same unintended results, why would you ever use the one that could backfire? You shouldn't. That's an anti-pattern. – Scott Marcus Jan 16 '21 at 17:08
-2

Mostly preference. I personally prefer the second way, but the only difference is when javascript's automatic semicolon insertion kicks in. There is no difference when dealing with function declarations or if statements.

Xanuthatusu
  • 33
  • 7
  • Not true, in certain circumstances, because of automatic semi-colon insertion, execution will differ. – Scott Marcus Jun 12 '17 at 16:32
  • Ah, TIL. I've just always used the same line opening brackets so I never ran into that issue. – Xanuthatusu Jun 12 '17 at 16:34
  • Uh, yes, there is a difference (due to automatic semi-colon insertion, which always kicks in, by the way) with function declarations and if statements. – Scott Marcus Jun 12 '17 at 16:42