This content originally appeared on DEV Community and was authored by Abayomi Ogunnusi
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:
- The student object has name and age as its properties.
- student.name refers to the property name in the student object.
- 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:
- const student = {};
- 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
- We're destructuring the person object and pulling out the pet object as pet.
- We're saying that we want the pet object's breed property to be the doggy variable.
- We're saying that the pet object's breed property is the same as the doggy variable.
- 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:
- The first line of the code is declaring a variable called animals and assigning it to an array.
- The second line is declaring a variable called first and assigning it to an array.
- The third line is a destructuring assignment.
- 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.
This content originally appeared on DEV Community and was authored by Abayomi Ogunnusi
Abayomi Ogunnusi | Sciencx (2022-04-17T15:03:50+00:00) Learn Javascript Destructuring using Github Copilot Labs. Retrieved from https://www.scien.cx/2022/04/17/learn-javascript-destructuring-using-github-copilot-labs/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.