Teachnique
      CourseRoadmaps
      Login

      OverviewPlacementSyntaxHello WorldConsole.log()CommentsVariableslet StatementConstantsData TypesType ConversionsStrict ModeReserved Keywords

      OperatorsArithmetic OperatorsComparison OperatorsLogical OperatorsBitwise OperatorsAssignment OperatorsConditional Operatorstypeof OperatorNullish Coalescing OperatorDelete OperatorComma OperatorGrouping OperatorYield OperatorSpread OperatorExponentiation OperatorOperator Precedence

      If...ElseWhile LoopsFor LoopFor...in LoopFor...of LoopLoop ControlBreak StatementContinue StatementSwitch CaseUser Defined Iterators

      FunctionsFunction ExpressionsFunction ParametersDefault ParametersFunction() ConstructorFunction HoistingArrow FunctionsFunction InvocationFunction call() MethodFunction apply() MethodFunction bind() MethodClosuresVariable ScopeGlobal VariablesSmart Function Parameters

      NumberBooleanStringsArraysDateMathRegExpSymbolSetsWeakSetMapsWeakMapIterablesReflectTypedArrayTempate LiteralsTagged Templates

      Objects OverviewClassesObject PropertiesObject MethodsStatic MethodsDisplay ObjectsObject AccessorsObject ConstructorsNative PrototypesES5 Object MethodsEncapsulationInheritanceAbstractionPolymorphismDestructuring AssignmentObject DestructuringArray DestructuringNested DestructuringOptional ChainingGlobal ObjectMixinsProxies

      HistoryVersionsES5ES6ECMAScript 2016ECMAScript 2017ECMAScript 2018ECMAScript 2019ECMAScript 2020ECMAScript 2021ECMAScript 2022

      CookiesCookie AttributesDeleting Cookies

      Browser Object ModelWindow ObjectDocument ObjectScreen ObjectHistory ObjectNavigator ObjectLocation ObjectConsole Object

      Web APIHistory APIStorage APIForms APIWorker APIFetch APIGeolocation API

      EventsDOM Events

      Feedback

      Submit request if you have any questions.

      Course
      Grouping Operator

      JavaScript Tutorial

      This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

      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