Renaming and Destructuring Variables in ES6

One of my favourite features of modern JavaScript is destructuring and renaming nested data; especially as we work in a world where front‑end developers are expected to know how to handle such data efficiently. This is especially common when you're working with APIs, or building anything more complex than very simple and straightforward static websites or apps.

It can be hard to write DRY (Don't Repeat Yourself) code when dealing with nested data, often running into situations where you end up writing very similar or repetitive code. Let's look at a quick example, using data from the Open Weather API which ‑ until very recently ‑ I used right here on my personal website to determine the current weather here in Brighton when a visitor came to the site (I now use a BBC feed):

const data = {  "coord": {    "lon": 50.82,    "lat": 0.1372  },  "weather": {    {      "id": 800,      "main": "Clear",      "description": "clear sky",      "icon": "01d"    }  },  "base": "stations",  "main": {    "temp": 282.55,    "feels_like": 281.86,    "temp_min": 280.37,    "temp_max": 284.26,    "pressure": 1023,    "humidity": 100  }}

When presented with this data, you might opt to extract the current weather condition's main name and description using dot notation like this:

const main = data.weather.main;const description = data.weather.description;

That's all well and good. Up until a few years ago, that would have been more‑or‑less the only way to do it, but it's not DRY. There's a lot of repetition in there (accessing data.weather each time), takes longer to write, and that leads to code bloat with the risk that a relatively simple data change could break things. If we wanted to destructure this info and deal with it in a more efficient way, we could do it like this:

const { main, description } = data.weather;

This is called destructuring. With this code, we're accessing the weather property of the data object as before and then pulling out the main and description properties into top‑level variables which we can then access simply using main and description.

Renaming, Whilst Destructuring

This is great, but it does mean that the property names in our (possibly external) data are dictating the const or variable names within our code. What if you didn't want to use the names passed down via the data, or already had a main and/or description within your code? What if the names just aren't descriptive enough in the context of your component?

Here's where renaming whilst you're destructuring comes into play, here's the same example again, but now with renaming included:

const { main: weatherName, description: weatherDescription } = data.weather;

I'm sure that snippet is relatively self‑explanatory: we're still extracting main and description from data.weather, but now we rename them at the same time as weatherName and weatherDescription so that they fit better within your codebase and naming conventions. We do this by using a : immediately after the property you're destructuring, followed by the name you would like to use.

Nested Destructuring

There's one last piece of the puzzle for this article, and that's the fact that in our example, we are still using dot notation on the right‑hand side: data.weather. We can destructure that too by moving the weather child over to the lefthand side like this:

const {  weather: { main: weatherName, description: weatherDescription },} = data;

What's important to realise in this situation ‑ and something that I've seen trip up developers in the past ‑ is that although weather now appears on the lefthand side, it does not become a variable. We still only get weatherName and weatherDescription.

If ‑ for some reason ‑ you still want direct access to the weather object as well, then you would define it as a separate destructured property:

const {  weather,  weather: { main: weatherName, description: weatherDescription },} = data;

I'll admit, I'm not that keen on this particular aspect of destructuring, but from experience, the use case where you need to access a nested object, as well as elements within it separately is fairly rare.

Bonus: Destructuring Within a Method

Personally, probably the best part about destructuring in JavaScript is the fact that it can also be done inline, for example as part of a map.

Say we have this example data:

const cars = [  {    brand: 'Alfa Romeo',    model: 'Stelvio Quadrifoglio'  },  {    brand: 'Audi',    model: 'RS6'  },  {    brand: 'Volkswagen',    model: 'Polo'  },];

If we wanted to loop over these traditionally to output each brand followed by the model, it would look a little like this:

cars.map(car => (  <p>    {car.brand}: {car.model}  </p>));

However, you can cut that repetition and tidy things up using destructuring:

cars.map(({ brand, model }) => (  <p>    {brand}: {model}  </p>));

This is a fairly high‑level and rudimentary example just to illustrate the point, but this technique, even when combined with nested destructuring and renaming, leads to much simpler code, written much more quickly.

Ultimately, destructuring is now a very common part of a web developer's work ‑ and renaming whilst you are destructuring is an efficient and important part of keeping your code maintainable, clear and easy to read.