Destructuring Your Confusion about JavaScript Destructuring

What if I told you that the below syntax’s log the same values?

// Without Destructuring
const myInfo = { name: "Sandrico Provo", age: 26 };
const myName = myInfo.name;
const myAge = myInfo.age;
// With Destructuring
const { name, age } = myInfo;

You can probably guess what destructuring does by looking at the syntax, but if you want to learn more keep reading 👇🏾.

Curly brackets to the left, the left

Yes that is Beyoncés voice you heard when you finished reading that header (this is a play on one of her iconic hooks from the song Irreplaceable), but you’re here to read about destructuring assignment in JavaScript.

The destructuring syntax will works with arrays and objects and essentially what’s happening is you are assigning multiple variables in one-line. Let’s bring back our beginning example and dissect the line where we use destructuring.

const { name, age } = { name: "Sandrico Provo", age: 26 };

This first line shows us the actual syntax of destructuring on the left side of the assignment, and on the right we have the object we’re working with. When destructuring objects, on the left side of the assignment you enclose the object keys in { }, and this will assign them to variables for you. With that in mind, it makes sense why we can then console.log the object values without using dot notation. As its name implies, we’re just breaking down complex structures into simpler ones.

Why is this useful??

Imagine a more complex object like the one below, and how you’d access its nested properties.

const detailsObject = { 
    name: "Sandrico Provo", 
    age: 26,
    aboutMe: {
        country: "Canada"
        province: "Nova Scotia",
        city: "Halfiax"
        hobbies: [ "sports", "code", "video games"]
    }
 };

Now, let’s compare assigning two new variables from this object with and without destructuring.

// without destructuring
const personalHobbies = detailsObject.details.city; 
const personalHobbies = detailsObject.details.city; 
const personalHobbies = detailsObject.details.hobbies; 
// with destructuring
const { name, aboutMe: { city, hobbies } } = detailsObject;

Both of these methods give you the same output! This shows us that destructuring really shines when you want to create multiple variables from multiple object properties.

Using Arrays? Destructuring Has Your Back 💪🏾

Destructuring can also be used with arrays, however there are some key differences.

1. In stead of using curly brackets you have to use square brackets.
2. Since arrays aren’t key-value pairs like objects, your variables are assigned in order of the array with variable names you create.

Let’s see an example to clarify.

const provincialCapitals = ["Halifax", "Toronto", "Victoria"];
const [novaScotiaCapital, ontarioCapital, britishColumbiaCapital] = provincialCapitals;

These three values are assigned in order of the array, so novaScotiaCapital would contain ”Halifax”, and so on. If we did this:

const provincialCapitals = ["Toronto", "Halifax", "Victoria"];
const [novaScotiaCapital, ontarioCapital, britishColumbiaCapital] = provincialCapitals;

Then novaScotiaCapital would contain “Toronto”.

Just to visualize its usefulness with arrays lets compare how we’d do this with and without destructuring.

// without destructuring
const novaScotiaCapital = provincialCapitals[0];
const ontarioCapital = provincialCapitals[1];
const britishColumbiaCapital = provincialCapitals[2];
// with destructuring
const [novaScotiaCapital, ontarioCapital, britishColumbiaCapital] = provincialCapitals;

I’d say three lines worth of code for the price of one line is a great deal 👍🏾 😄.

What About Variable Renaming With Objects?

Say you’ve pulled in some JSON data and are working with the object(s). You have the data you need but you don’t like the property names when destructuring. Well, thankfully you can change the names of destructured variables! Here’s how with objects.

const { name: sandricoName, age: sandricoAge } = { name: "Sandrico Provo", age: 26 };
console.log(sandricoName); // Sandrico Provo
console.log(sandricoAge); // 26

Voila! All it takes is adding a colon 👍🏾.

That’s All Folks

Well, here we are. We’ve destructured the basics of destructuring in JavaScript 👏🏾. I hope you found this post fun and useful. If you’re in search of more about destructuring, here is MDN’s page on it: Destructuring assignment - JavaScript | MDN.

Happy Learning 😄👋🏾.