An overview of the

Everyone knows about ES6 deconstruction, and sometimes defaults are assigned during deconstruction.

But I don’t know if you noticed, sometimes the assignment doesn’t work.

Here’s an example:

const user = {name: 'xiaohesong'.age: null.sex: ' '}
const {name, age = 18, sex = 'man', gf = 'lzl'} = user
console.log(name, age, sex, gf) 
Copy the code

You all know what the output is for specification reasons.

Developer.mozilla.org/en-US/docs/…

Most of the time, however, you actually want to assign the value of Falsly.

That is, he wants his behavior to look like this:

const user = {name: 'xiaohesong'.age: null.sex: ' '}
const {name, age = 18, sex = 'man', gf = 'lzl'} = user
console.log(name, age, sex, gf) // xiaohesong 18 man lzl
Copy the code

I had this idea a long time ago, but I didn’t try it.

The cause of

hao

Because a while back Dan wrote a tweet about anonymous exports:

Twitter.com/dan_abramov…

If you write “export default () => { … }” to declare components, they:

  • will show up as Anonymous in stack traces
  • will show up as Unknown in DevTools
  • won’t be checked by React-specific lint rules
  • won’t work with some features like Fast Refresh

Give components names!

So think about removing the anonymous export from the project. Considering there may be many modules, consider writing a plug-in to replace the corresponding ExportDefaultDeclaration Ast node as a practice.

However,, it was not brought online in the end, not necessary, the project used anonymous export is not a lot, the most important thing is to lose, a fault is not fun.

The corresponding plug-in address for exporting changes anonymously is babel-plugin-assignment-name-for-anonymous -default

Based on the output from this plug-in, ideas were developed for deconstructing the assignment defaults. Because there are a lot of deconstructed assignments in the project that default values are not expected, some fields will return null and so on.

To start the

Babel’s AST is not mentioned much, and there are many articles on the web.

Since we know our goal, we just need to find the corresponding node.

Astexplorer.net/ The corresponding node can be found here:

const fields = ['first'.' ']
const [firstField, secondField = 'second'] = fields
Copy the code

The main node here is ArrayPattern.

const {name = 'asd'} = {name: ' '.age: 18.friend: {fName: ' '}}
Copy the code

The main node here is ObjectPattern.

There is an AssignmentPattern below both of these if there is an assignment of default values.

In this AST you can simulate the desired behavior (ast open, js default is acorn parser) and then operate on nodes with babel-types.

In fact, Babel knows the basic behavior and works with ast and types to do what you want.

Github.com/jamiebuilds… This is a good source for getting started.

The main operation is in the AssignmentPattern step, interested can look at the source code.

At that time, I wanted to give Babel a PR and options, but I gave up the idea considering the side effects of violating the specification.

Deconstruction assign a default value when the value of falsly, effect is similar to the | | operator.

After discussion with the team, my colleagues thought it was not necessary, and they could just deal with it by themselves when they needed to deal with it, so it was open source.

Add-in address: babel-plugin-use-or-operator-for-destructuring-default-value

I don’t want you to use it in your project, but I beg you to use it in your personal project. Thank you very much.