Understanding Destructuring in JavaScript

What is Destructuring
Why Destructuring is useful
Destructuring objects
Destructuring arrays
Bonus Part
Resources

What is Destructuring?

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values
from arrays, or properties from objects, into distinct variables.

In this post we will discuss how destructuring works on both objects and arrays in JavaScript.

Why Destructuring is useful?

With destructuring we can read a property and assign its value to a variable without duplicating the property name. More than that, we can read multiple properties from the same object in just one statement. This is very useful especially when we are dealing with large or nested arrays and objects.

At the end of the day destructuring is a syntactic sugar that
makes our development process easier, faster and more convenient!

Destructuring objects

In the example below we create the object person that contains the fields name and age. Let's say that we want to extract these properties from the object.

Without Destructuring

const person = {
    name: 'Alex',
    age: '22',
};

const name = person.name;
const age =  person.age;

// Alex
console.log(name);
// 22
console.log(age);

In the example below we do the same, but now we are using destructuring.

With Destructuring

const person = {
    name: 'Alex',
    age: '22',
};

const { name, age } = person;

// Alex
console.log(name);
// 22
console.log(age);

const { name, age } = person is an object destructuring assignment. This statement defines the variables name and age, then assigns to them the values of properties person.name and person.age correspondingly.

Let's try to expand our previous example and add the nested object address in the object person.

Without Destructuring

const person = {
    name: 'Alex',
    age: '22',
    address: {
        street: 'Wall Street',
        number: 21
    }
};

const name = person.name;
const age =  person.age;
const street = person.address.street;
const number = person.address.number;

// Alex
console.log(name);
// 22
console.log(age);
// Wall Street
console.log(street);
// 21
console.log(number);

With Destructuring

const person = {
    name: 'Alex',
    age: '22',
    address: {
        street: 'Wall Street',
        number: 21
    }
};

const { 
    name, 
    age, 
    address,
    address: {
        street,
        number,
    }, 
} = person;

// Alex
console.log(name);
// 22
console.log(age);
// Wall Street
console.log(street);
// 21
console.log(number);

There are many cases where we would want to use a different name than what is provided on the object itself, so adding a colon after the property name allows us to rename it. This is especially useful when we are dealing with name collisions or when we are working on objects that use property names that are not valid variable names. In the example below we rename all the variables that we used before.

const person = {
    name: 'Alex',
    age: '22',
    address: {
        street: 'Wall Street',
        number: 21
    }
};

const { 
    name: myName, 
    age: myAge, 
    address: {
        street: streetName,
        number: numberName,
    }, 
} = person;

// Alex
console.log(myName);
// 22
console.log(myAge);
// Wall Street
console.log(streetName);
// 21
console.log(numberName);

Destructuring arrays

In the example below we create the array result. Let's say that we want to assign the array values to some variables.

Without Destructuring

const result = [1, 5, 'koala'];

const first = result[0];
const second = result[1];
const third = result[2];

// 1 5 'koala'
console.log(first, second, third);

With Destructuring

const result = [1, 5, 'koala'];
const [first, second, third] = result;

// 1 5 'koala'
console.log(first, second, third);

The way that destructuring works in the arrays is simple. The position of the variable name matches the values index in the array.

Moreover, you can do more complex things like skipping array elements or assigning the rest of the items in an array to a particular variable.

const result = [1, 5, 'koala'];
const [,,third] = result;
const [first,...rest] = result;

// 'koala'
console.log(third);
// 1
console.log(first);
// [ 5, 'koala' ]
console.log(rest);

Bonus Part

We can use Destructuring at function parameters, passing arguments that are coming from objects and arrays.

In the example below, we will use the object person and we will create the array cities. Then we will implement the function printInfo that prints the name of the person and the city that person lives.

const person = {
    name: 'Alex',
    age: '22',
    address: {
        street: 'Wall Street',
        number: 21
    }
};

const cities = ['Athens', 'New York', 'Tokyo'];

function printInfo({ name }, [,,city]) {
    console.log('My name is', name, "and i live in", city);
}

// My name is Alex and i live in Tokyo
printInfo(person, cities);