2

In the following example why does the whois() function have access to displayName2 and name1?

function whois({displayName: displayName2, fullName: {firstName: name1}}){
  console.log(`${displayName2} is ${name1}`)
}

let user = {
  displayName: "jdoe",
  fullName: {
      firstName: "John",
      lastName: "Doe"
  }
}
whois(user) // "jdoe is John"

To the untrained eye it looks like it should have access to displayName and fullName.firstName. The destructuring looks like JSON in reverse.

What's happening under the hood?

Scott Marcus
  • 57,085
  • 6
  • 34
  • 54
Tony Caffer
  • 65
  • 1
  • 5
  • 1
    The parameters the function will have access to are those at the right side of the colon (`:`), and only at the deepest nesting level of the object notation. In this case `displayName2` and `name1` are the only variables that are created there. – trincot Oct 22 '17 at 20:03
  • Well yes, [that's destructuring](https://stackoverflow.com/q/10804982/1048572). And it does indeed work like object literals in reverse. – Bergi Oct 22 '17 at 20:08

2 Answers2

2

displayName and firstName were assigned new names - displayName2 and firstName1 receptively, and to access the values, you need to use the alias.

Since only the aliases are defined as variables, trying to access the values using the old names, will throw a "variable is not defined" error.

const destructure1 = ({ a: aa }) => console.log(aa);
destructure1({ a: 5 }); // gets the value

const destructure2 = ({ a: aa }) => console.log(a);
destructure2({ a: 5 }); // throw an error because a is not defined

In addition, when using destructuring with computed property names, you must assign it to a new variable name:

const prop = 'a';

const destructure1 = ({ [prop]: aa }) => console.log(aa);
destructure1({ a: 5 }); // gets the value
Ori Drori
  • 145,770
  • 24
  • 170
  • 162
  • I see thanks. It does look like JSON but it really isn't. It's a shorthand for reassignment. So : var o = {p: 42, q: true}; var {p: foo, q: bar} = o; really means foo = o.p; bar = o.q; – Tony Caffer Oct 22 '17 at 20:07
  • Exactly see the link I've added about [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Assigning_to_new_variable_names). – Ori Drori Oct 22 '17 at 20:07
1

In destructuring assignment, the value position becomes the variable to which the value is assigned.

When used in a position of declaration (like a function parameter), the names in the value position are declared in the current scope before being assigned the values.

As your example shows, a value position may also describe a nested object to be destructured, when then expects a value matching the described structure, which follows the same pattern above.

// The data object
const data = {foo: "bar"};

// A destructuring declaration and assignment.
// The assignment target's structure matches that of the data
let {foo: localVar} = data;

console.log(localVar); // bar

// Same, but using the existing `localVar` variable with no new declaration.
({foo: localVar} = {foo: "baz"});

console.log(localVar); // baz
llama
  • 2,385
  • 7
  • 9