Detailed explanation of logical operators in JavaScript

Recommended tutorial: "JavaScript Video Tutorial"

Logical assignment is an extension of 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 between conditional operator and unconditional operator in JS.

Unconditional vs Conditional

Mathematical operators, such as are unconditional.

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

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 like const x = false 2. JS first converts the LHS of false to Number, so we get const x = Number (false) 2, and the result is const x = 0 2 . It adds the LHS to the RHS and finally assigns it to x, resulting in 2.

Logical operators such as && are conditional

In const x = true && 0 2, the LHS is calculated first, which is true. Because the value of LHS is true, we next run the RHS operation, whose value is 2, and also run the assignment operation, and the result is 2.

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

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

Binary logical operators

&& || ??

In JSX we often use && and || to conditionally render the interface. ?? is the nullish(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 the LHS or RHS value 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 Together, hence the name "logical assignment". They are just abbreviations. For example, x && = y is the abbreviation of x && (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)

Examples of logical assignment in implementation

JSX in React

let loading = true
const spinner = <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 projects

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.

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

Author: Joe Seifi

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

The above is the detailed content of Detailed explanation of logical operators in JavaScript. For more information, please follow other related articles on the PHP Chinese website!