Basics of ES6 Destructuring

For Objects and Arrays!

Destructuring is a feature of the ECMAScript 2016 standard, commonly referred to as ES6, that affords JavaScript developers a large degree of flexibility when writing code. The main benefit Destructuring in ES6 provides is making variable assignment off of objects (and arrays) much cleaner with less code.

Prior to ES6, assigning new variables from an object was a bit clunky to write. Let’s say, for example, we wanted to create an object that represented TV celebrity chef Guy Fieri. That object would probably have properties like ‘catchphrase’ or ‘clothingItem’ and would look something like this:

And to create a new variable off of this object, we would have to write some repetitive code:

We have written ‘var’, ‘catchphrase’, ‘clothingItem’, and ‘fieri’ twice

With ES6, as stated above, writing these variable assignments is much cleaner. Refactoring the above example to make use of ES6 would be written as follows:

In the above code, we are pulling off the properties of ‘catchphrase’ and ‘clothingItem’ from the fieri object and creating new variables from those properties. It is important to note, when destructuring an object, the variable name must match a key in that object. If a variable is spelled wrong or if variables are declared that don’t exist in the object then those variables will return undefined. For example:

When destructuring Objects, we pull off properties and assign them to new variables but when we destructure Arrays we pull off elements. The syntax for destructuring arrays is similar to destructuring an object except square brackets [array] are used instead of curly brackets {object}. Another difference is the first value passed in to a destructured array variable assignment will pull off the first element in an array. As an example, lets assume we had an array of TV celebrity chef Guy Fieri food related television programs:

To destructure this array, we would write the following to pull off the first two elements (please note that destructured array variable assignment names do not matter like they do for objects):

Using the same array example as above, we could also make use of the REST operator when destructuring arrays:

Related posts:

In my last medium post, I went over my method of dynamically testing my Postgresql database using Pytest. This post is a refactoring of the way we get our environment variables from out .env file…