How does this code work?

Isn't this an object assigned to the fullname? fullName: {firstName: name}

then how is the name variable works?

const user = {
  id: 42,
  displayName: 'jdoe',
  fullName: {
    firstName: 'John',
    lastName: 'Doe'
  }
};

function whois({displayName, fullName: {firstName: name}}) {
  return `${displayName} is ${name}`;
}

console.log(
  whois(user)
)  

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Isn't this an object assigned to the fullname? fullName: {firstName: name}

If you mean in the const user = ... statement, yes.

then how is the name variable works?

The parameter list for whois uses this destructuring pattern:

{displayName, fullName: {firstName: name}}

Let's use x to refer to the argument the function receives (since it doesn't have any name in the function).

• The displayName part of that stores x.displayName in a (destructured) parameter called displayName (the same as the property name).
• The fullName: { firstName: name } part of that stores x.fullName.firstName in a (destructured) parameter called name.

Object destructuring syntax is exactly the same as object literal syntax, it just goes the other direction (and requires that the target of the value be something that can be assigned to). In an object literal, a: b means "create an a property getting the value from b." In destructuring, it means "assign the value of the a property to b".

Here's a simpler example. Consider this object literal:

const theNameIs = "Joe";
const example = {
    name: theNameIs,
//    ^       V
//    |       |
//     −<−<−<− 
};

The name property in the object receives its value from the theNameIs variable.

Now consider this destructuring pattern:

let {name: theNameIs} = example;
//    V       ^
//    |       |
//     −>−>−>− 

That works the same way, just in the other direction: The theNameIs variable receives its value from the name property on example.

CodePudding user response：

Destructuring works as follows:

1. You receive an object;
2. You only need some specific keys;
3. You want to rename certain keys;

Examples:

const user = { firstname: 'foo', lastname: 'bar', age: 99 };

const firstname = ({ firstname }) => firstname;
const lastname = ({ lastname }) => lastname;
const names = ({ firstname, lastname }) => ({ firstname, lastname });

const renameAge = ({ age: renamedAge, ...props }) => ({
  ...props,
  renamedAge
})

console.log(firstname(user)) // foo
console.log(lastname(user)) // bar
console.log(names(user)) // { firstname: 'foo', lastname: 'bar' }
console.log(renameAge(user)) // { firstname: 'foo', lastname: 'bar', renameAge: 99}

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

So to make it clear:

function whois({displayName, fullName: {firstName: name}}) {
  return `${displayName} is ${name}`;
}

Accepts 2 arguments where fullName is an object with firstName as a key. But to make it pretty or to prevent collision with existing variable names, firstName is converted to name. Another real world example:

function whois({displayName, fullName: {firstName: name}}) {
  const firstName = 'foo';
  return `${displayName} is ${firstName} ${name}`;
}