Reputation: 1894
I come from a Perl coders background, so out of habit I always use curly brackets to enclose the actions taken when a conditional statement returns a true. For example, and using jQuery, as this is where I need an explanation as to the difference, this two statements are both equivalent and of valid syntax.
if ($('#user_agreement').is(':checked')) { $('#thanks_message').show(); }
if ($('#user_agreement').is(':checked')) $('#thanks_message').show();
Are my old habits betraying me, and I'm just writting unnecessary extra code without any advantage? Or is one method more effective, or considered more standard to good coding practices? I would really like to understand any differences between the two different syntactical approaches, especially when they both work just as well.
Upvotes: 6
Views: 18775
Reputation: 960
Have to agree there's no reason to solve this using jquery when plain js is so obvious and readable, but just for the sake of demonstration here's a pure jquery equivalent using .filter()
. Sometimes a long jquery chaining operation makes it undesirable to break the chain to plain js so this technique is useful (even if not what the method was designed for) for inserting a conditional without breaking the chain. To move on with the chain you'll need to add an .end()
afterward to restore the original selector.
your expression ....
if ($('#user_agreement').is(':checked')) {
$('#thanks_message')
.show();
}
using only jquery...
$('#thanks_message')
.filter(function(){return $('#user_agreement').is(':checked');})
.show();
working example:
by the way I have in the past created a plugin to simplify the syntax for such an operation....
$.fn.iff = function (test) {
return this.filter(function() {return test;} );
};
which allows this more readable syntax...
$('#thanks_message')
.iff($('#user_agreement').is(':checked'))
.show();
if you are returning the query object be sure to use .end()
to restore the original object
return this
.iff(someTest)
.show()
.end();
Upvotes: 0
Reputation: 616
I'm sorry to say, but this has nothing to do with jQuery. This is pure Javascript, through and through. But anyway, here's your answer:
They do the same thing.
HOWEVER.
The second option, without the curly braces, can only be used for one
statement of code. As soon as the fist semi-colon is hit, the rest of the
code is outside of the if
statement.
The second option isn't even really frowned upon, but it really
should be. It could save developers hours of looking through their
code only to realize that they accidentally included a semi-colon
right after the if
statement. (i.e. they did something unfortunate like:
->
if ( $("#user_agreement").is(':checked')); $("#thanks_message").show();
The first option allows you to add more lines of code to the conditional statement without having to painstakingly add more curly braces.
Curly braces simply make your code clearer, especially as in the next bullet ->
And finally, nesting these thing becomes incredibly confusing. For example:
->
if(var1 == 'string1')
console.log("string1");
if(var2 == 'string2')
console.log("string2");
else
console.log("else");
The indentation indicates the else block goes with the outside if
--but it actually goes with the inside if
.
Upvotes: 5
Reputation: 475
there is a single statement like
if ( $("#user_agreement").is(':checked')) { $("#thanks_message").show(); }
There is no need to put braces
There are more than one statement like
if ( $("#user_agreement").is(':checked')) {
$("#thanks_message").show();
$("#thanks_message").show();
$("#thanks_message").show();
$("#thanks_message").show();
}
You should use braces
Upvotes: 0
Reputation: 1369
They are indeed both valid, tho I would personally advice for the usage of curly brackets. They make it clearer which lines are part of the if
.
This however is a very personal issue. Some people prefer to use them, others don't.
The advantage of placing the curly brackets is that your code can become clearer (but in that case, I would also advise the usage of newlines.
Upvotes: 1