Kodeclik Blog

The question mark (?) operator in Javascript

The question mark operator, represented by a ?, is a powerful feature in JavaScript that is used in conditional statements, and when paired with a :, can function as a compact alternative to if...else statements. There are three main uses for the ? operator, which we describe below.

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:

The question mark operator in Javascript

let age = 13;
let canVote = (age >= 18) ? "Yes" : "No";
console.log(canVote); // Output: "No"

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:

(condition) ? expression on true : expression on false

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:

let person = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA"
  }
};

let zipCode = person.address.zip;
console.log(zipCode);

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:

undefined

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:

let person = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA"
  }
};
let zipCode = person.home.zip;
console.log(zipCode);

Now, not only is zip undefined, the home property is also undefined. If you run this code you will get:

Uncaught TypeError: Cannot read properties of undefined (reading 'zip')

If on the other hand, you replaced the line:

let zipCode = person.home.zip;

with:

let zipCode = person.home?.zip;

and run the code, you will get:

undefined

Thus the “?” operator comes in handy here. Because person.home is null or undefined, the expression will short-circuit and return undefined.

The optional chaining operator is a new feature in JavaScript that allows you to safely access deeply nested properties of an object without worrying about the intermediate properties being null or undefined. It's written with the syntax of a question mark (?) followed by a dot (.).

Use 3: “??” for Nullish Coalescing

Here's an example of how to use the nullish coalescing operator in Javascript:

let name = null;
let displayName = name ?? "Anonymous";
console.log(displayName); // Output: "Anonymous"

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".

The nullish coalescing operator is a new feature in Javascript that allows you to provide a default value for a variable if its value is null or undefined. It's written with the syntax of two question marks (??).

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:

variable ?? defaultValue

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.

You have learnt the many uses for the question mark in Javascript. Explore and let us know how you used it in your own projects!

Want to learn Javascript with us? Sign up for 1:1 or small group classes.

The question mark (?) operator in Javascript

Use 1: “?” as a Ternary Operator

Use 2: “?” for Optional Chaining

Use 3: “??” for Nullish Coalescing

Join our mailing list