Destructuring JS

When working with JavaScript objects and/or arrays it can sometimes be helpful to extract properties/values and save them as individual variables. This can be achieved very efficiently with a process called destructuring.

Array Destructuring

If we are given a large array we can extract just the first three elements using a form of destructuring, shown below:

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let [a, b, c] = array;

console.log(a) => 1
console.log(b) => 2
console.log(c) => 3

If we wanted a to represent the first element, b to represent the second element and c to represent the remaining elements we could modify our earlier expression as follows:

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let [a, b, ...c] = array;

console.log(a) => 1
console.log(b) => 2
console.log(c) => [3, 4, 5, 6, 7, 8, 9]

We can also set default values for destructuring variables:

let array = [1, 2];
let [a = 5, b = 5, c = 5] = array;

console.log(a) => 1
console.log(b) => 2
console.log(c) => 5

The last couple array destructuring techniques I'll cover are assigning an array that is a return value and the process for skipping elements:

function returnArr() {
  return [1, 2, 3, 4, 5, 6];
}

let [a, ,b] = returnArr();

console.log(a) => 1
console.log(b) => 3

In the last example our function, returnArr, returns an array. We assign the first and third values of this array by using destructuring with a comma-separated empty value between our first and second variables (a & b).

Object Destructuring

Destructuring JavaScript objects is very similar to how we went about destructuring arrays. I have provided a basic example of object destructuring below:

let obj = {color: 'black/rust', size: 'large', breed: 'Rottweiler'};

let {color, size, breed} = obj;

console.log(color) => 'black/rust'
console.log(size) => 'large'
console.log(breed) => 'Rottweiler'

If you'd like to assign new variable names you can do so like this:

let obj = {color: 'black/rust', size: 'large', breed: 'Rottweiler'};

let {color: c, size: s, breed: b} = obj;

console.log(c) => 'black/rust'
console.log(s) => 'large'
console.log(b) => 'Rottweiler'

Object destructuring is very powerful when iterating over an array of many objects. It can be implemented into a function to minimize typing out long variable names. I have provided an example below:

let dogs = [
  {
    name: "Bruno",
    stature: {
      weight: "70lbs",
      size: "large"
    },
    age: 1,
    breed: "Mutt"
  },
  {
    name: "Bat",
    stature: {
      weight: "6lbs",
      size: "tiny"
    },
    age: 3,
    breed: "Pomeranian"
  },
  {
    name: "Kiwi",
    stature: {
      weight: "65lbs",
      size: "large"
    },
    age: 14,
    breed: "Chocolate Lab"
  },
  {
    name: "Ralph",
    stature: {
      weight: "90lbs",
      size: "extra large"
    },
    age: 9,
    breed: "Rottweiler"
  }
];

for (let {name: pup, stature: {size: largeness}} of dogs) {
  let a;
  largeness === 'extra large' ? a = 'an' : a = 'a';
  console.log(`${pup} is ${a} ${largeness} doggo`)
}

=>

'Bruno is a large doggo'
'Bat is a tiny doggo'
'Kiwi is a large doggo'
'Ralph is an extra large doggo'

Destructuring both makes it easier to write out code and can make it much easier to read through code that may include deeply nested variables. Hope this run-through helped!

Sources:

MDN Web Docs - Destructuring Assignment

Blog

mzakzook

Array Destructuring

Object Destructuring

Sources:

Join Our Newsletter. No Spam, Only the good stuff.

Related