 Logical assignment is the newest kid in the ES2020 block to come out of stage 4 proposal and it just got its first browser support with the Chrome 86 release.

This is a deep dive into what logical assignment is and how it works.

Logical assignment is an expansion on the existing mathematical and binary logical operators. Let's review those first, and then we can look at what combining them together gains us.

First, let me explain the difference between conditional vs. unconditional operators in JavaScript.

## Unconditional vs. conditional

### Mathematical operators, e.g. `+` are unconditional

In `const x = 1 + 2`, no matter what, we always add the LHS to the RHS, and assign the result to x.

You can even write some strange code such as `const x = false + 2`. JavaScript first converts the LHS of false to a Number, so you get `const x = Number(false) + 2` which evaluates to `const x = 0 + 2`, then it adds the LHS to the RHS, and finally assigns it to x, yielding 2.

The point to remember here is that the + and = operators are always evaluated.

### Logical operators, e.g. `&&` are conditional

In `const x = true && 0 + 2`, the LHS is evaluated first, which is true. Since the LHS evaluated to true, we next run the RHS operation, which evaluates to 2, and also run the assignment operation, yielding 2.

In contrast with `const x = false && 0 + 2`, the LHS is evaluated to false, so the RHS is completely ignored.

You might be wondering why you would want to avoid evaluating the RHS? The 2 common reasons are better performance and avoiding side effects.

## Binary logical operators

### `&& || ??`

You're probably already using `&&` and `||` in your JSX to conditionally render things. The `??` is the nullish coalescing operator which is slightly newer and will have its own blog post later. They are all binary logical operators.

It's also helpful to visualize the behavior of the 3 different operators. Here's a high level overview:

• Use `&&` to test the LHS for being truthy.
• Use `||` to test the LHS for being falsey.
• Use `??` to test the LHS for being nullish.

### Falsey vs. Nullish

So what is considered falsey in JavaScript?

• `null`
• `undefined`
• `false`
• `NaN`
• `0`
• `""` e.g. empty string

And what is considered nullish?

• `null`
• `undefined`

It's worth noting that with binary logical operators you don't necessarily get a boolean back, but the value of either the LHS or RHS of the expression. In nailing home the point about these expression types, it's helpful to reiterate this quote from the ECMAScript documentation:

The value produced by a && or || operator is not necessarily of type Boolean. The value produced will always be the value of one of the two operand expressions.

### Some examples

``// Binary logical operators // &&// If LHS is truthy, evaluate and return RHS, otherwise return LHS true && 100**2 // 10000 "Joe" && "JavaScript" // "JavaScript" false && 100**2 // false "" && 100**2 // "" NaN && 100**2 // NaN null && 100**2 // null undefined && 100**2 // undefined``

## Introducing Logical Assignment operators

`&&= ||= ??=`

Now let's introduce assignment into the mix.

This new operator combines assignment with the conditional logical operator, hence the name - logical assignment. You can think of them as shorthand. For example `x &&= y` is shorthand for `x && (x = y)`. There are 3 logical assignment operators.

The value returned from logical assignments is not the updated assignment value, but the value of the evaluated expression.

Due to prior ECMAScript features like default parameters and the nullish coalescing operator, you could say that there's definitely some redundancy in the functionality provided by logical assignments. Although the shorthand looks pretty slick and I'm sure it will come in handy as we find more use cases for it.

### Logical AND Assignment

`&&=`

``// Logical andLHS &&= RHS // under the hoodLHS && (LHS = RHS) // Example// if x is truthy, assign x to y, otherwise return xlet x = 1const y = 100x &&= y // x becomes 100  // Long versionx && (x = y)``

### Logical OR Assignment

`||=`

``// Logical orLHS ||= RHS // under the hoodLHS || (LHS = RHS) // Example// if x is truthy, return it, otherwise assign x to ylet x = NaNconst y = 100x ||= y // x becomes 100 // Long versionx || (x = y)``

### Logical NULLISH COALESCING Assignment

`??=`

``// Logical nullish coalescingLHS ??= RHS // under the hoodLHS ?? (LHS = RHS) // Example// if x.z is nullish, assign x.z to ylet x = {}let y = 100;x.z ??= y // x becomes { z: 100 } // Long versionx.z ?? (x.z = y)``

### Real world examples of logical assignment

Wrapping my head around new concepts always works better if I can relate it to a real world scenario. Here are some examples to help you understand usage of the logical assignment operator by seeing it in action.

#### JSX in React

``// loading will become the spinner elementlet loading = trueconst spinner = <Spinner />loading &&= spinner``

#### DOM

``// innerHTML both sets and gets contents of an Element// Don't want to set unless, innerHTML returns falseyel.innerHTML ||= 'some default'``

#### Objects

``// set the onLoad method on the config object if it doesn't existconst config = {};config.onLoad ??= () => console.log('loaded!')``
``const myObject = { a: {} } myObject.a ||= 'A'; // ignored since a exists on myObjectmyObject.b ||= 'B'; // myObject.b is created since its falsey // myObject is now// {//  "a": {}//  "b": "B"// } myObject.c &&= 'Am I seen?'; // myObject.c is falsey so nothing happens``

## Start using logical assignment in your projects

Logical assignment is already supported in Google Chrome. To be backwards compatible, use a transformer. If you are using Babel, install the plugin...

``npm install @babel/plugin-proposal-logical-assignment-operators``

``{  "plugins": ["@babel/plugin-proposal-logical-assignment-operators"]}``