Support People In Ukraine
Ukraine was invaded by Russia in the early morning of 24.02.2022, explosions thundered in Ukrainian cities, many civilians died, tens of millions are affected. Our army protects all Europe from the occupiers and it needs help now to restrain one of the biggest armies in the world. Please, donate a small amount.
I Am
Volodymyr Hudyma
<FrontEndDeveloper />
You Are Here: Home/Logical OR/AND/Nullish Assignments In JavaScript

# Logical OR/AND/Nullish Assignments In JavaScript

July 01, 2021

The latest JavaScript specification, ECMAScript 2021, includes a lot of useful features, but the one we'll discuss today is Logical Assignment Operator, which is a combination of a logical operator (||, &&, ??) with an assignment (=).

By using Logical Assignment Operator, we can make an assignment with a single line of code.

Before we start learning this function, let's remember how the logical operators work in JavaScript and what is meant by Short Circuit.

## Logical OR

The Logical OR operator returns x if it is Truthy Value, otherwise it returns y.

Truthy Value is a value that is considered true in a Boolean context.

Falsy Value is a value that is considered false in a Boolean context.

Nullish Value is a value that is equal to null or undefined. All Nullish Values are also Falsy.

``````// Syntax
x || y

// Equivalent
x ? x : y``````

Examples:

``````// Truthy values
1 || "notReturned" // => 1
true || "notReturned" // => true
"returnMe" || "notReturned" // => "returnMe"

// Falsy values
null || "returnMe" // => "returnMe"
NaN || "returnMe" // => "returnMe"
0 || "returnMe" // => "returnMe"
"" || "returnMe" // => "returnMe"
undefined || "returnMe" // => "returnMe"``````

## Logical AND

The Logical AND operator returns x if it cannot be converted to true, otherwise it returns y:

``````// Syntax
x && y

// Equivalent
x ? y : x``````

Examples:

``````// Truthy values
1 && "returnMe" // => "returnMe"
true && "returnMe" // => "returnMe"
"string" && "returnMe" // => "returnMe"

// Falsy values
null && "notReturned" // => "null"
NaN && "notReturned" // => "NaN"
0 && "notReturned" // => "0"
"" && "notReturned" // => ""
undefined && "notReturned" // => "undefined"``````

## Logical Nullish Assignment

The Logical Nullish Assignment operator returns y if x is null or undefined, otherwise it returns x:

``````// Syntax
x ?? y

// Equivalent
x !== undefined && x !== null ? x : y``````

Examples:

``````// Truthy values
1 ?? "notReturned" // => "1"
true ?? "notReturned" // => "true"
"returnMe" ?? "notReturned" // => "returnMe"

// Falsy values
null ?? "returnMe" // => "returnMe"
NaN ?? "notReturned" // => "NaN"
0 ?? "notReturned" // => "0"
"" ?? "notReturned" // => ""
undefined ?? "returnMe" // => "returnMe"``````

## Short Circuit

Short Circuit means that the right side of an expression is not evaluated if the operator is already determined after the first operand evaluation.

Any side effects that could have occurred do not take any effect:

``````const expensiveCalc = () => {
console.log("Doing some expensive calculations...");
};

true || expensiveCalc(); // -> "true"
false && expensiveCalc(); // -> "false"
true ?? expensiveCalc(); // -> "true"``````

In all three cases the expensiveCalc() function is never called.

## Logical OR Assignment

The Logical OR Assignment operator only assigns if x is Falsy Value:

``````// Syntax
x ||= y

// Equivalent
x || (x = y)``````

It Short-Circuits if the first operand determines the result.

Example:

``````const user = {
name: "John",
surname: "Doe"
};

user.name ||= "Andrew";
user.age ||= 18;

// Prints { name: "John", surname: "Doe", age: 18 }
console.log(user);``````

In this example, the name property is not reassigned because it is a Truthy Value, but age is Falsy (equal to undefined), so there is a new value at the end.

## Logical AND Assignment

The Logical AND Assignment operator only assigns if x is Truthy Value:

``````// Syntax
x &&= y

// Equivalent
x && (x = y)``````

It Short-Circuits if the first operand determines the result.

Example:

``````const user = {
name: "John",
surname: "Doe"
};

user.name &&= "Andrew";
user.age &&= 18;

// Prints { name: "Andrew", surname: "Doe" }
console.log(user);``````

In this example, the name property is reassigned because it is a Truthy Value, but age is Falsy (equal to undefined), so it is not reassigned.

## Logical Nullish Assignment

The Logical Nullish Assignment operator only assigns if x is Nullish Value:

``````// Syntax
x ??= y

// Equivalent
x ?? (x = y)``````

It Short-Circuits if the first operand determines the result.

Example:

``````const user = {
name: "John",
surname: "Doe",
age: null,
};

user.name ??= "Andrew";
user.age ??= 18;

// Prints { name: "John", surname: "Doe", age: 18 }
console.log(user);``````

In this example, the name property is not reassigned because it is a Truthy Value, but age is Nullish (equal to undefined), so there is a new value at the end.

## Summary

In this article, we learned how to use three new Logical Assignment Operators in JavaScript:

• Logical OR Assignment: x ||= y
• Logical AND Assignment: x &&= y
• Logical Nullish Assignment: x ??= y

On the one hand, proper usage of them makes the code shorter, cleaner, and more readable, but on the other hand, redundant usage leads to rapid decreasing of readability.

So be sure to play around with these new operators to understand them better, and use them wisely.

No spam, only quality content twice a week
Author
July 03, 2021
Hi Maciej, thanks for reading my blog and being so careful about the details! You are absolutely right, changing the examples in section makes perfect sense, just done that :)
Maciej Hnat
July 03, 2021
Hey Vova, very cool article. I think that in the "Logical AND" section you confused the "returnMe" and "notReturned" strings, by that I mean, that in truthy values section: 1 && "notReturned" // => "notReturned" should probably be 1 && "returnMe" // => "returnMe" and in falsy values section: null && "returnMe" // => "null" should probably be null && "notReturned" // => "null" Other than that, great read! :) It's always nice to see improvements to my favorite programming language :)