Learn Javascript Destructuring using Github Copilot Labs

Setup

npm init -y to start your project.
A file name called index.js

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.

Usage

Highlight the code snippets and click ask Copilot

---

Object Destructuring

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

The old way to get properties from object is:

const student = {
  name: 'John',
  age: 30,
};

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

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

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:

---

Default assignment on values

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 James.

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

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

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

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.First and Second

---

More Examples

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

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.