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
      Comma 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.

      Comma Operator

      JavaScript Comma Operator

      The comma operator (,) in JavaScript evaluates the multiple expression from left to right. You can use the resultant value of the left expression as an input of the right expression. After evaluating all expressions, it returns the resultant value of the rightmost expression.
      However, the comma operator is also used in the 'for' loop, array, object, etc. In this chapter, you will learn all the use cases of the comma operator.

      Syntax

      You should follow the below syntax to use the comma expression to evaluate multiple expressions.
      var answer = (exp1, exp2, exp3, ex4, ...);

      Return value

      It returns the resultant value of the last expression only.

      Examples

      Let's understand the JavaScript comma operator in details with the help of some exmaples

      Example: The Comma Operator with Strings

      In the example below, we have added the 4 comma seprated strings in the braces. Here, each string works as an expression. The code will evaluate the string and return the last string. In the output, you can see that it prints the 'CSS' as it is the rightmost string.
      <html>
      <body>
          <p id = "output"> </p>
          <script>
              let output = document.getElementById("output");
              let ans = ("JavaScript", "Python", "HTML", "CSS");
              output.innerHTML = "The value of the ans variable is: " + ans;
          </script>
      </body>
      </html>

      Example: The Comma Operator with Expressions

      In the example below, we have defined the variable 'a' and initialized it with 5. In the 'ans' variable, we store the resultant value the comma operator returns. The first expression updates the value of a to 8, the second expression increments the value of a by 1, and the third expression adds 2 to the updated value of the variable 'a'.
      The value of the 'ans' is 11, which is returned by the rightmost expression of the comma operator.
      <html>
      <body>
          <p id = "output"> </p>
          <script>
              let output = document.getElementById("output");
              let a = 5;
              let ans = (a = 8, a++, a += 2);
              output.innerHTML = "The value of the ans variable is: " + ans;
          </script>
      </body>
      </html>

      Example: The comma operator with functions

      In the example below, we have defined the first() and second() functions. Also, it prints the message and returns the value from the function according to the function name.
      We use the comma operator to execute the multiple functions. In the output, you can see that it invokes both functions but prints the returned value from the second() function only.
      <html>
      <body>
          <p id="output"> </p>
          <script>
              let output = document.getElementById("output");
              function first() {
                  output.innerHTML += "The first function is called! <br/>";
                  return 1;
              }
      
              function second() {
                  output.innerHTML += "The second function is called! <br/>";
                  return 2;
              }
      
              let ans = (first(), second());
              output.innerHTML += "The value of the ans variable is: " + ans;
          </script>
      </body>
      </html>

      Other Use Cases of The Comma Operator

      For defining the multiple variables in a single row.
      let m = 1, n = 2, x = 3;
      To initialize the array with multiple elements.
      const arr = [10, 20, 30, 40, 50, 60];
      For defining the object with multiple properties.
      const obj = {
         name: "tutorialspoint",
         age: 10,
         ... other properties
      }
      You can use the comma operator for loop to initialize or update multiple variables in each iteration.
      for(let p = 0, q = 1; p < n; p++, q++) {
       // Code for the loop
      }
      To pass multiple parameters of arguments into the functions.
      function func(param1, param2, ... ) {  
       // function code
       }
      
      OR
      func(10, 20, 30, ...);
      To import or export
      import { func2, variable } from './module2.js';
      OR
      export {func1, variable, num};
      To destructure arrays of objects.
      let [a, b, c] = [34, 72, 23];
      To print multiple variables in the console.
      console.log(a, b, c) // a, b, and c are variables.