🤷 What's destructuring?

In our previous blog post we went through the importance of destructuring. I'll mention what it is again:

Destructuring is to unpack values in an array or object properties and pack them into different variables. In other words, making a complex data structure to a more simple one.

The same as we did with arrays, we are going to do it with objects.

Instead of square brackets [ ] now we are going to use curly braces { } to destructure. As you know that's the main difference between an array and an object.

🤷 What's an object?

An object contains a set of information defined as properties, and every property has a value. Let's continue working with car examples.

const nissan = {
   name: 'Nissan',
   model: 'Sentra',
   year: 2015,
   color: 'black',
   isAutomatic: false,
   availableRegions: ['asia','america','europe'],
   sellers: {
      asia: 'VendorA',
      america: 'VendorB',
      europe: 'VendorC'
   }
}

With several properties, maybe we just want to extract specific information, and here's where we have our friendly destructuring feature.

✅ Destructuring an object

As I said before, the way we're going to destructure elements is by using curly braces. However, the main difference is that we're going to specify the name of the properties and the order does not matter.

const {name, model, availableRegions} = nissan;

Like arrays, doing the previous code will create new variables per property.

console.log(name, mode, availableRegions);
// 'Nissan', 'Sentra', ['asia','america','europe']

It's very useful when working with APIs, I worked on a small project that gathered information from the icanhazdadjoke API and it's formatted as JSON, if you don't know what JSON is, it's like a way to organize data in form of JavaScript objects.

Destructuring comes in handy when we have to deal with APIs like that, the project above is funny, but it's the same when it comes to job projects. NoSQL databases may have that format, we can have that topic for another blog post but the main idea is that destructuring is really important.

✅ Changing variable names

If we want to change the name of the variables, we need to add the property name and define a new name with a colon (:).

const {name: carName, model: carModel, availableRegions: continents} = restaurant;
console.log(carName,carModel,continents);
// 'Nissan', 'Sentra', ['asia','america','europe']

✅ Default values

When we receive API data (data from another site), sometimes we can encounter that some objects don't have the property names we set on our js doc.

That's why we use default values, and we can set them as the following with the equal (=) sign:

const {style = ''} = nissan;
console.log(style);
// ""

We defined the variable style however, taking a look at our sample object, it doesn't have it, so, if we want to use that property, it'll return our default value.

✅ Assigning new values to variables

If we want to change the value of a let variable, we can define them in our destructured data.

Since we're using curly braces to destructure our object, JavaScript will throw an error trying to use them at the beginning of the line. We could do that with square brackets but not with curly braces. The reason behind this is curly braces represent a block of code.

We're not creating a new block of code, but mutating an object, to avoid that error, we use parenthesis and curly braces with it.

let a = 'I am data';
let b = 'I am other data'
const sampleObject = {a: 2, b: 5, c:7};
({a,b} = sampleObject);

Now variables a and b are not the string values we see at the beginning, but they are converted to new values from destructuring.

console.log(a,b);
// 2, 5

✅ Nested objects

In our sample object, we can see that the value of the sellers property, contains another object. Let's check how does it look like by destructuring that property.

const {sellers} = nissan;
console.log(sellers);
// {asia: "VendorA", america: "VendorB", europe: "VendorC"}

But what about if we just want to know the name of America's seller? Of course, we can do sellers.america however we're not saving that value in a variable, and if we do it, we're writing another line of code.

So destructuring objects solve that problem for us in the same line of code:

const {sellers: {america}} = nissan;
console.log(america);
// 'VendorB'

We can also name it differently by using the syntax we learned before.

const {sellers: {america: americaVendor}} = nissan;
console.log(americaVendor);
// 'VendorB'

✅ Destructuring objects as a parameter of a function

It's wonderful the things that you can do with destructuring, and this is a very useful use case we have. We can destructure a parameter as an object.

Let's use our sample object and create a method:

const nissan = {
   carPurchase: function({customer, date, time}) {
console.log(`Congratulations ${customer}, you bought a ${this.name} - ${this.model} on ${date} at {time} Enjoy your car.`);
  }
}

Notice that I've added curly braces as parameters, they are not three parameters but just one destructured as an object with three properties.

If we run the code above, it should return our data:

nissan.carPurchase({
customer: 'David Salomon',
date: '2021-02-24',
time: '07:30 a.m.'
)
// Congratulations David Salomon, you bought a Nissan - Sentra on 2021-02-24 at 07:30 a.m. Enjoy your car.

You can go even further, by adding default values to the destructured object within the parameter, as we learned before.

That feature is really useful if you need to create a function with several parameters, it's better to have them in just one object.