JavaScript Destructuring Explained

The JavaScript destructuring expression is a way to pull specific fields out of objects without having the entire object. This can be used either to just simply rip out values from an object and run checks against them. However, it is probably best used in function parameters, as it allows you to send a configuration object into the function and then only rip out the values you need within the function. This will become clearer with the following examples and I will also show you different ways of using the destructuring expression.

The below example shows a simple usage of the destructuring expression. First, there is an object defined called 'person' with three fields: 'firstname', 'lastname', and 'country'. Then I'm declaring two variables called 'firstname' and 'lastname' and setting their value equal to the person object. Notice the curly brackets in the instantiation of these two variables, this is the destructuring operation. This tells JavaScript to check the 'person' object for a field with the same name and take its value. This then allows you to log out of the two variables from the object as if they were declared globally.

const person = {
  firstname: 'Adam',
  lastname: 'Roynon'
}

let { firstname, lastname } = person

console.log(firstname, lastname);

An important thing you can do with the destructuring expression is use it within function parameters/arguments. The below function destructures a passed-in object to extract the variables 'firstname' and 'lastname'. If we call the function and pass in the same object as before those two variables will be instantiated as if they were passed in as normal arguments and not within an object.

const person = {
  firstname: 'Adam',
  lastname: 'Roynon'
}

function printName({ firstname, lastname}){
  console.log(firstname, lastname);
}

printName(person);

You won't always know the structure of a passed-in object, it may not have the specific fields we want. This is where default values come in, we can set a default value to a field so that if the field doesn't exist within the passed in configuration object then it's default value will be used. The below example shows an object similar to the previous object, but with the 'lastname' field omitted. The destructured arguments to our function have changed, as are now setting a default value of "Roynon" to the 'lastname' field. Because the passed-in object 'person' does not have a field called 'lastname' so the default value is used, otherwise the 'lastname' variable would be initialised with the passed in object's value.

const person = {
  firstname: 'Adam'
}

function printName({ firstname, lastname = "Roynon"}){
  console.log(firstname, lastname);
}

printName(person);

This ability to set default values can be used within any destructuring operation, not just within a function's arguments. The below example shows the same process as the previous example but instead of using a function we are destructuring the object fields into globally scoped variables. The 'lastname' field again has a default value of 'Roynon'.

const person = {
  firstname: 'Adam'
}

let { firstname, lastname = "Roynon" } = person

console.log(firstname, lastname);

Objects in JavaScript are not always a flat structure, they usually have a more hierarchical structure and have nested objects and fields. We can still use destructuring to grab these nested fields and instantiate them into separate variables. The example below shows how to pull the 'country' field out of the nested 'location' object. It is important to note that 'country' will be pulled out as a separate field and it won't be within a 'location' object when destructured, there will be no 'location' object after the destructuring operation, just the three variables 'firstname', 'lastname', and 'country'.

const person = {
  firstname: 'Adam',
  lastname: "Roynon",
  location: {
    country: "United Kingdom"
  }
}

let { firstname, lastname, location: { country } } = person

console.log(firstname, lastname, country);

You can also use different names for the variable once they have been pulled out of the object via destructuring. The below example shows pulling the 'firstname' and 'lastname' fields from the 'person' object. We are then using the colon symbol ':' to assign new names to these two variables. Now the values from the object will be assigned to the variables 'fName' and 'lName' instead of the names from within the object.

const person = {
  firstname: 'Adam',
  lastname: "Roynon"
}

let { firstname: fName, lastname: lName } = person

console.log(fName, lName);

We can also use destructuring on arrays, it doesn't have to be used on an object. The below example shows an array with 3 elements and then using the destructuring operation to assign the names 'red', 'green' and 'blue' to those elements. Notice how we are using square brackets instead of curly brackets when destructuring an array vs an object. The values of the elements within the array will be assigned the three new variables. So the final log statement will print the number '125', '255', and '50'.

const myArr = [125, 255, 50];

let [red, green, blue] = myArr;

console.log(red, green, blue);

You don't have to pull out every element from an array, you can pull out a subset. The below code snippet will pull out the first two elements from the array. So the final statement will print the numbers '1', and '2'.

const myArr = [1, 2, 3];

let [one, two] = myArr;

console.log(one, two);

We can also skip values within an array. Let's say we wanted to pull out the first and last element from the array. We can skip an array element by putting in an extra comma in the destructuring operation. You can skip as many elements as you want with additional commas, and at any position in the array or destructuring operation.

const myArr = [1, 2, 3];

let [one,, three] = myArr;

console.log(one, three)

This post was originally published on https://acroynon.com

Comments

[Steve Clark 🤷‍♀️]

Recently I had to pull order data from a Stripe account. I tried destructuring in the ways you describe but the only way I could get it working was this way

const data = await response.json();
const { data: order } = data;

Can you explain this? Thanks

[Seanmclem]

What did you try instead? What's the type of the response? It's a great place for some typescript

[Steve Clark 🤷‍♀️]

const { order } = data;  // did not work
const [ order ] = data; // did not work

I tried a bunch of different combos till I got the one I posted to work.

[Adam Roynon]

Your original example, the one that works, suggests that the response has a 'data' field.
For example:

const response = { 
  data: {
      ... some data
  }
}

Then you're destructuring that out and renaming it order

const { data: order } = data
// This is taking that 'data' field and destructuring it into an 'order' object

Your other examples would return undefined as there is no top-level 'order' object

const { order } = data
// undefined as response.order is undefined

Have you tried this

const { data.order: order } = data
// Takes response.data.order and destructures it into an 'order' object

I'm not sure if this will work, as I'm not 100% sure of the structure of the response object.

[Seanmclem]

Then data does not contain order. You need to try just storing the result json as a regular value, and console log it. To see what's in the result

[AlokJoshiOfAarmax]

Great article

[Adam Roynon]

Thanks, I really appreciate that