Array and Object Destructuring in Javascript

Intro

Since ES2016, Javascript syntax has supported creative ways of scoping variables within objects and arrays. These creative technique are widely used among the React community. Today i'll keep our focus only on one of this technique called Destructuring.

What is Destructuring?

In the simplest of definitions, it's the process of unpacking a small part of something from the main part.

Object Destructuring

Destructuring assignment allows you to locally scope fields within an object and to declare which values will be used. Consider the sandwich object. It has four keys, but we only want to use the values of two. We can scope bread and meat to be used locally.

const sandwich = {
  bread: "dutch crunch" 
  meat: "tuna",
  cheese: "swiss",
  toppings: ["lettuce", "tomato", "mustard"]
};
const {bread, meat}= sandwich;
console.log(bread, meat); // dutch crunch tuna

The code above pulls bread and meat out of the object and creates local variables for them. However, if we declare these destructured variables using let, the bread and meat variables can be changed without changing the original sandwich object.

const sandwich = {
  bread: "dutch crunch" 
  meat: "tuna",
  cheese: "swiss",
  toppings: ["lettuce", "tomato", "mustard"]
};
let {bread, meat}= sandwich;
bread = "garlic";
meat = "turkey";
console.log(bread); // garlic
console.log(meat); // turkey

console.log(sandwich.bread, sandwich.meat) // dutch crunch tuna

We can also destructure incoming functions arguments. Consider this function that would log a persons name as a lord.

const lordify = (regularPerson) => {
  console.log(`${regularPerson.firstName} of centerbury`);
};
const regularPerson = {
  firstName: "bill",
  lastName: "wilson",
};
lordify(regularPerson); // bill of centerbury

Instead of using the dot notation syntax to dig into the object, we can destructure the values we need out of the regularPerson.

const lordify =({firstName}) =>{
  console.log(`${firstName} of centerbury`)
}
const regularPerson = {
  firstName: "bill",
  lastName: "wilson"
}
lordify(regularPerson) // bill of centerbury

Let's take this one level farther to reflect a data change. Now, the regularPerson object has a new nested object on the spouse key:

const regularPerson = {
  firstName: "bill",
  lastName: "wilson",
  spouse: {
    firstName: "phil",
    lastName: "wilson",
  },
};

If we wanted to lordify the spouse's first name, we'd adjust the function's destructured arguments slightly:

const lordify = ({ spouse: { firstName } }) => {
  console.log(`${firstName} of centerbury`);
};
lordify(regularPerson); // phil of centerbury

Using the colon and nested curly braces,we can destructure the firstName from the spouse object.

Array Destructuring

Values can also be destructured from arrays. Imagine that we wanted to assign the first value of an array to a variable name:

const [firstAnimal] = ["Horse", "Mouse", "Cat"];
console.log(firstAnimal) // Horse

We can also pass over unnecessary values with list matching using commas. List matching occurs when commas take the place of elements that should be skipped. With the same array, we can access the last value by replacing the first two values with commas:

const [, , lastAnimal] = ["Horse", "Mouse", "Cat"];
console.log(lastAnimal); // Cat

Conclusion

And that will be all for this section. If you find this article helpful, then click on the follow button to get more updates and helpful resources on Javascript, ReactJs and NextJs.. You can also follow me on twitter @o_sunday15 to get useful resources and tech trends.