Destructuring objects and arrays in JS

ma[CG]yver
1,005 views

Open Source Your Knowledge, Become a Contributor

Technology knowledge has to be shared and made accessible for free. Join the movement.

Create Content

Destructuring is a convenient way of creating new variables by extracting some values from data stored in objects or arrays.

To name a few use cases, destructuring can be used to destructure function parameters or this.props in React projects for instance.

Explanation with sample code

Object

Let's consider the following object for all the samples:

const person = {
  firstName: "Nick",
  lastName: "Anderson",
  age: 35,
  sex: "M"
}

Without destructuring

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const person = {
firstName: "Nick",
lastName: "Anderson",
age: 35,
sex: "M"
}
const first = person.firstName;
const age = person.age;
const city = person.city || "Paris";
console.log(first) // "Nick"
console.log(age) // 35
console.log(city) // "Paris" because person.city is undefined
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

With destructuring, all in one line:

1
2
3
4
5
6
7
8
9
10
11
12
13
const person = {
firstName: "Nick",
lastName: "Anderson",
age: 35,
sex: "M"
}
const { firstName: first, age, city = "Paris" } = person; // That's it !
console.log(age) // 35 -- A new variable age is created and is equal to person.age
console.log(first) // "Nick" -- A new variable first is created and is equal to person.firstName
console.log(firstName) // Undefined -- person.firstName exists BUT the new variable created is named first
console.log(city) // "Paris" -- A new variable city is created and since person.city is undefined, city is equal to the default value provided "Paris".
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Note : In const { age } = person, the brackets after const keyword are not used to declare an object nor a block but is the destructuring syntax.

Function parameters

Destructuring is often used to destructure objects parameters in functions.

Without destructuring

1
2
3
4
5
6
7
8
9
10
11
12
13
function joinFirstLastName(person) {
const firstName = person.firstName;
const lastName = person.lastName;
return firstName + '-' + lastName;
}
const person = {
firstName: "Nick",
lastName: "Anderson",
age: 35,
sex: "M"
}
console.log(joinFirstLastName(person)); // "Nick-Anderson"
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

In destructuring the object parameter person, we get a more concise function:

1
2
3
4
5
6
7
8
9
10
11
function joinFirstLastName({ firstName, lastName }) { // we create firstName and lastName variables by destructuring person parameter
return firstName + '-' + lastName;
}
const person = {
firstName: "Nick",
lastName: "Anderson",
age: 35,
sex: "M"
}
console.log(joinFirstLastName(person)); // "Nick-Anderson"
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Destructuring is even more pleasant to use with arrow functions:

1
2
3
4
5
6
7
8
9
const joinFirstLastName = ({ firstName, lastName }) => firstName + '-' + lastName;
const person = {
firstName: "Nick",
lastName: "Anderson",
age: 35,
sex: "M"
}
console.log(joinFirstLastName(person)); // "Nick-Anderson"
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Array

Lets consider the following array:

const myArray = ["a", "b", "c"];

Without destructuring

1
2
3
4
5
const myArray = ["a", "b", "c"];
const x = myArray[0];
const y = myArray[1];
console.log(x, y); // "a" "b"
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

With destructuring

1
2
3
4
5
6
const myArray = ["a", "b", "c"];
const [x, y] = myArray; // That's it !
console.log(x) // "a"
console.log(y) // "b"
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Useful resources

Open Source Your Knowledge: become a Contributor and help others learn. Create New Content