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.