Understanding The Destructuring Assignment in JavaScript

4 min readNov 29, 2020

Learn about destructuring in JavaScript with practical examples

Introduction

The Destructuring Assignment is a special syntax introduced in ES6, for neatly assigning values taken directly from an object. It is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. Destructuring makes it easier to write cleaner JavaScript code in an easy way. As result, your code will be easy to read and maintain.

In this article, we will learn about the destructuring assignment in JavaScript. Let’s get right into it.

Image created with ❤️️ By author.

Use Destructuring to extract values from objects

We can use the destructuring assignment to extract values from objects, but first, let’s have a look at how we do that in ES5.

Here is an example:

const user = { name: 'John Doe', age: 34 };const name = user.name; //Prints: name = 'John Doe'
const age = user.age; //Prints: age = 34

Here’s an equivalent using the ES6 destructuring syntax:

const { name, age } = user;
//Prints: name = 'John Doe', age = 34

As you can see, the name and age variables will be created and assigned the values of their respective values from the user object. It is much easier and cleaner using the ES6 destructuring. You can extract as many or few values from the object as you want.

Assign variables from objects

The destructuring assignment allows us to assign variables from objects.

Here is an example of how you can give new variable names in the assignment:

const { name: userName, age: userAge } = user;// userName = 'John Doe', userAge = 34

You may read it as “get the value of user.name and assign it to a new variable named userName".

We can also use the ES6 destructuring to assign variables from nested objects. Let’s take the nested object below johnDoe and try to assign variables from it.

Here is an example:

const user = {
  johnDoe: { 
    age: 34,
    email: 'johnDoe@gmail.com'
  }
};

Here’s how to extract the values of object properties and assign them to variables with the same name:

const { johnDoe: { age, email }} = user;

By using the destructuring assignment, you can go crazy as you want with nested objects.

Assign variables from arrays

ES6 makes destructuring arrays as easy as destructuring objects. Have a look at the examples below:

const [a, b] = [1, 2, 3, 4, 5, 6];
console.log(a, b); // 1, 2

We can also access the value at any index in an array with destructuring by using commas to reach the desired index.

Here is an example:

const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
console.log(a, b, c); // 1, 2, 5

As you can see, that’s an easy way to assign variables from arrays.

Pass an object as a function’s parameters

In some cases, you can destructure the object in a function argument itself.

Have a look at the following example:

const profileUpdate = ({ name, age, nationality, location }) => {  /* do something with these fields */
}

When profileData is passed to the above function, the values are destructured from the function parameter for use within the function.

You can achieve the same thing with the below example:

const profileUpdate = (profileData) => {
  const { name, age, nationality, location } = profileData;
  // do something with these variables
}

This effectively destructures the object sent into the function.

Conclusion

As you can see, the destructuring assignment in JavaScript is one of the important and useful ES6 features that you should know. You will need it a lot when working with frameworks like React or Vue.

Thank you for reading this article, I hope you found it useful. If so, get more similar content by subscribing to Decoded, our YouTube channel!

Understanding The Destructuring Assignment in JavaScript

Learn about destructuring in JavaScript with practical examples

Introduction

Use Destructuring to extract values from objects

Assign variables from objects

Assign variables from arrays

Pass an object as a function’s parameters

Conclusion

Written by Thu Huong Nguyen