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
      Nullish Coalescing 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.

      Nullish Coalescing Operator

      Nullish Coalescing Operator

      The Nullish Coalescing operator in JavaScript is represented by two question marks (??). It takes two operands and returns the first operand if it is not null or undefined. Otherwise, it returns the second operand. It is a logical operator introduced in ES2020.
      In many cases, we can have the null or empty values stored in the variables, which can change the behavior of the code or generate errors. So, we can use the Nullish Coalescing operator to use the default values when a variable contains falsy values.

      Syntax

      We can follow the syntax below to use the Nullish Coalescing operator.
      op1 ?? op2
      The nullish coalescing operator (??) returns the second operand (op2) if the first operand (op1) is null or undefined. Otherwise, the 'res' variable will contain 'op2'.
      The above syntax is similar to the below code.
      let res;
      if (op1 != null || op1 != undefined) {
         res = op1;
      } else {
         res = op2;
      }

      Examples

      Let's undersand the nullish coalescing operator in details with the help of some examples.

      Example: Handling null or undefined

      In the example below, the value of the x is null. We used the x as the first operand and 5 as the second. You can see in the output that the value of y is 5, as x is null. You can assign undefined to the variable.
      <html>
      <body>
         <div id = "output"></div>
         <script>
            let x = null;
            let y = x ?? 5;
            document.getElementById("output").innerHTML = 
      	  "The value of y is: " + y;
         </script>
         </body>
      </html>
      It will produce the following result
      The value of y is: 5

      Example: Handling null or undefined in Arrays

      In the example below, we have defined an array containing numbers. We used the empty array ([]) as a second operand. So, if arr is null or undefined, we assign an empty array to the arr1 variable.
      <html>
      <body>
         <div id = "output"></div>
         <script>
            const arr = [65, 2, 56, 2, 3, 12];
            const arr1 = arr ?? [];
            document.getElementById("output").innerHTML = "The value of arr1 is: " + arr1;
         </script>
      </body>
      </html>
      It will produce the following result
      The value of arr1 is: 65,2,56,2,3,12

      Example: Accessing Object Properties

      In the example below, we created the object containing the mobile-related properties. After that, we access the properties of the object and initialize the variables with value. The object doesn't contain the 'brand' property, so the code initializes the 'brand' variable with the 'Apple', which you can see in the output.
      In this way, we can use the Nullish Coalescing operator while accessing the properties of objects having different properties.
      <html>
      <body>
         <div id = "output"></div>
         <script>
            const obj = {
               product: "Mobile",
               price: 20000,
               color: "Blue",
            }
      
           let product = obj.product ?? "Watch";
           let brand = obj.brand ?? "Apple";
           document.getElementById("output").innerHTML =
      	 "The product is " + product + " of the brand " + brand;
         </script>
      </body>
      </html>
      It will produce the following result
      The product is Mobile of the brand Apple

      Short-Circuiting

      Like Logical AND, and OR operators, the Nullish Coalescing operator doesn't evaluate the right-hand operand if the left-hand operand is neither null nor undefined.

      Using ?? with && or ||

      When we use the ?? operator with logical AND or OR operators, we should use the parenthesis to explicitly specify the precedence.
      let x = 5 || 7 ?? 9; // Syntax Error
      let x = (5 || 7) ?? 9; // works

      Example

      In the example below, we have used nullish coalescing operator with OR operator (||) and AND operator (&&).
      <html>
      <body>
        <div id = "output"></div>
        <script>
          let x = (5 || 7) ?? 9;
          let y = (5 && 7) ?? 9;
          document.getElementById("output").innerHTML =
            "The value of x is : " + x + "<br>" + 
            "The value of y is : " + y;
      </script>
      </body>
      </html>
      The above program will produce the following result
      The value of x is : 5
      The value of y is : 7