Deconstruction assignment syntax is a JavaScript expression. By deconstruction assignment, you can take the attribute / value from the object / array and assign it to other variables. This syntax is a new syntax introduced by ECMAscript 6 specification, which makes it easier to get values from arrays and objects.

1. Extract data

Let's take a look at how to deconstruct objects in JavaScript, starting with a simple example of a commodity object.

const product = {
    id: 1,
    title: "Nike Air Zoom Pegasus 38",
    product_image: "/resources/products/01.jpeg",
    shown: "White/Pure Platinum/Midnight Navy/Wolf Grey",
    price: 120,
};
const { id, price, title } = product;

In this way, you can access the corresponding properties in the following ways:

console.log(id); // 1
console.log(price); // 120
console.log(title); // Nike Air Zoom Pegasus 38

Deconstruction can make the code more clear and concise. What if you need to deconstruct a more complex object? That is, the object in the object.

Now suppose you need to obtain the attributes of one of the commodities from the commodity list data, as follows:

const products = [
    {
        id: 1,
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    {
        id: 2,
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    {
        id: 3,
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
];

Here, the product list is nested in several layers. You need to access the product information. You can deconstruct as many levels as possible to obtain the properties of the product object.

const [tmp, { id, title, price }] = products;
console.log(id); // 2
console.log(title); // Nike Air Zoom Alphafly NEXT%
console.log(price); // 275

The above code is only used to show its usage. It is not recommended to obtain object information in an array in project development.

Generally, the data list does not necessarily need an array. In terms of acquisition efficiency, the access efficiency of map object is higher than that of array. You can change the above data into a map object, as follows:

const products = {
    1: {
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    2: {
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    3: {
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
};
const {
    2: { id, title, price },
} = products;
console.log(id); // 2
console.log(title); // Nike Air Zoom Alphafly NEXT%
console.log(price); // 275

In JavaScript, data can be variables and methods, so deconstruction assignment is also suitable for the definition of function parameters, as follows:

const printArticle = ({ title, remark }) => {
    console.log(title);
    console.log(remark);
};
printArticle({
    title: "JavaScript Destructuring assignment ",
    remark: "Introduction to practical scenarios of deconstruction assignment",
});

When using frameworks such as React or Vue, there are many places to deconstruct assignment, such as the introduction of methods and so on.

2. Alias value

If you want to create a variable with a different attribute name, you can use the alias function of object deconstruction.

const { identifier: aliasIdentifier } = expression;

Identifier is the name of the attribute to be accessed, and alias identifier is the name of the variable. The specific usage is as follows:

const products = {
    1: {
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    2: {
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    3: {
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
};
const {
    2: { price: productPrice },
} = products;

console.log(productPrice); // 275

3. Dynamic attributes

Variable attributes can be extracted using dynamic names (attribute names are known at run time):

const { [propName]: identifier } = expression;

The propName expression should be evaluated as an attribute name (usually a string), and the identifier should indicate the name of the variable created after deconstruction. The usage is as follows:

const products = {
    1: {
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    2: {
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    3: {
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
};
const productKey = "1";
const { [productKey]: product } = products;
console.log(product); // { title: 'Nike Air Zoom Pegasus 38', price: 120 }

In the above code, you can update the value of productKey to make the value of product change.

4. Rest in object deconstruction

Add the Rest syntax to the deconstruction, and the Rest attribute collects the remaining enumerable attribute keys that have not been picked up by the deconstruction mode.

const { identifier, ...rest } = expression;

After deconstruction, the variable identifier contains the attribute value. The rest variable is a normal object with the remaining properties.

const product = {
    title: "Nike Air Zoom Pegasus 38",
    price: 120,
    quantity: 5,
    category_id: 1,
    reviews: 9830,
    total: 45,
};
const { title, ...others } = product;
console.log(others); // { price: 120, quantity: 5, category_id: 1, reviews: 9830, total: 45 }

For arrays, you can obtain the first and last values through Rest:

const numbers = [1, 2, 3];
const [head, ...tail] = numbers;
console.log(head); // 1
console.log(tail); // [ 2, 3 ]

5. Default value

As described earlier, you can assign default values to an array when it is deconstructed:

const RGBA = [255, 34];
const [R, G, B = 0, A = 1] = RGBA;
console.log(R); // 255
console.log(G); // 34
console.log(B); // 0
console.log(A); // 1

This ensures that there is A default value when B and A are not defined.

summary

Deconstruction is a very practical feature that has been added to the ES6 version of JavaScript. Through deconstruction, you can quickly and easily extract attributes or data from objects and arrays into separate variables. It applies to nested objects, and you can assign values to arrays using the... Operator.