Support People In Ukraine
Ukraine was invaded by Russia in the early morning of 24.02.2022, explosions thundered in Ukrainian cities, many civilians died, tens of millions are affected. Our army protects all Europe from the occupiers and it needs help now to restrain one of the biggest armies in the world. Please, donate a small amount.
I Am
Volodymyr Hudyma
<FrontEndDeveloper />
You Are Here: Home/Destructuring Assignment In JavaScript

# Destructuring Assignment In JavaScript

May 18, 2020

Destructuring assignment is a special syntax that allows us to retrieve pieces of arrays or objects and assign them to separate variables.

This approach can be used for: arrays, objects, and iterables.

## Destructuring Arrays

Let's start by taking a grasp of how arrays are destructured.

Consider the following example that doesn't use the pattern:

``````const numbers = [1, 2, 3];

const firstNumber = numbers[0];
const secondNumber = numbers[1];
const thirdNumber = numbers[2];

console.log(firstNumber); // Prints "1"
console.log(secondNumber); // Prints "2"
console.log(thirdNumber); // Prints "3"``````

Imagine having many arrays of much bigger size, code starts rapid growing.

``````const numbers = [1, 2, 3];

const [firstNumber, secondNumber, thirdNumber] = numbers;

console.log(firstNumber); // Prints "1"
console.log(secondNumber); // Prints "2"
console.log(thirdNumber); // Prints "3"``````

Looks much, much cleaner.

#### Destructuring nested arrays

Imagine having nested arrays. It is possible to destructure them as well:

``````const numbers = [1, 2, 3, [4, [5]]];

const [
firstNumber,
secondNumber,
thirdNumber,
[fourthNumber, [fifthNumber]],
] = numbers;

console.log(firstNumber); // Prints "1"
console.log(secondNumber); // Prints "2"
console.log(thirdNumber); // Prints "3"
console.log(fourthNumber); // Prints "4"
console.log(fifthNumber); // Prints "5"``````

#### Ignore elements

Unwanted elements can be ignored by using commas:

``````const numbers = [1, 2, 3];

const [firstNumber, , thirdNumber] = numbers;

console.log(firstNumber); // Prints "1"
console.log(thirdNumber); // Prints "3"``````

In the example above, the second number is skipped.

#### Destructure all items but first

You can capture all trailing items in an array with a "rest" pattern:

``````const numbers = [1, 2, 3];

const [firstNumber, ...rest] = numbers;

console.log(firstNumber); // Prints "1"
console.log(rest); // Prints "[2, 3]"``````

#### Destructure non-existing element

Destructuring non-existing element results in `undefined`:

``````const numbers = [1, 2];

const [firstNumber, secondNumber, thirdNumber] = numbers;

console.log(firstNumber); // Prints "1"
console.log(secondNumber); // Prints "2"
console.log(thirdNumber); // Prints "undefined"``````

#### Set default value

If you want the default value to replace non existing while destructuring, you can use the assignment operator:

``````const numbers = [1, 2];

const [firstNumber, secondNumber, thirdNumber = 3] = numbers;

console.log(firstNumber); // Prints "1"
console.log(secondNumber); // Prints "2"
console.log(thirdNumber); // Prints "3"``````

Default values can be more complex expressions (including function calls). They are evaluated only in case if the value is not provided:

``````const numbers = [1, 2, 3];

const [firstNumber, secondNumber, thirdNumber = 30] = numbers;

console.log(firstNumber); // Prints "1"
console.log(secondNumber); // Prints "2"
console.log(thirdNumber); // Prints "3"``````

In the example above, the assigned number `30` is ignored.

## Destructuring Objects

Objects are destructured exactly the same way as arrays, except the parentheses `[]` are replaced with curly braces `{}`:

``````const user = {
name: "John",
surname: "Doe",
age: 18,
};

const {name, surname, age} = user;

console.log(name); // Prints "John"
console.log(surname); // Prints "Doe"
console.log(age); // Prints "18"``````

Important note: when destructuring objects, the order does not matter:

``````const user = {
name: "John",
surname: "Doe",
age: 18,
};

const {name, age, surname} = user;

console.log(name); // Prints "John"
console.log(surname); // Prints "Doe"
console.log(age); // Prints "18"``````

#### Destructuring nested objects

Nested objects can be destructured using the same pattern (curly braces `{}`):

``````const user = {
name: "John",
surname: "Doe",
street: "John Doe street",
},
};

const {name, surname, address: { street }} = user;

console.log(name); // Prints "John"
console.log(surname); // Prints "Doe"
console.log(street); // Prints "John Doe street"``````

Important note: there is no variable `address` as we take its context instead.

#### Ignoring items

In order not to destructure property from an object, just don't put it inside the brackets, and that's it:

``````const user = {
name: "John",
surname: "Doe",
age: 18,
};

const {name, surname} = user;

console.log(name); // Prints "John"
console.log(surname); // Prints "Doe"``````

#### The "rest" pattern

Trailing elements can be assigned to an object using "rest" pattern (like arrays, right?):

``````const user = {
name: "John",
surname: "Doe",
age: 18,
};

const {name: userName, ...rest} = user;

console.log(rest); // Prints {surname: "Doe", age: 18}``````

#### Destructure non-existing element:

Results in `undefined`:

``````const user = {
surname: "Doe",
age: 18,
};

const {name: userName, surname: userSurname, age: userAge} = user;

console.log(userSurname); // Prints "Doe"
console.log(userAge); // Prints "18"``````

#### Set default value

The default value can be set using the assignment operator:

``````const user = {
surname: "Doe",
age: 18,
};

const {name = "John", surname, age} = user;

console.log(name); // Prints "John"
console.log(surname); // Prints "Doe"
console.log(age); // Prints "18"``````

Important note: default value can refer to any variable, including another variable in the same pattern:

``````const user = {
age: 18,
};

const {name = "John", surname = name, age} = user;

console.log(name); // Prints "John"
console.log(surname); // Prints "John"
console.log(age); // Prints "18"``````

#### Rename destructured variable

Sometimes, you can face the situation, when the variable that you try to destructure value to, has already been declared.

In this case, you can destructure value into a variable with another name using the colon `:`:

``````const user = {
name: "John",
surname: "Doe",
age: 18,
};

const {name: userName, surname: userSurname, age: userAge} = user;

console.log(userSurname); // Prints "Doe"
console.log(userAge); // Prints "18"``````

## Pitfall #1

There is one important thing to remember about - don't start destructuring operation with curly braces `{}`:

``````const user = {
name: "John",
surname: "Doe",
age: 18,
};

{name, surname, age} = user; // SyntaxError: Unexpected token ``````

Code blocks begin with a curly brace, statements must not begin with it.

## Destructuring In Function Parameters

We can create a function that accepts a single object with multiple properties as a parameter instead of many individual parameters.

Inside of such function, we can use access parameters by using destructuring:

``````const createUser = ({
name,
surname,
email,
}) => {
// ...
};

const user = createUser({
name: "John",
surname: "Doe",
email: "john.doe@example.com",
});``````

Without using parameters destructuring:

``````const createUser = (
name,
surname,
email,
) => {
// ...
};

const user = createUser(
"John",
"Doe",
"john.doe@example.com",
"qwerty1234",
"qwerty1234",
);``````

#### Default values in function parameters

Destructured function parameters can be given default value the exact same ways as objects or arrays:

``````const createUser = ({
name = "John",
surname,
email,
}) => {
// ...
};

const user = createUser({
surname: "Doe",
email: "john.doe@example.com",
});``````

## Multiple Return Values

The function can return multiple values (using an array literal), which can be destructured later on:

``````const example = () => [1, 2, 3];

const [firstNumber, secondNumber, thirdNumber] = example();

console.log(firstNumber); // Prints "1"
console.log(secondNumber); // Prints "2"
console.log(thirdNumber); // Prints "3"``````

## Summary

• Objects, arrays, and iterables can be destructured
• Destructuring means extracting specified values into separate variables
• Nested data can be destructured as well
• Destructured elements can be given names and default values
• Destructuring non-existing element results in `undefined`