Es2021 introduced Logical Operators and Assignment Expressions as part of latest features

Before ES2021, Javascript has following logical operators

These logical operators are applied to variables or operands

OperatorNameDescriptionExample
&&Andevaluates true if both are truetrue && true returns true
||ORevaluates true if one of is truetrue && false returns true
!NOTevaluates true if operand is false!true returns false

The above operators only check logical operation and returns true or false based on operands.

It introduced new feature and syntax to existing logical operators ES2021

What does logical operators and assignment expressions do?

The following operators are introduced in ES2021

  • logical AND operator assignment expression (&&=)
  • logical OR operator assignment expression (||=)
  • logical Double question operator assignment expression (??=)

logical AND operator assignment expression (&&=)

logical AND assignment expression is applied to two variables or operands of an javascript expression.

if one the value or operand expression returns truthy result, Then this operator assigns second variable value to first variable

Here is an example

let variable1 = 1;
let variable2 = 12;
variable1 &&= variable2;
console.log(variable1) // outputs 12

In the above example variable1 is truthy value, truthy value is number or true etc..

The above code is equal to

let variable1 = 1;
let variable2 = 12;

if(variable1){
    variable1 = variable2;

}
console.log(variable1) // outputs 12

logical AND operator assignment expression (||=)

This also applies to two variables/operands or javascript expressions.

if first variable returns falsy values, then the second variable assigned to first variable

let variable1 = undefined;
let variable2 = 44;
variable1 ||= variable2;
console.log(variable1) // outputs 44

As you see variable1 is falsely values, falsely values are undefined, null, zero

let variable1 = undefined;
let variable2 = 12;

if(!variable1){
    variable1 = variable2;

}
console.log(variable1) // outputs 12

logical Double question operator assignment expression (??=)

This also applies to two variables or operands in JavaScript.

if first variable/operand is null or undefined, Then the second variable is assigned with first variable

let variable1 = undefined;
let variable2 = 44;
variable1 ??= variable2;
console.log(variable1) // outputs 44

variable1 is undefined, that means variable2 is assigned with variable1

Above code is equavalent to

let variable1 = undefined;
let variable2 = 44;
if((variable1 ==null)||(variable2=undefined)){
    variable1=variable2;
}
console.log(variable1) // outputs 44

Notes:

  • Logical operators assignment expression are applied to variable/operand/JavaScript expression
  • Advantages with this is shorter syntax
  • Syntax confusion initially but easy to understand