By Joe Seifi


Translator: front end little wise

Have a dream, have dry goods, WeChat search [big move world] keep an eye on this washing dishes in the wee hours of the morning.

This paper making https://github.com/qq449245884/xiaozhi has included, has a complete line companies interview examination site, information, and my series of articles.

Logical assignment is an extension of existing mathematical and binary logical operators. Let’s review them first, and then see what we get when we put them together.

First, let’s look at the difference between conditional and unconditional operators in JS 😎.

Unconditional vs conditional

Mathematical operators, for example+It’s unconditional.

In const x = 1 + 2, anyway, we always add LHS to RHS and assign the result to x.

LHS and RHS are mathematical concepts that stand for the left and right sides of an equation, and in our case, the left and right sides of the assignment operator. When a variable appears to the left of the assignment operator, an LHS query is performed. Conversely, RHS query 😨.

We could even write some weird code like const x = false +2. JS first converts false LHS to Number, so we get const x = Number (false) + 2. The result is const x = 0 + 2. It adds LHS to RHS, and finally assigns it to X, resulting in a 2.

Logical operators, for example&&There are conditions

In const x = true && 0 + 2, first evaluate LHS, which is true. Since LHS is true, we then run the RHS operation, which has a value of 2, and also run the assignment operation, which results in 2.

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

You might wonder why you want to avoid calculating RHS? Two common reasons are to get better performance and avoid side effects 💪.

Binary logical operator

&& | |????

We often use in the JSX && and | | to conditionally render interface. ?? It’s the Nullish (null value) merge operator, which was recently proposed and will soon become popular. They are both binary logical operators.

  • use&&Test whether the result of LHS is true.
  • use||Test whether the result of LHS is a virtual value.
  • with??Test if LHS is invalid.

Virtual value vs Nullish

What are the virtual values in JS 😏?

  • null
  • undefined
  • false
  • NaN
  • 0
  • “” (empty string)

The two sisters below are believed to have the Nullish value 😧.

  • null
  • undefined

It is important to note that using binary logical operators does not necessarily return a Boolean value, but rather the LHS or RHS value of the expression. To see the point of these expression types, it’s helpful to revisit this sentence in the ECMAScript documentation:

&&or
||The resulting value is not necessarily Boolean, but is one of the two operand expressions.

Some examples

// If LHS is true, 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

Logical assignment operator

&& = | | =?? =

This operator combines assignment with the conditional logic operator, hence the name “logical assignment” 😚. They’re just shorthand, for example, x && = y is short for x && (x = y).

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

Because of previous ECMAScript features, such as the default parameters and the Nullish merge operator, you can say that there is definitely some redundancy in the functionality provided by logical assignment. This shorthand looks smooth, though, and I’m sure it will come in handy as we discover more use cases.

Logic and Assignment (&&=)

// if x is truthy, assign x to y, otherwise return x // if x is truthy, otherwise return x // // let x = 1 const y = 100 x && (x = y)

Logic or assignment (| | =)

/ / logic or LHS | | = RHS / / equivalent to the LHS | | (LHS = RHS) / / examples / / / if x is true value, return the x, Will be assigned to the let x x = y NaN const y = 100 x | | = y / / x is 100 / / and the corresponding long writing x | | (x = y)

Logical Nullish assignment (?? =)

// Logic Nullish LHS?? = RHS // is equivalent to 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 = y)

An example of logical assignment in the implementation

The React of JSX

let loading = true
const spinner = <Spinner />
loading &&= spinner

DOM

el.innerHTML ||= 'some default'

object

// If the object has no onLoad method, set a const config = {}; config.onLoad ?? = () => console.log('loaded! ')
const myObject = { a: {} } myObject.a ||= 'A'; / / be ignored, because a value of true value in the myObject myObject. B | | = 'b'; / / myObject. B is created, because it is abundant in the myObject / / {/ / "a" : {} / / "b" : "b" / /} myObject. C & = 'Am I seen? '; // MyObject.c is a virtual value, so nothing will be done

How do I use logical assignment in my project

Chrome already supports logical assignment. For backward compatibility, use Transformer. If you are using Babel, install the plugin:

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

Add the following post to.babelrc:

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

Logical assignment is a new concept, so not much is known about it yet. If you have other examples of good use of logical assignment, please leave a comment below 😜.

After the deployment of the code may exist bugs can not be known in real time, in order to solve these bugs afterwards, spent a lot of time to debug the log, here by the way to recommend a good BUG monitoring toolFundebug.

Original: https://seifi.org/javascript/…

communication

Have a dream, have dry goods, WeChat search [big move world] keep an eye on this washing dishes in the wee hours of the morning.

In this paper, making https://github.com/qq44924588… Has been included, a line of big factory interview complete test site, data and my series of articles.