DEV Community

Cover image for Object Destructuring in JavaScript

Object Destructuring in JavaScript

Last week we talked about array destructuring here. Now let's finally understand object destructuring!

Contents:

Basic Syntax

Destructuring is a simple way to extract data from arrays or objects into separate variables. Now, let's delve into the workings of object destructuring.

Consider this object as an example:

const user = {
  userName: 'Ada',
  age: 28,
  city: 'São Paulo'
};
Enter fullscreen mode Exit fullscreen mode

Now let's extract the data for city and age using destructuring:

const { city, age } = user;
Enter fullscreen mode Exit fullscreen mode

Here, we've created two variables: city and age. These variables will hold the values corresponding to properties of the same names found in the user object.

And now we can work independently with this information:

console.log(city); // output: 'São Paulo'
console.log(age); // output: 28 
Enter fullscreen mode Exit fullscreen mode

Some important details should be noted:

  1. Note that the userName property was omitted in the destructuring. Unlike array destructuring, it's not necessary to manually skip properties.

  2. The order of the variables listed in the destructuring doesn't matter. You'll see that I placed city before age, which won't result in an error. This is because in objects, properties do not follow a fixed order!

  3. Variable names can be changed while destructuring! For this, see below:

Renaming Properties

We can easily change the names of the properties extracted from the object at the same time as the destructuring assignment. This feature is particularly useful when you want to avoid naming conflicts:

const { city: c, age: a } = user;

console.log(c); // output: 'São Paulo'
console.log(a); // output: 28 
Enter fullscreen mode Exit fullscreen mode

Default Values

It's possible that some of the values extracted may be undefined, which can be a source of bugs in your code. We can avoid this quite easily.

Let's assume we want to extract a nationality property, which hasn't been defined. To avoid the variable being assigned undefined, we can assign it a default value, like this:

const { city, age, nationality = 'Brazilian' } = user;
Enter fullscreen mode Exit fullscreen mode

Renaming and Default Values

It is possible to combine the above syntaxes. So we can combine the process of renaming variables and setting default values simultaneously:

const { 
  city: c = 'Belo Horizonte',
  age: a = 18,
  nationality: n = 'Brazilian'
} = user;
Enter fullscreen mode Exit fullscreen mode

And in the case of the user object, the output will now be this:

console.log(c); // output: 'São Paulo'
console.log(a); // output: 28 
console.log(n); // output: 'Brazilian'
Enter fullscreen mode Exit fullscreen mode

Note that the default value will only be applied to n, since the other values were already defined.

Nested Objects

If the object in question contains another object within it, it's also possible to destructure the nested object. Let's add grades for subjects to the user object:

const user = {
  userName: 'Ada',
  age: 28,
  city: 'São Paulo',
  grades: {
    math: 9.5,
    portuguese: 9.2,
    chemistry: 10,
    history: 7.5,
    geography: 7.8,
  }
};
Enter fullscreen mode Exit fullscreen mode

To work separately with the grades, we can destructure like this:

const {
  grades: {
    math, 
    portuguese, 
    chemistry, 
    history, 
    geography 
  } 
} = user;
Enter fullscreen mode Exit fullscreen mode

And now, the values can be accessed separately:

console.log(math) // output: 9.5
console.log(portuguese) // output: 9.2
console.log(chemistry) // output: 10
console.log(history) // output: 7.5
console.log(geography) // output: 7.8
Enter fullscreen mode Exit fullscreen mode

Mutating Variables

Next, let's explore the scenario where variables are already declared and initialized, such as a and b below:

let a = 55;
let b = 77

const object = {
  a: 41,
  b: 27,
  c: 14
};
Enter fullscreen mode Exit fullscreen mode

How can we assign a and b the values contained in the object? We can't write let {a, b} = object or const {a, b} = object, since we would be redeclaring the variables. But we also can't write {a, b} = object, as JavaScript interprets any line starting with curly braces {} as a block of code, resulting in a syntax error in the code.

The solution is to wrap the code using parentheses:

({a, b} = object);

console.log(a); // output: 41
console.log(b); // output: 27
Enter fullscreen mode Exit fullscreen mode

This way, JavaScript will understand it as destructuring and not a block of code.

Thank you for making it this far! =)

Questions, comments, suggestions? Comment below!

Top comments (0)