Topics covered:
1- Intro
2- Optional Chaining with Functions
3- Optional Chaining with Expressions
4- Optional Chaining with Arrays
5- With Nullish Operator
1- Intro
Optional chaining operator ?. loves you to read the value of within objects / nested objects with safety.
?. is similar to . except if the property in a object does not exist while accessing, it will return undefined instead of error/ breaking the program. This means you can explore The object with the carefree mind whether the property exists or not, thus making your code more solid.
const person = {
name: 'John',
dog: {
name: 'toto'
}
}
const catName = person.cat.name // error
const catName = person.cat?.name // error-free line (undefined)
Safety handling with & without Optional Chaining
//without optional chaining
const catName = person.cat ? person.cat.name : undefined
//without optional chaining
const catName = person.cat?.name
Handling safety in deeper objects destroys the code readability
2- Optional Chaining with function call
Wooaahh! You can also call function with the peace of mind while digging in objects
const person = {
name: 'John',
vehicle: {
year: 2012,
drive(){
return "I am driving"
}
}
}
const catName = person.vehicle?.drive?.()
3- Optional Chaining with property accessors (bracket notation)
Optional chaining operator while accessing the object values using bracket
const person = {
name: 'John',
dog: {
name: 'toto'
}
}
const catName = person.['dog']?.['name']
4- Optional Chaining with Arrays
You can use optional chaining with array too while accessing its elements
let arrayItem = arr?.[42];
5- With Nullish Operator
You can set the default value instead of returning undefined
const person = {
name: 'John',
dog: {
name: 'toto'
}
}
const catName = person.cat?.name ?? 'Maani'
console.log(catName) //Maani
Top comments (0)