React

Destructuring

What is Destructuring?

Destructuring, or destructuring assignment, is a JavaScript feature that makes it easier to extract data from arrays and objects

For example...

Destructuring Arrays...

Data structures like arrays can be very useful for storing large amounts of data.
The process of converting individual elements of an array into individual variables can be tedious:-

let cars = ['ferrari', 'tesla', 'cadillac'];
If we wanted to access these cars individually and assign them to variables we could do this:

let cars = ['ferrari', 'tesla', 'cadillac'];
let car1 = cars[0];
let car2 = cars[1];
let car3 = cars[2];
console.log(car1, car2, car3);
// Prints: ferrari tesla cadillac

We can use destructuring to shorten our code and make it more concise:

let cars = ['ferrari', 'tesla', 'cadillac'];
let [car1, car2, car3] = cars;
console.log(car1, car2, car3);
// Prints: ferrari tesla cadillac

Destructuring Objects...

Data structures like objects can be very useful for storing large amounts of data.
The process of converting individual elements of an object into individual variables can also be tedious:-

let destinations = { x: 'LA', y: 'NYC', z: 'MIA' };
If we wanted to access these properties individually and assign them to variables we could do this:

let destinations = { x: 'LA', y: 'NYC', z: 'MIA' };
let x = destinations.x;
let y = destinations.y;
let z = destinations.z;
console.log(x, y, z);
// Prints LA NYC MIA

We can use destructuring to shorten our code and make it more concise:

let destinations = { x: 'LA', y: 'NYC', z: 'MIA' };
let {x, y, z} = destinations;
console.log(x, y, z);
// Prints LA NYC MIA

Note
Because we are assigning properties to x, y & z we have to use the curly barces {} instead of the square brackets [] as we did with arrays.

Destructuring Function Parameters...

Function arguments are another place where destructuring is useful.
Instead of accepting a complete object as an argument, a function can use destructuring to capture specific properties as named parameters:-

let truck = {
   model: '1977 Mustang convertible',
   maker: 'Ford',
   city: 'Detroit',
   year: '1977',
   convertible: true
};

//Note...we are only including parameters for the
//property names - inside { }'s
//When we call the function we just pass it the object (truck).
const printCarInfo = ({model, maker, city}) => {
   console.log(`The ${model}, or ${maker}, is in the city ${city}.`);
};

//Note...here we just pass it the object (truck).
//and it will only use the relevant parameters
printCarInfo(truck);
// Prints: The 1977 Mustang convertible, or Ford, is in the city Detroit.

The printCarInfo function uses object destructuring to create three parameter variables: model, maker, and city.
When the function is invoked with the truck object, these parameters are assigned the corresponding values from that object.

Note that we don’t have to use every property from the truck object: we only create parameter variables for the values that we need.

An MDN document on Destructing Assignment can be found Here

It is worth taking a look to remind you of what can be done under the heading 'Destructuring'.

This document demonstrates something else I had not yet come across.
You can create a variable which, when assigning a value, is preceeded by three dots (...), eg ...rest or ...c
which then creates a variable array with all the remaining values.
By this I mean, eg:

let a, b, rest;
//now to assign values to a & b only
[a, b] = [10, 25];

console.log(a); // expected output: 10
console.log(b); // expected output: 20

// BUT if you assign values like this
[a, b, ...rest] = [10, 20, 30, 40, 50, 60];

// Then a will = 10
// b will = 20
// rest will be an array = "[30, 40, 50, 60]"
// Note it is NOT referred to as ...rest
console.log(rest);
// expected output: 30, 40, 50, 60