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.

Optional Chaining
The optional chaining in JavaScript allows you to access nested properties and methods of an object without checking if each property exists. This can help to make your code more concise and easier to read.
The optional chaining operator (?.) is sued to achieve optional chaining in JavaScript. It is placed before the property or method that you want to access. If the property or method does not exist, the expression will evaluate to undefined instead of throwing an error.
The Non-existing Property Problem
Let's understand the need for optional chaining in JavaScript via the non-existing property problem.
While working with objects in JavaScript, you may have objects with dynamic properties. Some properties also contain the object as a value, called nested objects.
JavaScript can throw an error if you try to access the nested property whose parent doesn't exist.
For example,
const parent = {
    child: {
        name: "Smith",
    }
}
const name = parent.child.name;
The parent object contains the 'ch' property, and the 'ch' property contains the nested object as a value.
In the code, you access the 'name' property of the 'child' nested object, but the 'child' property doesn't exist in the parent object. So, JavaScript will throw the below error as you access the undefined property.
Uncaught TypeError: Cannot read properties of undefined
To solve the above problem, the '&&' operator was used before ES11.
For example,
if (parent.child && parent.child.name) {
   // access parent.child.name here
}
In the above code, we first check whether the parent.child exists. If yes, we access its name property to avoid the error.
You got the solution, but what if you need to access the property from the 4th or 5th level of the object? You need to use multiple && operators and write complex code.
Here, the optional chaining operator (?.) comes into the picture to solve the non-existing property problem easily.
What is an Optional Chaining in JavaScript?
In JavaScript, optional chining operator (?.) is introduced in ECMAScript 2020 (ES2020). It provides the best way to access object properties, array elements, etc.
The optional chaining is very similar to normal chaining used to access the nested properties of the object. It checks whether the nested property exists before accessing the object property to avoid the error.
Syntax
You can follow the syntax below to use the optional chaining operator in JavaScript.
Obj?.prop1?.nestedprop; // Accessing nested properties
Obj?.[expression]; // Accessing object property via expression
Array?.[index]; // Accessing array element
funcName?.(); // Executing the funciton 
In the above syntax, if the obj object exists, it will access the prop1 property. Again the code checks if the prop1 property exists in the obj object, it will access the nestedProp property. Otherwise, it will stop the code execution to avoid errors.
You can also access the object property value using the expression and optional chaining.
Optional chaining can also be used for accessing array elements and executing the function.
Return value
If a property does not exist, the optional chain returns undefined without throwing any error.
Example
In the example below, the car object contains the 'info' nested object. The info object contains the color and price property.
We try to access the price property of the info object using the optional chain, it returns 5000000.
After that, we try to access the gears property of the engine property of the car object using the optional chain. In the output, you can see that it returns undefined rather than throwing an error.
<html>
<body>
   <div id = "output1">The price of the Audi Q6 is: </div>
   <div id = "output2">Total gears in the Audi Q6 is: </div>
   <script>
      const car = {
         brand: "Audi",
         model: "Q6",
         info: {
            price: 5000000,
            color: "Black",
         }
      }
      document.getElementById("output1").innerHTML += car.info?.price;
      document.getElementById("output2").innerHTML += car.engine?.gears;
   </script>
</body>
</html>
Output
The price of the Audi Q6 is: 5000000
Total gears in the Audi Q6 is: undefined
Optional Chaining with Function Calls
In JavaScript, you can also use the optional chaining with the function calls. If the function is not defined, it will return the undefined. Otherwise, the code will execute the function.
Example
In the below code, we used the optional chain with object methods.
The car object contains the getBrand() method. We used the optional chain while executing the getBrand() method, which returns 'Audi'.
Also, we try to execute the getColor() method of the car object with an optional chain. It returns undefined as the car object doesn't contain the getColor() method.
<html>
<body>
   <div id = "output1">The brand of the car is: </div>
   <div id = "output2">The color of the car is: </div>
   <script>
      const car = {
         getBrand() {
            return "Audi";
         },
      }
      document.getElementById("output1").innerHTML += car.getBrand?.();
      document.getElementById("output2").innerHTML += car.getColor?.();
   </script>
</body>
</html>
Output
The brand of the car is: Audi
The color of the car is: undefined
Optional Chaining with Expression
You can use the optional chain while accessing the object properties using the expression or array element.
Example
In the below code, the animal object contains the name and info property. The info property again contains the nested object having legs and tail properties.
We access the object properties using the optional chain and expression. You can see that it prints the output in the code without throwing any error, even the 'specs' property doesn't exist in the animal object.
<html>
<body>
   <div id = "output1">Total number of legs of the tiger is: </div>
   <div id = "output2">The color of the tiger is: </div>
   <script>
      const animal = {
         name: "Tiger",
         info: {
            legs: 4,
            tail: 1,
         }
      }
      document.getElementById("output1").innerHTML += animal.info?.["legs"];
      document.getElementById("output2").innerHTML += animal.specs?.["color"];
   </script>
</body>
</html>
Output
Total number of legs of the tiger is: 4
The color of the tiger is: undefined
Optional Chaining with the "delete" Operator
The JavaScript delete operator is used to delete the object properties. If you try to delete properties that do not exist, the code will throw an error. So, you can use the optional chain operator with the delete operator.
Example
In the below code, we delete the legs property of the nested info object and the tail property of the 'specs' nested object using the delete operator and access properties using the optional chain.
The animal object doesn't contain the specs property. Still, the code runs without any error due to the optional chain.
<html>
<body>
   <div id = "demo"> </div>
   <script>
      const animal = {
         name: "Tiger",
         info: {
            legs: 4,
            tail: 1,
         }
      }
      delete animal.info?.legs;
      delete animal.sepcs?.tail;
      document.getElementById("demo").innerHTML = 
      "Updated object is: " + JSON.stringify(animal);
   </script>
</body>
</html>
Output
Updated object is: {"name":"Tiger","info":{"tail":1}}
Short-circuiting with Optional Chaining
In JavaScript, the meaning of short-circuiting is that whenever you get an error, stop the execution of the code. You can use the optional chain for accessing each nested property of the object to avoid any error and stop the execution of the code on error.
Example
In the below code, the animal object contains the info object, and the info object contains the legs object. We use the optional chain to access each nested property. So, if any property doesn't exist, it will return undefined and avoid errors.
<html>
<body>
   <div id = "output1">The size of the first leg is: </div>
   <div id = "output2"> The size of the third leg is: </div>
   <script>
      const animal = {
         name: "Tiger",
         info: {
            legs: {
               first: 1.32,
               second: 1.31,
            },
            tail: 1,
         }
      }
      document.getElementById("output1").innerHTML += animal?.info?.legs?.first;
      document.getElementById("output2").innerHTML += animal?.specs?.legs?.third;
    </script>
</body>
</html>
Output
The size of the first leg is: 1.32
The size of the third leg is: undefined
Nullish Coalescing Operator with Optional Chaining
When any object property doesn't exist, the optional chain stops the code execution and returns undefined. If you use the JavaScript nullish coalescing operator with it, you can return the default value when the object property doesn't exist.
Example
In the below code, we try to access the color property of the 'specs' object of the 'animal' object. Here, 'specs' do not exist in the animal object. So, it returns 'red' as we used the nullish coalescing operator.
<html>
<body>
   <div id = "output">The color of the animal is: </div>
   <script>
      const animal = {
         name: "Tiger",
         info: {
            legs: 2,
            tail: 1,
         }
      }
      animal.info?.legs;
      const color = animal?.spec?.color ?? "Red";
      document.getElementById("output").innerHTML += color;
   </script>
</body>
</html>
Output
The color of the animal is: Red
In simple terms, you can use the optional chain operator wherever you need to access the properties of the dynamic object to avoid an error.


﻿
﻿

Javascript Basics

JavaScript Operators

JavaScript Control Flow

JavaScript Functions

JavaScript Objects

Object Oriented JavaScript

JavaScript Versions

JavaScript Cookies

JavaScript Browser BOM

JavaScript Web APIs

JavaScript Events

JavaScript Tutorial

Optional Chaining

The Non-existing Property Problem

What is an Optional Chaining in JavaScript?

Syntax

Return value

Example

Output

Optional Chaining with Function Calls

Example

Output

Optional Chaining with Expression

Example

Output

Optional Chaining with the "delete" Operator

Example

Output

Short-circuiting with Optional Chaining

Example

Output

Nullish Coalescing Operator with Optional Chaining

Example

Output