Basic object destructuring in ES6

During my coding exercises, I had briefly touched destructuring and noted that I wanted to repeat that lesson at some point, and now that I’m on my React intro course, I realize that I should make sure I fully understand destructuring in ES6. I’ll break this topic down into object and array destructuring, starting with objects in this post.

Destructuring syntax was introduced to JavaScript with ES6 and enables us to easily extract and assign data from arrays or objects. The syntax looks a little confusing at first, but it is an incredibly useful feature to use data that we have stored in an object and want to assign to their own respective variables.

Why do we want to use ES6 destructuring?

To see why destructuring makes life so much easier, let’s look at a nested object first. How would we go about using some of the nested values in our code before the introduction of ES6?

const team = {
    name: 'Borussia',
    city: 'Dortmund',
    games: {
        league: {
            date: '2021-01-09',
            location: 'Leipzig, Germany',
            goals: 3
        },
        cup: {
            date:'2020-12-22',
            location: 'Braunschweig, Germany',
            goals: 2
        }
      }
    };

If I want to work with any of the goals values from this object and not use ES6, I’d have to do this:

const leagueGoals = team.games.league.goals;
const cupGoals = team.games.cup.goals;

console.log(leagueGoals);// "3"
console.log(cupGoals);// "2"

That’s a lot of typing. And hopefully we don’t introduce any errors while we’re at it! The more levels a nested object has, the more complicated this will become. This should be much easier with ES6, where we can do this to achieve the same result:

const {goals} = team.games.league;

console.log(goals)// "3"

Using new variable names

Since we want to be a little more specific (we have two goals keys in our team object, after all), we also have the option to assign the value of goals to a variable with a different name. In this case, we want the variable name to be leagueGoals. The syntax is:

const {goals: leagueGoals} = team.league.goals;

console.log(leagueGoals)// "3"
const {goals: cupGoals} = team.cup.goals;

console.log(cupGoals)// "2"

Adding default values

When we destructure and the property isn’t there, its value will default to undefined. Look at this code for example:

const team = {
    name: 'Borussia',
    city: 'Dortmund'
    }
const {name, city, members} = team;

console.log(members)// "undefined"

This happens because we have created the variable on the left side of our destructuring assignment, but we haven’t assigned a value to it. This is where a default value would be handy – a value that we can default to in case we don’t assign anything through destructuring since the property is not in our destructured object. You set a default value like this:

const team = {
    name: 'Borussia',
    city: 'Dortmund'
    }
const {name, city, members = 11} = team;

console.log(members)// "11"

Destructuring without declaring variables

You can destructure an object without declaring variables for the destructured properties right away, you just have to be careful with the syntax you use. Wrap your statement in parentheses so that Javscript doesn’t think it’s trying to execute a block statement, like this:

({name, city, members} = team;)

Feel free to leave any questions about object destructuring in the comments! ✌️

1 comment

Leave a comment

Your email address will not be published. Required fields are marked *