An in-depth analysis of the logical assignment operators in JS

This article will give you an in-depth discussion of JavaScript logical assignment operators. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

#Logical assignment is an extension to existing mathematical and binary logic operators. Let’s review them first and then see what we get by combining them.

First, let’s take a look at the difference betweenconditional operatorandunconditional operatorin JS.

Unconditional vs conditional

Mathematical operators such asare unconditional.

Inconst x = 1 2, no matter what, we always addLHStoRHSand The result is assigned tox.

LHS and RHS are concepts in the field of mathematics, meaning the left side of the equation and the right side of the equation. In our current scenario, they are the left side and right side of the assignment operator. When the variable appears on the left side of the assignment operator, an LHS query is performed; otherwise, an RHS query is performed.

We can even write some weird code likeconst x = false 2. JS first converts the LHS offalsetoNumber, so we getconst x = Number (false) 2, and the resultis const x = 0 2. It adds the LHS to the RHS and finally assigns it tox, resulting in2.

Logical operators such as&&are conditional

Inconst x = true && 0 2, First calculate the LHS, which istrue. Because the value of LHS istrue, we next run the RHS operation, whose value is 2, and also run the assignment operation, and the result is2.

Compared toconst x = false && 0 2, the LHS isfalse, so the RHS is completely ignored.

You may be wondering why you should avoid calculating the RHS? Two common reasons are to getbetter performance and to avoid side effects.

Binary logical operator

##& || ??

We often use

&& in JSXand||to conditionally render the interface.??is thenullish(null value)coalescing operator, which was recently approved and will be popularized soon. They are all binary logical operators.

Use
• &&to test whether the result of LHS is a true value.
Use
• ||to test whether the result of LHS is an imaginary value.
Use
• ??to test whether the LHS is invalid.

Virtual value vs Nullish

What are the virtual values in JS?

null
• undefined
• false
• NaN
• 0
• "" (empty string )

The following two sisters are considered nullish values.

null
• undefined

It is worth noting that using binary logical operators does not necessarily return a

Boolean value, but Is theLHSorRHSvalue of the returned expression. To clarify the point of these expression types, it is helpful to revisit this sentence from the ECMAScript documentation:

&& or|| produces values that are not Must be of type Boolean, but one of the values in the two operand expressions.

Some examples

// && / /如果 LHS 是真值，计算并返回 RHS，否则返回 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

Logical assignment operator

&&= ||= ??=

This operator combines assignment with conditional logical operators, hence the name

"logical assignment". They are just abbreviations. For example,x && = yis the abbreviation ofx && (x = y).

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

Due to previous ECMAScript features such as default arguments and the nullish coalescing operator, you could argue that there is definitely some redundancy in the functionality provided by logical assignment. This shorthand seems smooth though, and I'm sure it will come in handy as we discover more use cases.

Logical AND assignment (&&= )

// 逻辑与 LHS &&= RHS // 等价于 LHS && (LHS = RHS) // 事例 // if x is truthy, assign x to y, otherwise return x // 如果 x 为真值，则将 y 赋值给 x， 否则返回 x let x = 1 const y = 100 x &&= y // x 为 100 // 与上面对应的长的写法 x && (x = y)

Logical OR assignment (||= )

// 逻辑或 LHS ||= RHS // 等价于 LHS || (LHS = RHS) // 事例 // 如果 x 为真值，返回 x，否则将 y 赋值给 x let x = NaN const y = 100 x ||= y // x 为 100 // 与上面对应的长的写法 x || (x = y)

Logical nullish assignment (??=)

// 逻辑 nullish LHS ??= RHS // 等价于 LHS ?? (LHS = RHS) // 事例 // if x.z is nullish, assign x.z to y let x = {} let y = 100; x.z ??= y // x 为 { z: 100 } // 与上面对应的长的写法 x.z ?? (x.z = y)

Example of logical assignment in implementation

JSX in React

let loading = true const spinner =  loading &&= spinner

DOM

el.innerHTML ||= 'some default'

Object

// 如果对象没有 onLoad 方法，则设置一个方法 const config = {}; config.onLoad ??= () => console.log('loaded!')

const myObject = { a: {} } myObject.a ||= 'A'; // 被忽略，因为 myObject 中 a 的值为真值 myObject.b ||= 'B'; // myObject.b 会被创建，因为它不丰 myObject 中 // { // "a": {} // "b": "B" // } myObject.c &&= 'Am I seen?'; // 这里的 myObject.c 为虚值，所以什么都不会做

How to use logical assignment in the project

Chrome already supports logical assignment. For backward compatibility, use transformers. If you are using Babel, please install the plug-in:

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

and add the following content in

.babelrc:

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

Logical assignment is a new concept, so There is not much relevant knowledge yet. If you have other examples of good usage of logical assignment, please leave a comment below.

Original address: https://seifi.org/javascript/javascript-logical-assignment-operators-deep-dive.html

Author: Joe Seifi

Translation address ：https://segmentfault.com/a/1190000039923017

For more programming-related knowledge, please visit:Programming Video! !

The above is the detailed content of An in-depth analysis of the logical assignment operators in JS. For more information, please follow other related articles on the PHP Chinese website!