Level Up Your JavaScript With Object Destructuring and the Spread Operator

Major revisions to Javascript brought us very useful tools like arrow functions and new syntax to mimic classes, but there are many other additions, such as object destructuring and the spread operator that are often overlooked but can be a powerful addition to your arsenal and make your code drier and cleaner.

Let’s say you need to create new variables and assign them to the value of some of the keys from the object expense. Without the help of object destructuring, your code would look something like this:

Instead, you can achieve the same with the following line:

This line of code (assuming expense has already been defined) will create a new constant for each property inside the brackets and assign it to the value of the key with a matching name inside expense. If you pass in a name that doesn’t match one of the keys of the object, a constant with that name will be defined, but it will not be assigned a value. While this may not seem like a huge difference, those extra lines of code can easily pile up when you need to assign many constants. Additionally, you can deconstruct an object inside the parameter of a function and filter only the properties of the object that you are interested in:

When calling the function youBought, you can pass it a whole object as an argument, but because we destructured the object when defining the function, we can refer to each property simply by calling it’s name without having to call the name of the original object using dot notation. Again, the benefits of doing this are better appreciated when you deal with many properties, and luckily, you can also take advantage of destructuring while dealing with arrays.

You can declare multiple variables in a similar way:

Each variable declared on the left side gets paired with the value of arr at each corresponding index. If there is no corresponding index in arr, any constant declared on the left hand side will be undefined. Conversely, if there are less variables declared on the left hand side than there are indexes in arr, you will be able to selectively assign variables from the values of arr:

However the real usefulness of the spread operator comes not from allowing you to easily assigning values to individual variables, but from its ability to combine multiple objects. If you wanted to create a new array that contained the numbers one through six, you can use the spread operator to “reuse” arr and “append” new values to it to create a new array:

It is worth noting that all of the arrays that were used to create new arrays remained unaltered, which makes the spread operator an almost required tool for functional programming. But there is more; we can use the spread operator to combine objects in a similar way without altering the original objects used:

By doing this, you create a new object that resembles expense with an additional property store. You could have simply written this instead:

However, this would have mutated the original expense object. Additionally, the object store could have been passed in, so hard coding would not have been a great option or an option at all.

Now that you have seen how these two tools can make your life easier, I hope you can incorporate them into coding lexicon. Destructuring can save you a lot of unnecessary and messy code, while in the case of the spread operator, you could argue it’s more than just syntactic sugar because of its ability to leave objects unchanged, making it a versatile and perhaps necessary tool for functional programming.