Breaking News: Grepper is joining You.com. Read the official announcement!

What is ?. (Question mark and Dot) syntax in React JS / Javascript, and where do we use this syntax?

M Hassan khan answered on December 21, 2022 Popularity 8/10 Helpfulness 2/10

answer What is ?. (Question mark and Dot) syntax in React JS / Javascript, and where do we use this syntax?

What is ?. (Question mark and Dot) syntax in React JS / Javascript, and where do we use this syntax?

Comment

results?.data?.breeds ?? [ ]

If this is available (results.data.breeds), give me that, otherwise 
dont give me error. Basically if I dont have results yet , give 
me empty array, otherwise give me the results. 

Lets begin learning ....Its fairly recent feature in JS, so if 
you dont know , very forgivable


Optional chaining (?.) in JavaScript is part of the ES2020 release. 
This operator enables us to safely access nested properties 
by handling null/undefined references. 

In simple words, the Optional chaining operator when met with
a non-existing property instead of throwing a reference error,
it returns undefined.


Example

const movie = {
   name: 'Nomadland',
   year: 2020,
}

const rating = movie.rating.imdb;
console.log(rating);
// Error: movie.rating is undefined

// using Optional chaining
const getRating = movie.rating?.imdb;
console.log(getRating);
// undefined

How it works?

In JavaScript, it is a common practice to access deep and nested
object properties,
we write code assuming the properties of given objects but during
runtime they might change and accessing a nested property that 
is undefined/null can throw an error and break the execution flow.

This problem is previously handled by using the logical AND (&&)
operator,however using optional chaining we can do the same with
almost no duplicate code and easier error handling.

(&&) vs (?.)
// Using (&&)
const name = data.user && data.user.name;

// Using (?.)
const userName = data.user?.name;

Points to remember:

Optional chaining short circuits (stops further execution) and 
returns undefined.
The root object must be defined (ex: data in above example)
Don’t overuse optional chaining, though it can prevent all errors
it must be used to prevent unforeseen runtime errors only


Other use cases
object.method?.();
object.array?.[index];
object.value?.property;
object.value?.[expression];

Combining with Nullish Coalescing operator
The Nullish coalescing operator compares and returns the value 
on the right when the value on the left is null/undefined.
This is used to set the default value. 

const data = { };
const name = data.user?.name ?? 'not found';

console.log(name); // not found

This way we can use the Optional chaining operator (?.) to handle 
null/undefined properties and the use the Nullish coalescing 
operator (??) to set a default value.

It’s Stackable (chainable)
Yes, there’s more. In JavaScript, we often deal with deeply 
nested objects, and we might expect nullish values at any point 
of reference. 
Thankfully, we can stack the optional chaining operator to 
handle every possible reference.

const data = {
     user: {
         name: 'Fern',
         age: 61,
         contact: {
             email: "fern@nomadland.com"
         }
     }
 }
 const phone = data.user?.contact?.phone;
 console.log(phone); // undefined



// simple example

Let me explain this through an example, that will make you 
understand the concept effectively and comprehensively.


const user1 = { 
  name: 'random', 
  age: 36 
} 
 
console.log(user1.name) // random
 
const user2 = undefined; 
 
console.log(user2.name)

// will throw an error as user2 is undefined. 

suppose instead of undefined, if it had been an empty object 
then also it would have thrown an undefined error because the 
name property is not included in the user2 object. 
 
const user3 = undefined; 
 
console.log(user3?.name) 

// here, it will return a false value as an output 
since it first checks whether the user is available or not. 
If user3 is undefined or empty then it would not check further. 
suppose user3 had been present with name property then it would have 
returned the value of name property. 

Another way of writing optional chaining:

person && person.city && person.city.address  
//can be written as: 
person?.city?.address


Example:

It is used for adding an additional check whether the property
that you are referring to has been set or not for example if 
you have following json object:

person={

“name":”Michael",

“age":28

}

you can refer to it like person?.name

it wont throw an error even if the property is not defined.



Explanation:

The ?. is called Elvis Operator (optional chaining) in JavaScript. 
It is basically used while accessing some property on an object
to avoid null or undefined errors.

suppose you have one object obj whose value you are getting 
from the server. But there may be chance when you are accessing 
the object values the response from server might not has come yet.

So in that case it will throw error saying can not find .property_name of null.

So if you use ?. then what it does is, it first check whether 
the object is null/undefined/ has value, if object is 
null/undefined then it doesn’t perform the .property_name on it.

Popularity 8/10 Helpfulness 2/10 Language javascript

Source: matrixread.com

Tags: javascript optional-chaining syntax this where

Link to this answer
Share Copy Link

Contributed on Dec 21 2022

M Hassan khan

0 Answers Avg Quality 2/10

What is ?. (Question mark and Dot) syntax in React JS / Javascript, and where do we use this syntax?

Contents

More Related Answers

What is ?. (Question mark and Dot) syntax in React JS / Javascript, and where do we use this syntax?

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.