EC Tutorials

To show the devastation, we will do a sandwich. Do you take everything out of the fridge to make your own sandwich? No, you only remove items that you would like to use in your sandwich.

Destruction is exactly the same. We may have a list or item we are working on, but we only need some of the content contained in these.

Destruction makes it easy to remove only what is needed.

Here's an old way of sharing a list of unique items:

Before:

const vehicles = ['mustang', 'f-150', 'expedition'];
// old way
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];

Here is a new way to share the same member's items on an alternative:

With destructuring:

const vehicles = ['mustang', 'f-150', 'expedition'];

const [car, truck, suv] = vehicles;

When arranging for the same members, a dynamic declined order is essential.

If we only want a car and a suv we can just leave the truck and keep the comma:

const vehicles = ['mustang', 'f-150', 'expedition'];

const [car,, suv] = vehicles;

Damage is helpful when the function returns the same members:

Example

function calculate(a, b) {
            const add = a + b;
            const subtract = a - b;
            const multiply = a * b;
            const divide = a / b;
          
            return [add, subtract, multiply, divide];
          }
          
          const [add, subtract, multiply, divide] = calculate(4, 7);

Destructuring Objects

Here's an old way of using something inside a project:

Before:

const vehicleOne = {
            brand: 'Ford',
            model: 'Mustang',
            type: 'car',
            year: 2021, 
            color: 'red'
          }
          
          myVehicle(vehicleOne);
          
          // old way
          function myVehicle(vehicle) {
            const message = 'My ' + vehicle.type + ' is a ' + vehicle.color + ' ' + vehicle.brand + ' ' + vehicle.model + '.';
          }

Here is a new way to use something within a function:

With destructuring:

const vehicleOne = {
            brand: 'Ford',
            model: 'Mustang',
            type: 'car',
            year: 2021, 
            color: 'red'
          }
          
          myVehicle(vehicleOne);
          
          function myVehicle({type, color, brand, model}) {
            const message = 'My ' + type + ' is a ' + color + ' ' + brand + ' ' + model + '.';
          }

Note that object properties do not need to be announced in a specific order.

We can even destroy objects in the nest by identifying the object in the nest and then using colonies and folded markers to destroy other objects in the nest:

Example

const vehicleOne = {
            brand: 'Ford',
            model: 'Mustang',
            type: 'car',
            year: 2021, 
            color: 'red',
            registration: {
              city: 'Houston',
              state: 'Texas',
              country: 'USA'
            }
          }
          
          myVehicle(vehicleOne)
          
          function myVehicle({ model, registration: { state } }) {
            const message = 'My ' + model + ' is registered in ' + state + '.';
          }

Previous Next

React ES6 Destructuring

Destructuring

Before:

With destructuring:

Example

Destructuring Objects

Before:

With destructuring:

Example

TUTORIALS

REFERENECES

EXAMPLES

© copyright 2021. All rights reserved.