Update optional-chaining.md

Author: PragatiVerma18

content/javascript/concepts/optional-chaining/optional-chaining.md

@@ -14,7 +14,7 @@ CatalogContent:
 
 The **optional chaining** operator simplifies comparing multiple data properties in a chain of connected objects. This is especially valuable if any of the properties are `null`, as the operator will return `undefined` instead of throwing an error.
 
-Optional chaning can be used to validate nested object properties, call optional functions or methods on optional objects, accessing arrary elements, and more. 
+Optional chaning can be used to validate nested object properties, call optional functions or methods on optional objects, accessing array elements, and more. 
 
 The primary benefits of using optional chaining instead of regular syntax include simplifying the code to achieve the same result, making it easier to read, protecting against runtime errors, and enhancing maintainability.
 
@@ -33,8 +33,10 @@ array?.[index]
 object?.method?.()
 ```
 
-## Example
-This person object lists an individual's details and containing properties, nested objects, an array, and a method. Optional chaining for each conditional evaluation is listed below. 
+## Examples
+
+### Accessing Object Properties
+To search for the `state` object of `person`:
 
 ```js
 const person = {
@@ -44,48 +46,66 @@ const person = {
   address: {
     street: "1111 Palm Ave", 
     city: "Broken Arrow",
-    state: "Oklahoma"
+    state1: "Oklahoma"
   },
   favoriteFoods: ["pizza", "ice cream", "cake"], 
   commonPhrase: function() {
-    return `${this.name} always says "I love ${this.address.state}."`;
+    return `${this.name} always says "I love ${this.address.state1}."`;
   }
 };
-```
 
-## Accessing Object Properties
-To search for the `state` object of `person`:
+// Regular syntax for checking if the state1 property exists
+const state1Regular = person && person.address && person.address.state1;
+console.log(`State (regular syntax) is: ${state1Regular}`);
 
-```js
-//Regular syntax
-const state = person && person.address && person.address.state;
-console.log(`State is: ${state}`);
+// This can be rewritten as:
+const state1Chaining = person?.address?.state1;
+console.log(`State (optional chaining) is: ${state1Chaining}`);
+```
 
-//This can be rewritten as:
-const state = person?.address?.state;
-console.log(`State is: ${state}`);
+The output of the above code will be as follows:
 
-//The output for both is: 
-State is: Oklahoma
+```shell
+State (regular syntax) is: Oklahoma
+State (optional chaining) is: Oklahoma
 ```
 
-## Accessing Arrary Elements
+### Accessing Array Elements
 To search for the `cake` in the `favoriteFoods` array of `person`:
 
 ```js
-//Regular Syntax
-const food = person && person.favoriteFoods && person.favoriteFoods.find(item => item === "cake");
-console.log(`Favorite Food is: ${food}`);
+const person = {
+  name: "Alice",
+  gender: "Female",
+  age: 12,
+  address: {
+    street: "1111 Palm Ave", 
+    city: "Broken Arrow",
+    state1: "Oklahoma"
+  },
+  favoriteFoods: ["pizza", "ice cream", "cake"], 
+  commonPhrase: function() {
+    return `${this.name} always says "I love ${this.address.state1}."`;
+  }
+};
 
-//This can be rewritten as:
-const food = person?.favoriteFoods.find(item => item === "cake");
-console.log(`Favorite Food is: ${food}`)
+// Regular Syntax for searching favorite food
+const foodRegular = person && person.favoriteFoods && person.favoriteFoods.find(item => item === "cake");
+console.log(`Favorite Food (regular syntax) is: ${foodRegular}`);
 
-//The output for both is: 
-Favorite Food is: cake
+// This can be rewritten as:
+const foodChaining = person?.favoriteFoods.find(item => item === "cake");
+console.log(`Favorite Food (optional chaining) is: ${foodChaining}`);
+```
+
+The output of the above code will be as follows:
+
+```shell
+Favorite Food (regular syntax) is: cake
+Favorite Food (optional chaining) is: cake
 ```
 
-## Accessing Object Functions
+### Accessing Object Functions
 To determine if the `commonPhrase` function exists in `person` before invoking it:
 
 ```js
@@ -153,15 +173,15 @@ const people = [
   }
 ];
 
-// Regular syntax for checking if a person's city exists
+console.log("Using Regular Syntax for City:");
 people.forEach((person, index) => {
   const city = person && person.address && person.address.city;
-  console.log(`Person ${index + 1}: City: ${city}`);
+  console.log(`Person ${index + 1}: City: ${city ?? "Not Available"}`);
 });
 
-// Optional chaining for simpler access
+console.log("\nUsing Optional Chaining for Age:");
 people.forEach((person, index) => {
-const age = person?.age;
-console.log(`Person ${index + 1}: Age: ${age}`);
+  const age = person?.age;
+  console.log(`Person ${index + 1}: Age: ${age ?? "Not Available"}`);
 });
 ```