Array and Object Destructuring in Javascript
Published: 2023-07-09 09:53:59

---
title: Array and Object Destructuring in Javascript
published: true
date: 2022-04-04 02:07:33 UTC
tags: 
canonical_url: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/br7wq10xqv7k1986kv05.png
---

## 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](https://twitter.com/O_sunday15) to get useful resources and tech trends.