fbpx Skip to content

Aquent | DEV6

JavaScript Destructuring Assignments Part 1 : Objects

Written by: Quazi Sharar

JavaScript’s destructuring assignments can help you to write less lines of code and easily copy data – all while making less errors.  

Destructuring assignments can seem a bit complex at first glance – not because it’s difficult but because it is a completely different way of unpacking things from one place to another. The syntax can be a bit confusing as well. In this article, we will outline simple ways to remember how to use them without falling into error traps. First, we will learn what it is, then why we should use it and then the how.

What is Destructuring in Javascript?

The two most commonly used data structures in JavaScript are Objects and Arrays. One of the most common things developers do with these data structures is extract specific data out of them and store it elsewhere. Destructuring is a simple, compact way to do exactly that.

Why Destructuring?

Now that we know what it is, let’s look into why we should use Destructuring Assignments. The three main reasons are:

  1. Easy to extract all information from a source at once.
  2. Less lines of code
  3. When used correctly can prevent errors and increase code usability

As we go through the examples, we will tie back into these main reasons.

How to Destructure

Let’s look into the how of destructuring assignments. We will go over Object destructuring  in part one.

Simple Destructuring

The two main components in destructuring are: the source object and the target variables you want to extract the data from the source object into.

const car = {
 
  wheels: 4,
 
  airbags: 5,
 
  headlights: 2
 
}

  
let {wheels, airbags, headlights} = car;
 
console.log(wheels, airbags, headlights);

//Output 4 5 2 */

Here we have an object called car with properties: wheels, airbags and headlights. We are taking the values from inside the object and assigning to variables with the same property name. This is the simplest form of destructuring.

A couple of very important things to note:

  1. All the variables are wrapped around in curly braces with a declaration type, in this case ‘let’. The curly braces let JavaScript know that this is a destructuring assignment.
  2. The declaration ‘let is on the same line as the variables themselves. If we decided to assign to existing variables, we would have to use parenthesis around the braces. The reason for this is that every {} is treated as a code block and to destructure we need to tell JavaScript that it is not a code block but an assignment (an assignment is something where two sides are separated by an equal sign)

The following would be another way to assign the same variables:

const car = {
 
  wheels: 4,
 
  airbags: 5,
 
  headlights: 2
 
}
 

let wheels, airbags, headlights;
 
({wheels, airbags, headlights} = car);
 
console.log(wheels, airbags, headlights);

Notice the variables being declared first and then the destructuring assignment wrapped around parenthesis.  This method is only necessary/ideal to use when the variables have been pre-declared.

As we can see in the above examples, we can extract three distinct pieces of data from the source object at once which ties back to reason #1. By corollary, it ties into reason #2 and saves lines of code compared to the non-destructuring assignment method below:

const car = {
 
  wheels: 4,
 
  airbags: 5,
 
  headlights: 2
 
}
 
 
let wheels = car.wheels;
 
let airbags = car.airbags;
 
let headlights = car.headlights;
 
 
console.log(wheels, airbags, headlights);
 
//Output 4 5 2

Formula for destructuring:

declaration { targetVariables } = sourceObject;

Destructuring to a different variable name:

As seen in the previous example, the variable names were the same as the property names in the object. What if we wanted to have a different variable name? The way to do that is to have a colon followed by the new variable name.

const car = {
 
  wheels: 4,
 
  airbags: 5,
 
  headlights: 2
 
}
 
 
let wheels = car.wheels;
 
let airbags = car.airbags;
 
let headlights = car.headlights;
 
  
console.log(wheels, airbags, headlights);
  
//Output 4 5 2

Here we are taking the value of the ‘wheels’ property from the car object and assigning it to a new variable called ‘wh’. The same with ‘ab’ and ‘hl’. Pretty straight forward!

Formula for destructuring to a new variable name:

declaration { variableName(s): newVariableName } = sourceObject;

Destructuring and providing default values:

Let’s say we are destructuring from an object to a variable, but the value of that variable does not exist in the source object.  A fail-safe way to do this is by giving the new variable a default value so it doesn’t end up with an ‘undefined’.

const car = {
 
  wheels: 4,
 
  airbags: 5,
 
  headlights: 2
 
}
 
  
let {wheels: wh, airbags: ab, headlights: hl} = car;
 

console.log(wh, ab, hl);
 
//Output 4 5 2

In this example, all the variables exist as properties in the car object except for ‘turbo’. Therefore, by assigning a default value of ‘none’ to turbo, ‘undefined’ is prevented. If the car object however did have a value, it would overwrite the default value. Using this technique to extract values which may or may not be present in the target object can prevent errors since we will always get a predefined value if the assignment fails – this tags along with reason #3 – prevent errors and improve usability.

Formula for destructuring and providing a default value:

declaration { variableName = defaultValue} = sourceObject;

These are the main features for Object destructuring in JavaScript. In part 2 we will cover Array destructuring and also how we can use destructuring in function parameters.