Epiphany
Epiphany

Reputation: 1894

Which is the best syntax to use for jQuery conditional statements?

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

Answers (4)

robisrob
robisrob

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:

http://codepen.io/anon/pen/doJxmW

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

mdenton8
mdenton8

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

Boss
Boss

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

MrP
MrP

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

Related Questions