por Objects and arrays in JavaScript allow us group variables and values in one place. Although this is very useful, there are times when we want to unpack this grouping to access a single variable or a single value. Therefore, in this post, we will teach you how destructuring works in JavaScript so you can split your objects into smaller groups.
What is destructuring in JavaScript?
Destructuring in JavaScript is a syntax or form of writing that allows us extract values from a array or properties of an object in smaller sections. This destructuring means that we can access specific elements of a larger set through different variables. This opens the possibility of paint a single value or set of values of an object’s variablesjust like painting certain properties of a value of a array.
Here’s how you can use destructuring in JavaScript to extract or capture the properties of an object.
Destructure objects
To illustrate how you can destructure objects in JavaScript, We must first have an object in mind. Suppose then that we have the object characters, that has the properties name, kind and role, each with a certain value.
let character = {
name: ‘Aragorn’,
kind: ‘human’,
role: ‘King of humans’
}
So with JavaScript destructuring we can capture a single of these properties in a new variable, outside the object. To do this, we use any of the variable keywords, then enclose the property in braces { }, and finally set it equal to the object it comes from. Here’s exactly how to write this:
let {role} = character
Keep in mind that the destructuring happens to the left of the arithmetic operator equal. That is, it happens within the curly braces of the variable. Now that we have destructured the variable from its object, we can access it singularly. This allows us, for example, to paint the value of this variable only. To do this, we use the command console.log and we paint the name of the new variable, as you can see in the following lines of code:
console.log (role)
// result painted on screen: King of humans
We can also capture more than one property of an element by separating them by commas within the destructuring. Next, you will see the way we would do it for the properties yam and role:
let {name, role} = character;
Now, with these unstructured variables we can access them to paint a string:
console.log(‘${name} is ${role}’)
// result painted on screen: ‘Aragorn is king of humans’
In this way, we can destructure the properties of an object and convert them to individual variables.
Destructure arrays
With the destructuring syntax in JavaScript we can also destructure arrays to extract the properties of each of its values. One of the basic properties that we can extract in a array is the index. If you don’t know what this concept is, we invite you to read our post on how the index of an index works. array in JavaScript to delve deeper into it.
To deconstruct a array in JavaScript we must use the method array.entrieswhich you can learn more about in our post called array.entries JavaScript or in the MDN post on the subject. So, suppose we have the following array:
const arr = [1, 2, 3]
Using the method arr.entries we can destructure this array to access your index and paint the pairs this method:
const iteratorOfTheArr = arr.entries ( );
for (const [index, value] of iteratorOfTheArr ( )) {
console.log(index, value)
}
The result of these lines of code would be the following:
0 1
1 2
23
Destructuring in JavaScript can be found much more in relation to objects. This happens because this programming language is very rich in the possibilities it gives us to name properties and values in an object. Generallywhen we have to structure data, we use objects. Therefore, they will be the elements that benefit the most from the activity of destructuring. For its part, a array It works more for accumulating items.
Do you dare to continue learning?
Now that you know how destructuring works in JavaScript, We invite you to continue learning with us about the possibilities of this programming language in our Full Stack Web Development Bootcamp. This course consists of comprehensive, intensive high-quality training in which, among many other things, you will learn to master web programming languages such as JavaScript, CSS and HTML. So, after a few months, You will become an expert in web development. What are you waiting for to sign up? Do it now!