JavaScript Variable with Question Mark

 by Robin Wieruch
 - Edit this Post

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 about 

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…

In every programming language, you will find variables. This also holds true for JavaScript. Essentially variables are used to carry information. Without them, it wouldn't be really possible to code…

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.