What Is Question Mark In Javascript And What Is Javascript’s Double Question Mark?
POSTED ON
March 1, 2023
POSTED BY
Aayan Arif
POSTED ON March 1, 2023
POSTED BY Aayan Arif
SHARE
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.
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.
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.
Top in-demand tech skills for software engineers are the popular skills that employers are looking for. Times have changed, so you can either be an expert in one field or you can be a multi-tasker to appear as an ideal candidate for companies. As a software engineer or developer, you need to commit to lifelong
Are you tired of hearing about slow functioning search databases? Now you can quickly improve search experience with the use of Full text search on multiple columns using Laravel & MySQL InnoDB? This article aims to provide a full tutorial about the implementation of Full Text Search in Laravel. You can use it in any
Image manipulation with Laravel makes image manipulation easier and more expressive. This article is a tutorial to demonstrate how to handle and to manipulate images in Laravel using the Intervention Image library. Are you looking to create image thumbnails, watermarks, or image files? This library aids you to work smoothly without any fuss or interruptions. For
Advances in Artificial Intelligence verifies that technology has much potential to beat any new innovation in the coming years as well. Each discovery in the field leaves you absolutely baffled and what’s even more interesting is that if you don’t use AI strategy, your business will eventually die. This brings you to the question: what
Are you exploring a reliable tool for data engineering? Have you ever heard about Apache Spark? Do you know what’s the use of Apache Spark? If we give you a simple explanation of it, Apache Spark is an influential open-source engine created around useability, speed, refined analytics, APIs in Java, Scala, Python, R, and SQL.
ABOUT THE AUTHOR
Aayan Arif
Content Strategist at vteams - Aayan has over 8 years of experience of working with multiple industries.
0 Comments