Destructuring in ES6

Destructuring assignment allows you to assign the properties of an array or object to variables

ES6 Destructuring

New destructuring features in ES6. Some handy refresher notes!

const person = { name: 'Nuwan', age: 25, location: { city: 'Colombo', temp: 34 } }; console.log(`${person.name} is ${person.age}.`);

For the moment this is pretty basic, but what we're gonna do is to use a 'name' variable and an 'age' variable instead of 'person.name' and 'person.age'.

const person = { name: 'Nuwan', age: 25, location: { city: 'Colombo', temp: 34 } }; const name = person.name; const age = person.age; console.log(`${name} is ${age}.`);

Now we could change the code to something like above, but this isn't ideal. Let's explore a better method to do this -> ES6 destructuring.

ES6 Object Destructuring

With ES6 destructuring we can do this with one line.

const person = { name: 'Nuwan', age: 25, location: { city: 'Colombo', temp: 34 } }; const { name, age } = person; console.log(`${name} is ${age}.`);

So where exactly would this be useful? Let's look at another example.

if (person.location.city && person.location.temp) { console.log(`It's ${person.location.temp} in ${person.location.city}`); }

Would this work? Yes. But the problem is we are pulling data off the same object over and over. We can make this much more readable.

const {city, temp} = person.location; if (city && temp) { console.log(`It's ${temp} in ${city}`); }

As you can see, the code above is much more readable.

We can also rename the values. Let's rename the temp variable to temperature.

const {city, temp:temperature} = person.location; if (city && temperature) { console.log(`It's ${temperature} in ${city}`); }

You can also set up default values. Let's set up some defaults, like if the name variable is undefined, let's use a default value like anonymous. This is the same as when we set up defaults for function arguments.

const person = { age: 25, location: { city: 'Colombo', temp: 34 } }; const { name = 'Anonymous', age } = person; console.log(`${name} is ${age}.`);

We can use renaming and default values simultaneously.

const { name: firstName = 'Anonymous', age } = person; console.log(`${firstName} is ${age}.`);

Here's another simple example to rename the publisher name and set up a default if the publisher name is not defined.

const book = { title: 'Ego is the Enemy', author: 'Ryan Holiday', publisher: { name: 'Penguin' } }; const {name: publisherName = 'Self-Published'} = book.publisher console.log(publisherName);

Great, now we can destructure objects, creating seperate variables for the data we pull out of these objects. It allows us to create local variables, rename them as well as setting default values. Next, let's look at Array destructuring. After that, back to Redux!

Array Destructuring

Let's start with an example.

const address = ['1299 S Juniper Street', 'Colombo', 'Sri Lanka', '10120']; console.log(`You are in ${address[1]} ${address[2]}`)

Now, this would work but it's unclear what address[1] is. So let's destructure the array just like we did with objects.

const address = ['1299 S Juniper Street', 'Colombo', 'Sri Lanka', '10120']; const [street, city, country, zip] = address; console.log(`You are in ${city} ${country}`) //You are in Colombo Sri Lanka

You can also destructure just the values you need.

const address = ['1299 S Juniper Street', 'Colombo', 'Sri Lanka', '10120']; const [, city, country,] = address; console.log(`You are in ${city} ${country}`)

This would just destructure the city and country, ignoring the other items in the array.

Although you can't rename variables (there's nothing to rename!), ike objects - you can set defaults.

const address = []; const [, city = 'New York'] = address; console.log(`You are in ${city}.`) //You are in New York.

Here's another basic example. We've only destructured the array items that we want.

const item = ['Coffee (hot)', '$2.00', '$2.50', '$2.75']; const [description, , mediumCoffee] = item; console.log(`A medium ${description} costs ${mediumCoffee}`);