• JavaScript Video Tutorials

JavaScript - Grouping Operator

JavaScript Grouping Operator

The grouping operator in JavaScript controls the precedence of the evaluation in expressions. It is denoted by parenthesis (), and you can put the expression inside that to change the expression evaluation order. It helps to evaluate an expression with lower precedence before an expression with higher precedence.

Syntax

You can follow the syntax below to use the grouping operator –

( exp )

In the above syntax, the 'exp' is an expression to change the precedence of evaluation.

let res1 = 4 + 5 * 6; // 4 + 30
let res2 = (4 + 5) * 6; // 9 + 6

The multiplication (*) operator in JavaScript has higher precedence than the addition (+) operator. So, when the above code evaluates the first expression, it will multiply 5 and 6 and add the resultant value to 4.

In the second expression, we grouped the (4 + 5) expression using the grouping operator to provide it with higher precedence than the normal operator. So, it adds 4 and 5 first and multiplies the resultant value with 6.

Example

<html>
<body>
<div id="output"></div>
<script>
   let res1 = 4 + 5 * 6;
   let res2 = (4 + 5) * 6;
   document.getElementById("output").innerHTML =
   "Result 1: " + res1 + "<br>" +
   "Result 2: " + res2;
</script>
</body>
</html>

It will produce the following result −

Result 1: 34
Result 2: 54

Immediately Invoked Function Expressions (IIFEs)

To define an immediately invoked function in JavaScript, we use the grouping operator. The anonymous function definition is put inside the grouping operator. These functions are also called self-executing functions.

(function () { return 5; })();

In the above example, the function definition "function () { return 5;}" in put inside the grouping operator.

Example

In the example below, we have defined the self-executing function statement using the grouping operator.

The first expression divides 10 by 5 (returned value from the function) and adds the resultant value, which is 2 to 5.

The second expression adds 5 and 10 first and divides the resultant value with the value returned from the function.

<html>
<body>
<div id="output"></div>
<script>
   let ans1 = 5 + 10 / (function () { return 5; })();
   let ans2 = (5 + 10) / (function () { return 5; })();
   document.getElementById("output").innerHTML =
   "Result 1: " + ans1 + "<br>" +
   "Result 2: " + ans2;
</script>
</body>
</html>

It will produce the following result −

Result 1: 7
Result 2: 3

In simple terms, the grouping operator is used to group the sub-expressions to change its evaluation precedence over the normal precedence.

Grouping Operator with Logical Operators

The grouping operator in JavaScript can also be used to group expressions with logical operators. For example, in the following expression, the && operator has a higher precedence than the ||operator. So, the expression will be evaluated as follows:

false && false || true; // true

However, if we add parentheses around the ||operator, the expression will be evaluated as follows:

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

This is because the grouping operator overrides the normal operator precedence, so that the ||operator is evaluated first.

Example

This example demonstrates that how a grouping operator changes the precedence of OR operator to be evaluated before AND operator. The expression uses the logical operators.

<html>
<body>
<div id="output"></div>
<script>
   let res1 =  false && false || true // true
   let res2 = false && (false || true) //false
   document.getElementById("output").innerHTML =
   "Result without grouping operator: " + res1 + "<br>" +
   "Result with grouping operator: " + res2;
</script>
</body>
</html>

It will produce the following result −

Result without grouping operator: true
Result with grouping operator: false
Advertisements