What is the Question Mark in JavaScript? Explained with Examples
Welcome to the world of JavaScript, where the question mark symbol ?
has many uses. In this post, we’ll take a closer look at this powerful operator and provide examples to help you understand its different functions.
The Ternary Operator: Code More Efficiently
JavaScript’s question mark is commonly used in the ternary operator, which is an abbreviated version of an if-else
statement. This operator can save you time and lines of code.
Let’s take a look at how it works:
condition ? value1 : value2
Code language: JavaScript (javascript)
The condition
is a statement that returns true
or false
. If the condition is true, value1
is returned. If it’s false, value2
is returned.
Examples of Ternary Operator
Let’s try a lighthearted example:
const age = 21;
const canDrink = age >= 21 ? 'Cheers 🍻' : 'Sorry, no drinks for you 🚫';
console.log(canDrink); // Cheers 🍻
Code language: JavaScript (javascript)
In this example, we’re checking whether age
is greater than or equal to 21 using the ternary operator. If it is, we return the string ‘Cheers 🍻’. If not, we return the string ‘Sorry, no drinks for you 🚫’.
The Nullish Coalescing Operator: Default Values Made Easy
The question mark symbol is also used in the nullish coalescing operator. This operator provides a default value when a variable is null or undefined.
Here’s an example:
value1 ?? value2
Code language: JavaScript (javascript)
If value1
is not null
or undefined
, it is returned. If it is null or undefined, value2
is returned.
Examples of Nullish Coalescing Operator
Let’s take a look at a simple example:
const name = null;
const defaultName = name ?? 'John Doe';
console.log(defaultName); // John Doe
Code language: JavaScript (javascript)
In this example, we’re checking whether name
is null or undefined using the nullish coalescing operator. Since it is null
, the string ‘John Doe’ is assigned to defaultName
.
Combining Ternary and Nullish Coalescing Operators: The Ultimate Combo
You can also combine the ternary and nullish coalescing operators to provide a default value based on a condition. Here’s an example:
const name = null;
const age = 27;
const message = name ? `Hello, ${name}!` : `Hello, user!`;
const greeting = message + ` You are ${age ?? 'unknown'} years old.`;
console.log(greeting); // Hello, user! You are 27 years old.
Code language: JavaScript (javascript)
In this example, we’re checking whether name
is null or undefined using the ternary operator. If it is not null or undefined, we create a personalized greeting using name
. If it is null or undefined, we create a generic greeting. We’re also using the nullish coalescing operator to provide a default value for age
if it is null or undefined.
Conclusion: Keep On Coding
In conclusion, the question mark symbol ?
in JavaScript has many uses in the ternary and nullish coalescing operators. These operators help you write more efficient and streamlined code, making your life easier. Keep practicing and experimenting, and don’t forget to have fun while doing it! If you want to learn more interesting parts of JavaScript you can try learning from JavaScript course.
Sharing is caring
Did you like what Mehul Mohan wrote? Thank them for their work by sharing it on social media.
No comments so far
Curious about this topic? Continue your journey with these coding courses: