What is { xyz } = Object, where Object have xyz as property

Question

What is { XYZ } = Object called ? where Object have xyz as property.

Answer 1

It's called the destructuring assignment, and it's used to extract object properties or array elements. Here's an example:

 

const object = { xyz: "abc" };
let { xyz } = object;
console.log(xyz);

The above defines an object with a property called xyz. It then saves the value of that property to a variable named xyz. It's essentially shorthand for doing this in ES5 (because destructuring was introduced in ES6):

 

var object = { xyz: "abc" };
var xyz = object.xyz;
console.log(xyz);

You can also rename the destructured variable:

 

const object = { xyz: "abc" };
const { xyz: letters } = object;
console.log(letters);

Just as you would the variable:

 

var object = { xyz: "abc" };
var letters = object.xyz;
console.log(letters);

It also works with functions:

 

const logName = ({ name }) => console.log(name);
const john = { age: 42, name: "Mr. Doe" };
logName(john);

Which is the ES6 equivalent of:

 

function logName(person) {
var name = person.name;
console.log(name);
}
var john = { age: 42, name: "Mr. Doe" };
logName(john);

Answer 2

The term you are looking for is 'destructuring assignment'.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Answer 3

It's called Destructuring assignment https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment