Assign with Destructuring

In JavaScript, we can use Destructuring to assign properties of an object to a variable. In this post, we’ll see how to use destructuring and its advantages.

JavaScript Object Destructuring

Let say we have an object called user, and we need some values

const user = {
    userName: 'Dexter Morgan',
    userRole: 'Analyst',
    userContact:{
    email: '[email protected]',
    phone: 99999999
    }
}
const userName = user.userName;
const userRole= user.userRole;
const phone = user.userContact.phone;Code language: JavaScript (javascript)

This is fine but we have some redundancy here especially if our variable name is the same as that of the property and if look at some nested objects there can be higher chances of errors. Below is the same code, using destructuring.

const user = {
  userName: "Dexter Morgan",
  userRole: "Analyst",
  userContact: {
    email: "[email protected]",
    phone: 99999999,
  },
};

const { userName, userRole } = user;

// For nested properties
const {userContact: { phone }} = user;
Code language: JavaScript (javascript)

Yes, much better but what if the variable names are different from the keys?

const user = {
  userName: "Dexter Morgan",
  userRole: "Analyst",
  userContact: {
    email: "[email protected]",
    phone: 99999999,
  },
};

const { userName: fullName, userRole: role } = user;

// For nested properties
const {
  userContact: { phone: mobile },
} = user;Code language: JavaScript (javascript)

Alias

The syntax for destructuring with a new variable name

const { propertyName: variableName } = object;Code language: JavaScript (javascript)

Default values

We can also set some default values

const { userName = "default value" } = user;
Code language: JavaScript (javascript)

Dynamic property names

const user = {
  userName: "Dexter Morgan",
  userRole: "Analyst",
};

const nameProp = "userName";
const { [nameProp]:name, userRole } = user;

console.log(name);
> Dexter MorganCode language: JavaScript (javascript)

Existing variables

Destructure and already existing variable

const user = {
  number: 21,
};

({ number } = user);

// we use () to let js know this is an expression
// else it will result in an error

console.log(number);
>  21Code language: JavaScript (javascript)

Handling null/undefined/empty objects

Whatever may be the case we get undefined, in case you want a fallback we can set default values or use the Nullish Coalescing Operator. And yes, we can restructure function return values.

let getUser = () => {};
let getUser = () => null;
let getUser = () => undefined;

const { userName, userRole } = getUser;
console.log(userName, userRole);

> undefined undefinedCode language: JavaScript (javascript)

Array destructuring

It goes like this and we can skip elements using commas.

const numbers = [1,2,3,4,5];

const [one, two, three, , five] = numbers;

console.log(one, two, three, five);
> 1 2 3 5Code language: JavaScript (javascript)

Conclusion

once I knew about object-destructuring, I’ve started using it everywhere. Using this concept we can write clean code, less code, and use const everywhere.
Do you like Destructuring?

Back to Top