Conditional operators ?: and ??

Conditional statements allow you to check a certain condition and, depending on the result of the check, perform certain actions. Here we consider the operator ?: or the so-called ternary operator and the operation ??.

Ternary operation

The ternary operation consists of three operands and has the following definition:

[first operand - condition] ? [second operand] : [third operand]

Depending on the condition in the first operand, the ternary operation returns the second or third operand. If the condition in the first operand is true, then the second operand is returned; if the condition is false, then the third one. For example:

const a = 1;
const b = 2;
const result = a < b ? a:b;
console log(result); // one

Depending on the condition in the first operand, the ternary operation returns the second or third operand. If the condition in the first operand is true, then the second operand is returned; if the condition is false, then the third one. For example:

const a = 1;
const b = 2;
const result = a < b ? a:b;
console log(result); // one

Here, the first operand represents the next condition a < b. If the value of the constant ais less than the value of the constant b, then the second operand is returned - a, that is, the constant result will be equal to a. If the value of the constant is greater than or equal to the value of the constant b, then the third operand is returned - b, so the constant result will be equal to the value b. Expressions can also act as operands:

const a = 1;
const b = 2;
const result = a < b ? a + b : a - b;
console log(result); // 3

In this code example, the first operand represents the same condition as in the previous example, however, the second and third operands represent arithmetic operations. If the value of the constant is less than the value of the constant b, then the second operand – is returned a + b. Accordingly, the constant result will be equal to the sum of a and b.

If the value of the constant a is greater than or equal to the value of the constant b, then the third operand – is returned a – b. Accordingly, the constant result will be equal to the difference between a and b.

Operator ??
Operator ?? allows you to check the value against null and undefined. It takes two operands:

left operand ??= right operand
The operator returns the value of the left operand if it is NOT equal to null and undefined. Otherwise, the value of the right operand is returned. For example:

const result1 = "hello" ?? "world";
console.log(result1);   // hello

const result2 = 0 ?? 5;
console.log(result2);   // 0

const result3 = "" ?? "javascript";
console.log(result3);   // ""  

const result4 = false ?? true;
console.log(result4);   // false

const result5 = null ?? "not null";
console.log(result5);   // not null

const result6 = undefined ?? "defined";
console.log(result6);   // defined

let message = null;
const hello = "Hi JavaScript";
const result7 = message ?? hello;
console.log(result7);   // Hi JavaScript

Operator =??
The operator ?? has a modification in the form of the ??= operator, which also allows you to check the value against null and undefined. It takes two operands:

left operand ??= right operand
If the left operand is equal null to and undefined, then it is assigned the value of the right operand. Otherwise, the left operand retains its value. For example:

 
let message = "Welcome to JavaScript";
let text = "Hello work!"
text ??= message;
console.log(text);  // Hello work!

Here the variable text is not equal to null or undefined, so it retains its value. Reverse example:

let message = "Welcome to JavaScript";
let text = null;
text ??= message;
console.log(text);  // Welcome to JavaScript

Here the variable is null, so it gets the value of the variable text through the operator .??=message