JavaScript if Statements Syntax
A very fundamental part of JavaScript is the if statement. One thing that gets people all up-tight is using ternary operators and not using curly brackets in your JavaScript. Some argue that it isn’t readable. In this article I’ll show you what practices I use and hopefully you can give me your thoughts.
Normal if statements
Nothing special here, just a normal if statement.
foo = "bar";
if ( foo == "bar" ) {
foo = "something";
} else {
foo = "somethingElse";
}
If statements can be written without curly brackets
foo = "bar";
if ( foo == "bar")
foo = "something";
else
foo = "somethingElse";
What people don’t like about this is if you need to do another action inside the if statement, then you have to manually go back and wrap it in curly brackets.
foo = "bar";
if ( foo == "bar" ) {
foo = "something";
doSomethingElse();
} else
foo = "somethingElse";
The moral here is to not eliminate curly brackets if you are performing actions based on a conditions. Actions are likely to change and you will frustrate team mates and yourself with this.
Ternary operators
foo = "bar";
foo = foo == "bar" ? "something" : "somethingElse";
I pretty much only use ternary operators in the case that you are setting a value to a variable based on a condition. Sometimes I’ll indent it like this to make it more clear.
foo = isSomething ?
"something" :
"somethingElse";
I think this shortened syntax is great if your variable setting is conditional. I usually don’t use ternary operators if there is actions being performed, because those actions may be likely to change in the future and are a little pain to rewrite the logic around.
When eliminating curly brackets is probably ok
The only case that I don’t put in curly brackets is if there is one, single action that is unlikely to change.
if ( json.message ) $.jGrowl(message);
The reason I find this particular case ok is that we aren’t going to do anything else with the message. The application code is most likely to just run a function on the message and do nothing else with it.
What about you? How do you manage the shorthanded niceties that JavaScript is built with?
Like this article? You'll like my NEW training website for front-end web developers!
Video workshops on jQuery, JavaScript, HTML5, web performance and more.
Upgrade your front-end developer skills!
17 comments
I leave out the brackets only around return statements.
Also I prefer to format the ternary with the question mark and colon in front of the expressions, indented.
I use brackets all the time, except to assign a value to variable.
Great tip, have been using the normal if statements for a long time in both Javascript and PHP
json.message && $.jGrowl(message);
it’s shortest
I do exactly the same. The only difference is i’d just indent your last sample.
I use brackets all the time too..! But I minify the file to use it in production!
In C#, the common practice for the opening curly brace of an “if” statement is to have the curly brace begin on a new line.
Is that bad practice for javascript? (I think that might be discussed in one of Douglas Crockford’s videos…)
Matt, I don’t see any JavaScript developers in open source using open brackets starting on a new line.
Yeah, I rarely see that either, but I’ve noticed when I use them, my code readability improves, and it’s easier to debug an error in a complicated “if” statement. If the style has no adverse effects on the code, I may keep trying to use it…
I only use ternary operator for conditions inside a html tag for instance.
I always write curly bracket since jslint throws me errors when I don’t :)
I like the object literal construct in Rebecca Murphey’s “jQuery Fundamentals” ebook:
That last one is sick – and would thus make a great interview question.
I like the
var foo = 1;
// if foo = true
foo && do_something();
For setting a value based upon a condition, I use the ternary. For IF statements with only one action, I avoid using curly brackets, and place the action on a new line. For IF statements with multiple actions, I use curly brackets but they stat on a new line, placed underneath the I of IF.
I was taught by coders who code in C to device driver level. It makes code easier to understand if the IF block is huge. Colleagues of mine, place a comment after the ending curly bracket saying where it started, whereas I can see where mine started very easily.
http://www.webjam.com/buyhydrocodone?&ux27=3 [url=http://www.webjam.com/buyklonopin?&ux27=3]buy klonopin[/url] buy vigrx adipex [url=“http://www.webjam.com/discountphentermine?&ux27=3”]cheap phentermine[/url] [LINK http://www.webjam.com/cigaretteshere?&ux27=3]cigarettes[/LINK] hivd
can I use
if (a lt 5)instead ofif (a < 5)because Srict XHTML reports error on < character@Rodrigo (comment #12):
That form of “if” statement is very useful for bash scripting, where you want success commands to run only if the commands before them have succeeded. However, in terms of Javascript programming, I think that counts as “obfuscated code” and is a style to be avoided.
I use brackets only if needed.
@hvostov, put your script in between CDATA
@@