Introduction to JavaScript Destructuring

What is JavaScript Destructuring?

The destructuring assignment syntax is an ES6 feature, that allows you to unpack values from an array or an object into separate variables..

Destructuring Arrays

Before destructuring was introduced, if we wanted to extract elements from an array, it would be done as follows:

const seasons = ['Winter', 'Spring', 'Summer', 'Fall'] 

const one = seasons[0];
const two = seasons[1];
const three = seasons[2];
const four = seasons[3];

console.log(one, two, three, four)
// returns
Winter Spring Summer Fall 

But using destructuring, we can do it in a much simpler, and streamlined fashion.

To use it, start with the const keyword, followed by brackets []. Within the brackets is the destructuring assignment, or the elements we want to abstract out, then set equal to the original array.

Following that process, in order to destructure the elements of our seasons array, would be done as follows:

const [one, two, three, four] = seasons
console.log(one, two, three, four)
// returns 
Winter Spring Summer Fall 

The original array is not mutated, and remains untouched.

If for whatever reason, we only wanted to pull out certain variables within an array and not all, say only Summer and Fall, to do that within an array, leave an empty space, or a hole.

const [,, third, fourth] = ['Winter', 'Spring', 'Summer', 'Fall'] 
console.log(third, fourth)
// returns 
Summer Fall

We can also set default values for variables when extracting them, so that if that element is not part of the array, something will be returned.

const [a, b, c, d, e = "February"] = seasons 
console.log(a, b, c, d, e)
// returns 
Winter Spring Summer Fall February 

It is possible to destructure nested arrays.

const nestedArr = ['Winter', 'Spring', ['Jan', 'Feb', 'March']]

const [x, , [t, u, v]] = nestedArr;
console.log(x, t, u, v);
// returns 
Winter Jan Feb March

It's also possible to switch the position of variables using destructuring.

Take the array of flavors, and to test out this example, make sure it is declared with let and not const, as using const will through an error.

let flavors = ["Vanilla", "Chocolate"];
const [vanilla, chocolate] = flavors; 
console.log(vanilla, chocolate);
// returns 
Vanilla Chocolate

If we wanted to switch the flavors in the destructuring assignment, it's possible to do so in one simple line of code, rather than going through the process of reassigning one of the variables to a temporary variable, before reassigning altogether:

const [vanilla, chocolate] = [chocolate, vanilla];
console.log(vanilla, chocolate);
// returns 
Chocolate Vanilla 

Destructuring Objects

To use destructuring with objects, the philosophy is pretty much the same, but there are a few differences. The first is that instead of using brackets, curly braces are used instead {}.

const dog = {
    name: "Jack",
    breed: "Heinz 57", 
    age: 10.5,
    likes: [ "Long walks", "Belly rubs", "Chasing Squirrels"]}

Unlike with an array, within an object, the order of elements doesn't matter. All we need is the property name to proceed.

const { name, breed, age, likes } = dog;
console.log(name, breed, age, likes);
// returns 
Jack Heinz 57 10.5 
(3) ['Long walks', 'Belly rubs', 'Chasing Squirrels']
0: "Long walks"
1: "Belly rubs"
2: "Chasing Squirrels"

If we wanted the variable names to be different from the property names, we still need to reference the property names as before, but followed by a colon, and the new property name.

const { name: nickName, breed: type, age: years, likes: interests } = dog;
console.log(nickName, type, years, interests);
// returns 
Jack Heinz 57 10.5 
(3) ['Long walks', 'Belly rubs', 'Chasing Squirrels']
0: "Long walks"
1: "Belly rubs"
2: "Chasing Squirrels"

Just as with an array, we can also assign a default value within an object. It's done in the same manner.

const {
  name: nickName,
  breed: type,
  age: years,
  likes: interests,
  favoriteWalk = 'On the street',
} = dog;
console.log(nickName, type, years, interests, favoriteWalk);
// returns 
Jack Heinz 57 10.5 (3) ['Long walks', 'Belly rubs', 'Chasing Squirrels'] On the street

Just as it's possible to destructure nested arrays, it's possible to destructure nested objects.

Again, the curly braces are needed to access an object within an object.

const dog2 = {
  name: 'Maya',
  age: 1,
  breed: 'Samoyed',
  address: {
    city: 'Berlin',
    country: 'Germany',
  },
};

const {
  address: { city },
} = dog2;

console.log(city);
// returns 
Berlin

Destructuring is an incredibly powerful, and useful tool for developers. This is just an introduction to some of its capabilities, but there is a lot more that it's possible to do using destructuring assignment in ES6.

Further Reading

Exploring ES6 - Chapter 10: Destructuring

ES6 in depth