Learn Javascript Destructuring using Github Copilot Labs
Tags: javascript, webdev, tutorial, programming
Published: 2022-04-17 15:03:50

##### Setup
`npm init -y` to start your project.
A file name called `index.js`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46j688iw39c1mzi6hgnp.PNG)
 
I will be using GitHub Copilot Labs to further explain my code base.

To get GitHub Copilot Labs install the GitHub copilot extension or join the waiting list.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tib7jo30lfzfcch4zg51.PNG)
 
##### Usage
Highlight the code snippets and click ask Copilot
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mklqvyww0ch27awxgwj8.PNG)
 
---

##### Object Destructuring
Let's write an object of student with a name and age.

The old way to get properties from object is:
```javascript
const student = {
  name: 'John',
  age: 30,
};

console.log(student.name);
console.log(student.age);

```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t10smmka354gvqrmsk77.PNG)
 
##### Explanation: The code is written in ES6 syntax.
Here is the explanation for the code above:
1. The student object has name and age as its properties.
2. student.name refers to the property name in the student object.
3. student.age refers to the property age in the student object

#### Destructuring
```javascript
const student = {
  name: 'John',
  age: 30,
};

const { name, age } = student; 
console.log(name);
console.log(age);

Note: Left hand side holds the properties in curly brackets while the Right hand holds the object
```

##### Result:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ac7wv9hewr9i8op88tr.PNG)
 

---

##### Default assignment on values
```javascript
const student = {
  age: 30,
};

const { student_name = 'James', age } = student;
console.log(student_name);
console.log(age);
```

##### Explanation:
javascript
Here is the explanation for the code above:
1. const student = {};
2. const { student_name = 'James', age } = student;
The above code will assign the student_name and age variables with the value of the student object.

If the student_name key does not exist in the student object, then the student_name variable will be assigned the value of <mark>James</mark>.

If the age key does not exist in the student object, then the age variable will be assigned the value of 30. 


---

##### Destructuring and Extracting values in Nested object
```javascript
const person = {
  name: 'John',
  age: 30,
  pet: {
    height: 0.4,
    breed: 'Caucasian',
  },
};

const {
  pet: { breed: doggy },
} = person;

console.log(doggy);
```

###### Explanation
1. We're destructuring the person object and pulling out the pet object as pet.
2. We're saying that we want the pet object's breed property to be the doggy variable.
3. We're saying that the pet object's breed property is the same as the doggy variable.
4. We're saying that the doggy variable should be the pet object's breed property.


---

##### Array Destructuring
```javascript
const animals = ['dog', 'cat', 'bird', 'monkey', 'elephant', 'tiger'];
const [first] = animals;
console.log(first);

```

###### Explanation:
1. The first line of the code is declaring a variable called animals and assigning it to an array.
2. The second line is declaring a variable called first and assigning it to an array.
3. The third line is a destructuring assignment.
4. The first part of the destructuring assignment is assigning the first element of animals to first. 

Summary: The first value in the array should be assigned to the varible called `first`.


---

##### More example
```javascript
const animals = ['dog', 'cat', 'bird', 'monkey', 'elephant', 'tiger'];
const [first, second] = animals;
console.log(first, second);
```

Explanation:
The first two elements are assigned to the variable.<mark>First</mark> and <mark>Second</mark>


---

##### More Examples
```javascript
const animals = ['dog', 'cat', 'bird', 'monkey', 'elephant', 'tiger'];
const [, , third] = animals;
console.log(third);


Explanation:
1. The variable animals contains an array of strings.
2. The variable [, , third] is an array with three elements.
3. The variable third is the third element of the variable [, , third], which is the string 'bird'.
4. The `, ,` skips the first two elements and puts the third value inside the variable called <mark>third</mark>

```

You can rejig the above code
```javascript
const [, , third] = ['dog', 'cat', 'bird', 'monkey', 'elephant', 'tiger'];
console.log(third);

```

---

##### Discuss
In what situations do you use destructuring of arrays and objects?
Please leave a comment in the section below.