I have a if condition like so:

$(document).ready(function(){
  var name = 'Stack';
  var lastname = 'Overflow';
   if( name == 'Stack' && lastname == 'Overflow' )
   alert('Hi Stacker!');
});

So my alert is fired...

If I put my condition inside a brackets like this:

 $(document).ready(function(){
  var name = 'Stack';
  var lastname = 'Overflow';
   if( (name == 'Stack') && (lastname == 'Overflow') ){
      alert('Hi Stacker!');
   } 
});

My alert is also fired...

My question is: When and why I should use parentheses inside my if condition? Thank you!

I have a if condition like so:

$(document).ready(function(){
  var name = 'Stack';
  var lastname = 'Overflow';
   if( name == 'Stack' && lastname == 'Overflow' )
   alert('Hi Stacker!');
});

So my alert is fired...

If I put my condition inside a brackets like this:

 $(document).ready(function(){
  var name = 'Stack';
  var lastname = 'Overflow';
   if( (name == 'Stack') && (lastname == 'Overflow') ){
      alert('Hi Stacker!');
   } 
});

My alert is also fired...

My question is: When and why I should use parentheses inside my if condition? Thank you!

• javascript
• jquery

• You use it to group statements, the example you had will produce the same result with or without the bracers. If you want a set of statements to run before another then you can put them in () – Huangism Commented Mar 6, 2014 at 14:23
• 1 You should generally use the parenthesis when you have to, and that would be when issues with operator presedence occur. – adeneo Commented Mar 6, 2014 at 14:25
• 3 @JFit OP is talking about ( ) inside the conditional expression, not { } wrapping the body of the if statement. – ajp15243 Commented Mar 6, 2014 at 14:25
• ahhh my bad.. lol sry. removed my ment. – JF it Commented Mar 6, 2014 at 14:26

9 Answers 9

There is no much difference in your example. You can read that for reference Operator Precedence (JavaScript)

You use it to force associations, in your example this won't change anything. But consider this case:

A and B or C 

is a lot different from

A and (B or C)

Here you would be preventing the expression from being understood as (A and B) or C which is the natural way javascript and maths do things.

Brackets () are used to group statements.

Ex - if you have an expression '2 + 3 * 5'.

There are two ways of reading this: (2+3)*5 or 2+(3*5).

To get the correct o/p based on operator precedence, you have to group the correct expression like * has higher precedence over +, so the correct one will be 2+(3*5).

Because of operator precedence :

https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

you'd better read this if you want more details

But basically == (equality) weights more than && (logical-and) , so A == B is evaluated before C && D given

C <- A == B

and

D <- E == F

so adding parenthesis to C or D dont matter,in that specific situation.

Brackets can be used, if multiple conditions needs to be checked.

For ex: User is also a Stacker if full name is 'StackOverflow' then add another condition with 'Or' operator.

if(((name == 'Stack') && (lastname == 'Overflow')) || FullName =='StackOverflow')

As you can see, name and last name are placed inside one bracket meaning that it gives a result either true or false and then it does OR operation with FullName condition.

And having brackets around name, lastname and fullname fields are optional since it doesn't make any difference to the condition. But if you are checking other condition with FullName then group them into bracket.

Brackets are never required in such situations. Of course, try to read first solution (without) and second solution (with). Second one it's clear, fast-readable and easy to mantain.

Of course if you have to change precedence (in this case you just have an AND condition, but what if you need and AND and an OR? 1 and 2 or 3 priority changes between "(1 and 2) or 3" - "1 and (2 or 3)"

first bracket requires for plex condition to ensure operator precedence correctly. lets say a example

   var x=1,y=1,z=0;
   
    if(x==0 && y==1 || z==0)   
    {
      //always true for any value of x
    }
    what will happen here  
    (0 && 1 ||1) ----> (0 ||1)----->1 
    && has high precedence over ||
   
    if(x==0 && (y==1 || z==0)) alert('1');
    {
     //correct way
    }

if you do not use (y==1 || z==0) bracket the condition always will be true for any value of x.

but if you use (..) the condition return correct result.

Conditional statements can be grouped together using parenthesis. And is not only limited to if statements. You can run the example below in your Chrome Developer Tools.

Example 1:

Console Execution

  false && false || true
  // true

flow

  false && false || true
    |        |        |
    |________|        |
    |                 |
    |                 |
  false     or      true
    |                 |
    |_________________|
               |
               |
              true

Example 2:

Console Execution

  false && (false || true)
  // false

flow

  false && (false || true)
    |              |        
    |______________|
    |
    |
  false

Helpful resources for playing around with JSInterpreter and AST's:

• https://neil.fraser.name/software/JS-Interpreter/
• https://esprima/demo/parse.html#

Consider the statement

if( i==10 || j == 11 && k == 12 || l == 13)

what you would want is if either i is 10 or j is 11 And either k is 12 or l is 13 then the result shouldbe true, but say if i is 10, j is 11, k is 10 and l is 13 the condition will fail, because the fate of equation is decided at k as aoon as && es in picture. Now if you dont want this to happen the put it like this

if( (i==10 || j == 11) && (k == 12 || l == 13))

In this ORs will be executed first and the result will be true.