menu

Learning Object Destructuring in JavaScript

posted Originally published at www.codeqazone.com 2 min read

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.

Final Thoughts

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, check out more in my blog Code & QA Zone.

•

Nice breakdown of object destructuring and its practical uses. It’s amazing how much cleaner code becomes with this feature. Could similar destructuring patterns be applied effectively in nested or more complex objects too?

0 votes
•

Hey Andrew! Thank you for comment! I agree with you because this definitely contributes to a much cleaner, readable and organized code.

And to answer your question, yes, destructuring works with nested and complex objects too.

For example, let’s say we have this user object:

const user = {
  profile: {
    address: {
      city: 'New York',
      zip: '10001'
    }
  }
};

And the nested destructuring to extract values from these inner objects would be something like:

const { profile: { address: { city, zip } } } = user;
console.log(city); // New York
console.log(zip);  // 10001

It can seem a bit abstract at first, but with practice, any developer will get the hang of it and build solid coding habits.

I hope this helps!

0 votes
•

Nice explaination of destructuring of objects in Java, including the nested objects.
Thanks

0 votes

More Posts

How I load javascript?

Aad Pouw - Sep 7

What is Javascript and How It Powers Modern Websites

Sangy K - Aug 12

JavaScript Objects: Your First Step to Data Magic

Abdelhakim Baalla - Jul 15

The Unchaining: My Personal Journey Graduating from jQuery to Modern JavaScript

kitfu10 - May 20

A Guide to Better Code Organization in JavaScript Through File Separation

Michael Larocca - Nov 17
chevron_left