New Logical Assignment Operators (2023)

Well, these were introduced in 2021, according to the Udemy course I am doing.

the “=” sign, assigns values to things

When there’s additional stuff, before the “=”, like “&”; then some kind of logic has to be fulfilled before anything is assigned.

Two vertical lines, or pipes – “||” are the “OR” operators

Logical AND Assignment (&=)

This logical assignment operator only assigns the value if the left-hand side is truthy.

In JavaScript, two ampersands (&) in an assignment operator form a Logical AND assignment operator (&=). This is a newer addition to JavaScript, introduced in ES2021.

Here’s how it works:

Let’s say we have two variables, a and b.

If we write a &= b;, it is a shorter way of saying:

“If a is truthy, let’s assign the value of b to a.

If a is falsy, keep a as it is.”

A “truthy” value is a value that is considered true when evaluated in a Boolean context. All values are truthy unless they are defined as falsy—i.e., except for false, 0, -0, 0n, "", null, undefined, and NaN.

So, &= is checking if the first value is truthy and if so, it assigns the second value to the first one. If the first value is falsy, it remains unchanged.

Screenshot from Geeksforgeeks

Logical OR Assignment (||=)

This logical assignment operator only assigns the value if the left-hand expression is falsy.

This can be useful in cases where we want to keep the existing value if it does not exist, otherwise we want to assign a default to it. 

The Logical OR Assignment (||=) is a shorthand way of performing a logical OR operation and an assignment in one step. This operator was introduced in JavaScript with the ES2021 specification.

Here’s a simple way to understand it:

Let’s say we have two variables, a and b. If we write a ||= b;, it’s a shorter way of saying: “If a is not truthy (meaning it’s false, null, undefined, 0, NaN, or an empty string ”), then assign the value of b to a. If a is truthy (meaning it has any value other than those falsy values), then keep a as it is.”

So, a ||= b; is essentially a shortcut for a = a || b;.

The Logical OR Assignment (||=) operator is a handy tool when you want to assign a default or fallback value to a variable if the initial value of the variable is not truthy.

screenshot source

Logical Nullish Assignment (??=)

I asked Chat GPT to explain the operator to me like I’m 10:

Alright kiddo, let’s have a little chat about this nifty tool in JavaScript called the Nullish Coalescing Assignment Operator, which is represented by ??=. Sounds pretty fancy, huh? Don’t worry, we’ll make it fun!

Imagine you’re playing a game of football with your mates. Now, you always need a ball to play, right? But sometimes, you might forget to bring your own ball to the game. In comes the Nullish Coalescing Assignment operator to save the day.

So, let’s say myBall is the ball you bring, and spareBall is a ball that’s always kept at the ground just in case. Now, you want to check if you’ve brought your ball. If you have, great, we use your ball (myBall) for the game. But, if you forgot your ball (meaning myBall is null or undefined), we then use the spareBall.

In JavaScript, we’d write this check as myBall ??= spareBall;. This means, “If I forgot my ball (myBall), let’s use the spareBall.”

So that’s it, bachgen (that’s ‘boy’ in Welsh)! The Nullish Coalescing Assignment Operator is like your safety net, always making sure you have a ball to kick around!

Screenshot from WisdomGeek

Logical Assignment OperatorsLogical Operators

x ||= yx || (x = y)

x &= yx & (x = y)

x ??= yx ?? (x = y);