The Curious Case of ‘?’ Operator!
It's like water, as-is is good, but when mixed with other things, it provides different things!
The ‘?’ operator has different usages in JavaScript. While we all know the conditional operator which is present in other languages as well,
I will be sharing two more operators that I have used.
Conditional Operator (also called a Ternary Operator)
This is the most common usage of ‘?’. This is used to evaluate a boolean expression and is used along with ‘:’.
Syntax
condition ? ifTruthyReturnThis : elseReturnThis;
Examples
// Example 1 - If value is even return "EVEN" else "ODD"
const num = 4;
const string = num % 2 === 0 "EVEN" : "ODD";
console.log(string) // Consoles out EVEN
// -----------------------------------------------------------------------
// Example 2 - If value is null return "NULL" else return "NON NULL"
const value = null;
const string = value ? "NOT NULL" : "NULL";
console.log(string) // Consoles out NULLIn example 2, we have not checked whether the value is null or not, and yet string consoles out NULL. Why is this?
This is because null is a falsy value
So what are Truthy and Falsy values?
In JavaScript, there are certain values when used in conditions, that are evaluated as false. These values are falsy values and all others are truthy.
The falsy values are — false, null, undefined, 0, “” (Empty string), and NaN
Continuing on the same example
// Example 2 - If value is null return "NULL" else return "NON NULL"
const value = null;
const string = value ? "NOT NULL" : "NULL";
console.log(string) // Consoles out NULLHere the value is null and null is a falsy value, string consoles out NULL.
But if the value is assigned as any other falsy value, string will still console out NULL, which is wrong.
In these kinds of cases, it is better to check directly with
the equality operator like below
// Example 2 - If value is null return "NULL" else return "NON NULL"
const value = null;
const string = value === null ? "NOT NULL" : "NULL";
console.log(string) // Consoles out NULLOptional Chaining Operator (?.)
The optional chaining operator is used to access a property of an object or call a function.
This is useful when we expect that an object or a function is nullish.
‘?’ is used along with ‘.’ here to turn it into Optional Chaining Operator.
nullish means the value is either null or undefined.
Syntax
// Object usage
// If 'obj' is nullish then don't access, if not access the 'name' property
obj?.name
// -----------------------------------------------------------------
// Function usage
// If 'func' is nullish then don't call, if not call the function 'func'
func?.()Example
// Object usage
const person = null;
// Without the optional chaining operator
// Throws out an exception saying cannot access property 'name' of null
console.log(person.name)
// With the optional chaining operator
// Does not thrown an exception and consoles out undefined
console.log(person?.name)
// ----------------------------------------------------------------------
// Function usage
const func = null;
// Without the optional chaining operator
// Throws out an exception saying cannot 'func' is not a function
func();
// With the optional chaining operator
// Does not call the function
func?.();Nullish coalescing operator (??)
The nullish coalescing (??) operator is a logical operator, it is used between two expressions.
If the left expression is nullish, it returns the right expression else returns the left expression.
Syntax
expr1 ?? expr2
Example
// Example
// When left expr is null
const value = null;
const result = value ?? "fallback";
console.log(result) // consoles out 'fallback';
// When left expr is not null
const value = "default value";
const result = value ?? "fallback";
console.log(result) // consoles out 'default value';
Other than the ternary condition which operator do you use the most, let me know in the comments!
Thanks!
