JavaScript Variable with Question Mark

 by Robin Wieruch
 - Edit this Post
javascript question mark

If you are new to JavaScript, the question mark after a variable may be confusing to you. Let's shed some light into it. The question mark in JavaScript is commonly used as conditional operator -- called ternary operator when used with a colon (:) and a question mark (?) -- to assign a variable name conditionally.

const isBlack = false;
const text = isBlack ? 'Yes, black!' : 'No, something else.';
console.log(text);
// "No, something else."

Either the expression is true and returns the value after the question mark (?) or the expression is false and returns the value after the colon (:).

This kind of JavaScript variable declaration is used as a shorthand though. You can achieve the same with the "if-else"-statement in JavaScript as conditional operator in contrast to the ternary operator, but it turns out more verbose:

const isBlack = false;
let text;
if (isBlack) {
text = 'Yes, black!';
} else {
text = 'No, something else.';
}
console.log(text);
// "No, something else."

If this is not what you are looking for, then maybe you are searching for JavaScript's optional chaining feature. It is used to assign a variable conditionally:

const person = {
name: 'Robin Wieruch',
pet: {
name: 'Trixi',
},
};
const petName = person.pet?.name;
console.log(petName);
// "Trixi"

If the person has no pet, the output would be undefined without throwing a JavaScript exception.

const person = {
name: 'Robin Wieruch',
};
const petName = person.pet?.name;
console.log(petName);
// undefined

When this feature was not available in JavaScript, it was common to use the AND (&&) operator or the ternary operator (?:) from before to avoid any JavaScript exceptions:

const person = {
name: 'Robin Wieruch',
};
let petName = person.pet && person.pet.name;
console.log(petName);
// undefined
petName = person.pet ? person.pet.name : undefined;
console.log(petName);
// undefined

Most commonly you will find the question mark in JavaScript for these two use cases. Either it is used as shorthand conditional operator instead of the commonly used "if-else"-statement or as optional chaining operator to assign variables conditionally without hitting an exception.

Keep reading 

Eventually you will come across the concept of a JavaScript Closure. I want to give you a step by step walkthrough on how to implement a JavaScript Closure. Along the way, you will find out yourself…

A JavaScript naming conventions introduction by example -- which gives you the common sense when it comes to naming variables, functions, classes or components in JavaScript. No one is enforcing these…

The Road to React

Learn React by building real world applications. No setup configuration. No tooling. Plain React in 200+ pages of learning material. Learn React like 50.000+ readers.

Get it on Amazon.