Skip to content

Commit

Permalink
Fix lint errors
Browse files Browse the repository at this point in the history
  • Loading branch information
PragatiVerma18 committed Dec 24, 2024
1 parent 1035991 commit 9c5c47e
Showing 1 changed file with 34 additions and 29 deletions.
63 changes: 34 additions & 29 deletions content/javascript/concepts/optional-chaining/optional-chaining.md
Original file line number Diff line number Diff line change
@@ -1,57 +1,58 @@
---
Title: 'Optional Chaining'
Description: 'The optional chaining operator simplifies the comparison of multiple data properties in a chain of connected objects.'
Subjects:
Description: 'The optional chaining operator simplifies the comparison of multiple data properties in a chain of connected objects.'
Subjects:
- 'Web Development'
- 'Computer Science'
Tags:
Tags:
- 'Data'
- 'Operators'
CatalogContent:
CatalogContent:
- 'introduction-to-javascript'
- 'paths/front-end-engineer-career-path'
---

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

## Syntax

The basic syntax for using optional chaining is as follows:
The basic syntax for using optional chaining is as follows:

```js
// To access an object property
object?.property
object?.property;

//To access an element in an array
array?.[index]
array?.[index];

//To invoke a function (if it exists)
object?.method?.()
object?.method?.();
```
## Examples
### Accessing Object Properties
To search for the `state` object of `person`:
```js
const person = {
name: "Alice",
gender: "Female",
name: 'Alice',
gender: 'Female',
age: 12,
address: {
street: "1111 Palm Ave",
city: "Broken Arrow",
state1: "Oklahoma"
street: '1111 Palm Ave',
city: 'Broken Arrow',
state1: 'Oklahoma',
},
favoriteFoods: ["pizza", "ice cream", "cake"],
commonPhrase: function() {
favoriteFoods: ['pizza', 'ice cream', 'cake'],
commonPhrase: function () {
return `${this.name} always says "I love ${this.address.state1}."`;
}
},
};

// Regular syntax for checking if the state1 property exists
Expand All @@ -71,30 +72,34 @@ State (optional chaining) is: Oklahoma
```
### Accessing Array Elements
To search for the `cake` in the `favoriteFoods` array of `person`:
```js
const person = {
name: "Alice",
gender: "Female",
name: 'Alice',
gender: 'Female',
age: 12,
address: {
street: "1111 Palm Ave",
city: "Broken Arrow",
state1: "Oklahoma"
street: '1111 Palm Ave',
city: 'Broken Arrow',
state1: 'Oklahoma',
},
favoriteFoods: ["pizza", "ice cream", "cake"],
commonPhrase: function() {
favoriteFoods: ['pizza', 'ice cream', 'cake'],
commonPhrase: function () {
return `${this.name} always says "I love ${this.address.state1}."`;
}
},
};

// Regular Syntax for searching favorite food
const foodRegular = person && person.favoriteFoods && person.favoriteFoods.find(item => item === "cake");
const foodRegular =
person &&
person.favoriteFoods &&
person.favoriteFoods.find((item) => item === 'cake');
console.log(`Favorite Food (regular syntax) is: ${foodRegular}`);

// This can be rewritten as:
const foodChaining = person?.favoriteFoods.find(item => item === "cake");
const foodChaining = person?.favoriteFoods.find((item) => item === 'cake');
console.log(`Favorite Food (optional chaining) is: ${foodChaining}`);
```
Expand All @@ -106,6 +111,7 @@ Favorite Food (optional chaining) is: cake
```
### Accessing Object Functions
To determine if the `commonPhrase` function exists in `person` before invoking it:
```js
Expand All @@ -119,11 +125,10 @@ console.log(`${phrase}`);
const phrase = person?.commonPhrase?.();
console.log(`${phrase}`);

//The output for both is:
//The output for both is:
Alice always says "I love Oklahoma."
```
## Codebyte Example
Run the following example and compare the regular syntax of conditional statements and optional chaining on a more complex data set.
Expand Down

0 comments on commit 9c5c47e

Please sign in to comment.