🚀Learning Object Destructuring in JavaScript

Object destructuring is a feature in JavaScript that allows you to extract values from objects and assign them to variables in a more concise and readable way.

This feature was introduced in ES6 and has since become a popular technique among JavaScript developers.

In order to use object destructuring, you can use curly braces {} to specify the properties you want to extract from an object. Let's take a look at some examples of how this incredible feature can be used:

1. The basic Object Destructuring

const person = { name: 'John', age: 30 };
const { name, age } = person;
console.log(name); // Output: John
console.log(age); // Output: 30

Here we declare a person object with name and age properties. We then use destructuring to extract these properties and assign them to variables with the same names. We can then use them to access the values of the properties.

2. Renaming variables

const person = { name: 'John', age: 30 };
const { name: fullName, age: years } = person;
console.log(fullName); // Output: John
console.log(years); // Output: 30

Here we use destructuring to extract the name and age properties from the person object. However, we also use the colon : syntax to rename the variables to fullName and years. This allows us to use different variable names while still extracting the values we need.

3. Default values

const person = { name: 'John' };
const { name, age = 30 } = person;
console.log(name); // Output: John
console.log(age); // Output: 30

Here we use destructuring to extract the name property from the person object. We also declare a default value of 30 for the age variable in case it is not defined in the person object. This ensures that our code does not throw an error if the age property is missing.

4. Dynamic property names

const helloStr = "Hello world!"
const { length, [length-1]: last } = str
console.log(length)  // 12
console.log(last)  // "!"

Here we use destructuring to dynamically assing last as the new property name from the helloStr variable in order to get the last character from the string.

Conclusion 🏁

Object Destructuring is a powerful feature that will not only make you look cool but also will help you to write cleaner and more efficient code that will be easier to maintain and understand.

Happy learning and thank you for reading!

If this article was helpful to you, don't forget to hit that ❤️ button and support me with a follow, i will keep posting more content about tech, programming, career development and more! :)

Comments

[Jon Randy 🎖️]

You can restructure with dynamic property names too:

const str = "Hello world!"
const { length, [length-1]: last } = str
console.log(length)  // 12
console.log(last)  // "!"

[Yuli Petrilli]

Ohh nice I didn't know this way, i will definitely update the article with it. Thank you for sharing!! 🙌

[Yuli Petrilli]

I'm really happy to know this was helpful to you! 🤗