Use 1: “?” as a Ternary Operator
The ? operator is also called the ternary operator because it's the only one that takes three operands. It's used to shorten an if...else statement into one line of code. Starting with ?, we add a condition on the left side and a value on the right side to return when the condition is true. Then we add a colon (:) followed by a value to return if the condition is false.
Here is an example:
In the code above, we first declare a variable age and assign it a value of 13. We then declare a variable canVote and use the ternary operator to assign it a value of "Yes" if age is greater than or equal to 18, and "No" otherwise. Finally, we log the value of canVote to the console, which in this case is "No".
The ternary operator is a shorthand way of writing an if...else statement that has a single expression for both the true and false cases. It's written with the syntax of a question mark (?) followed by a colon (:). The general syntax is thus:
In the example above, the condition evaluates to false since age is 13. Therefore, the expression on the false side of the colon ("No") is returned and assigned to canVote.
Using the ternary operator can make your code more concise and easier to read, especially in cases where you need to make a simple comparison and return a value based on the result.
Use 2: “?” for Optional Chaining
To understand this use of the “?” operator, consider the following code:
In the code above, we first declare an object person with some properties, including an address object that has properties street, city, and state. We then declare a variable zipCode and aim to access the property “zip” of the address object. The output will be:
Why is that? It is because you are trying to access a property that doesn’t exist. Let us now update the code to now say:
Now, not only is zip undefined, the home property is also undefined. If you run this code you will get:
If on the other hand, you replaced the line:
and run the code, you will get:
Thus the “?” operator comes in handy here. Because person.home is null or undefined, the expression will short-circuit and return undefined.
Use 3: “??” for Nullish Coalescing
In the code above, we first declare a variable name and assign it a value of null. We then declare a variable displayName and use the nullish coalescing operator (??) to assign it a value of "Anonymous" if name is null or undefined. Finally, we log the value of displayName to the console, which in this case is "Anonymous".
If you are interested to learn more about the double question mark operator, checkout our blogpost on the nullish coalescing operator. The general syntax is:
In the example above, the variable is name, and the default value is "Anonymous". If name is null or undefined, the default value will be used instead.
Using the nullish coalescing operator can make your code more concise and easier to read, especially in cases where you need to handle null values.
Kodeclik is an online coding academy for kids and teens to learn real world programming. Kids are introduced to coding in a fun and exciting way and are challeged to higher levels with engaging, high quality content.