# Destructuring objects and arrays in JS

ma[CG]yver
17.1K views

### Open Source Your Knowledge, Become a Contributor

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

With destructuring, all in one line:

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

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

Destructuring is even more pleasant to use with arrow functions:

### Array

Lets consider the following array:

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


Without destructuring

With destructuring

## Useful resources

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