Skip to content

Destructuring objects and arrays

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:

1
2
3
4
5
6
const person = {
  firstName: "Nick",
  lastName: "Anderson",
  age: 35,
  sex: "M"
}

Without destructuring

1
2
3
const first = person.firstName;
const age = person.age;
const city = person.city || "Paris";

With destructuring, all in one line:

1
2
3
4
5
6
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) // ReferenceError -- 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".

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
function joinFirstLastName(person) {
  const firstName = person.firstName;
  const lastName = person.lastName;
  return firstName + '-' + lastName;
}

joinFirstLastName(person); // "Nick-Anderson"

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

1
2
3
4
5
function joinFirstLastName({ firstName, lastName }) { // we create firstName and lastName variables by destructuring person parameter
  return firstName + '-' + lastName;
}

joinFirstLastName(person); // "Nick-Anderson"

Destructuring is even more pleasant to use with arrow functions:

1
2
3
const joinFirstLastName = ({ firstName, lastName }) => firstName + '-' + lastName;

joinFirstLastName(person); // "Nick-Anderson"
  • Array

Let's consider the following array:

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

Without destructuring

1
2
const x = myArray[0];
const y = myArray[1];

With destructuring

1
2
3
4
const [x, y] = myArray; // That's it !

console.log(x) // "a"
console.log(y) // "b"

Useful resources