DEV Community

Cover image for ๐Ÿš€Learning Object Destructuring in JavaScript
Yuli Petrilli
Yuli Petrilli

Posted on • Edited on

๐Ÿš€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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)  // "!"
Enter fullscreen mode Exit fullscreen mode

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! :)

Top comments (3)

Collapse
 
jonrandy profile image
Jon Randy ๐ŸŽ–๏ธ • Edited

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)  // "!"
Enter fullscreen mode Exit fullscreen mode
Collapse
 
ypdev19 profile image
Yuli Petrilli

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

Collapse
 
ypdev19 profile image
Yuli Petrilli

I'm really happy to know this was helpful to you! ๐Ÿค—