The question mark operator is also known as conditional operator in Javascript and is written as ?. javascript question mark operator is one of the most powerful operators and features that JS has to offer. It can be paired with conditions, colon operator and null operator. It is basically used as an alternative and short version for if,else statements.
With the question mark operator, there is more than meets the eye. Following are the ways it is used and we are sure most of you would not have heard of them.
Key Uses for the ?, Question Mark, in JavaScript
Ternary Operator
Optional Chaining
Nullish Coalescing, a.k.a. javascript double question mark
Following we will have a detailed discussion with example code to help you understand how each method uses the ? operator. Now let’s see, What Is Question Mark In Javascript and Javascript’s double question mark.
Ternary Operator
Ternary, meaning 3, and ternary operator means the operator that consists of 3 parts. This is why it is named ternary operator. The Javascript ternary if, is the only one condition that takes 3 operands.
The operator is started with the condition then it is followed by the true and false on either side of a colon. Condition is always added to the left side of the ? operator and values are always added to the right side. Left of the colon is always what will be returned in case of true condition and the right side of the colon consists of the value that will be returned if the condition is not met.
The ternary operator is basically a shortcut for a traditional if…else statement.
Let’s compare JavaScript ternary if, with traditional if…else statement:
If…else
let status;
if (weather > 30){
status = ‘Warm’
}
else{
status = ‘cold’
}
JS Question mark operator
const weatherState weather 30 ? ‘Warm Weather’ : ‘Cold Weather’;
As you can see, the JS question mark operator is only taking one line whereas if…else statement is taking a couple of lines. Ternary operator makes writing the code easier, understanding is not an issue, and you get to do several lines of code work in just one.
Optional Chaining
Optional changing was introduced to JS in 2020, and it is another powerful feature of JS.
Writing a code that calls an object that does not exist, this will create a runtime error when the code is executed. For instance, have a look at this code:
const user = {
}
name: ‘abc’, age: 122
user.write.height();
This may be because of an API you are using or just because of human error. Commonly if you run a code like this one you will get the following error.
TypeError: Cannot read property “height” because it is undefined.
But this does not have to be the case anymore. You can prevent your software from giving a runtime error and crash with use of a small little javascript question mark operator.
Insert it like this:
const user = {
name: ‘Ali’, age: 24
}
user.write?.salary();
Having this inserted you will get the result saying it is undefined instead of getting an error and crashing the program.
Nullish Coalescing
Sometimes we miss a default value and to prevent the software from crashing the Nullish Coalescing comes in handy.
So, if you have a database and you want to get some information from the database to show the users the result of their query. Let’s say the information of a student in a university. While all the information is being displayed the picture of the student is somehow not present, which to be honest makes the rest of data representation looks ugly. To make things look a little better we can set a default picture that will show up whenever a picture is not present. Which can be an avatar or whatever you like. This can be done for all types of data in your database.
Here is an example, showcasing the use of Nullish Coalescing:
const employees = {
name: undefined || ‘N/A’,
description: undefined || ‘Some Description’
This brings in other problems like, the software throwing unexpected errors and results. For instance, if you encounter a string with one value i.e. 0 or even an empty string. Then using the || operator this function will call the default value.
Question mark Javascript can be used to fix this error. javascript double question mark “??” are used instead of || and it is also called the Nullish Coalescing.
Without Nullish Coalescing
const value1 = 0 || ‘default string’;
console.log(value1);
With Nullish Coalescing
const value2 = ” || 1000;
console.log(value2);
Nullish Coalescing operator’s working is just like the || operator, logical OR. The only difference is that you will get the value on the right side when the left side’s value is null or not defined.
the right side value when the left side value is undefined or null.
Conclusion
So, what is question mark in Javascript? It is an operator that has powerful features and can be used in different ways, mentioned above, to solve problems easily. This is just the tip of the iceberg, this article was like an introduction to Javascript question mark operators. These logics can be applied to creatively solve your problems. Above mentioned three syntactic sugar Javascript ways are how you can use the “?” operator.
0 Comments