Object Destructuring in JavaScript

Object Destructuring is a feature that released with the ES6 update.

“Destructuring assignment makes it easy to assign array values and object properties to variables.”

A simple JavaScript object will be created before showing how to use this feature. All the examples are taken from W3Schools. You can visit their website from the link.

const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 50,
  eyeColor: 'blue'
};

Before thise feature, in order to create a variable for each property, a variable used to be created and assigned to the proper property. Check out the example below:

let firstName = person.firstName;
let lastName = person.lastName;
let age = person.age;
let eyeColor = person.eyeColor;

With Object Destructuring feature, you can get the same result with just one line of code:

let {firstName, lastName, age, eyeColor} = person;

Done! What happened here was, a variable is created for each property inside the object called person. The name of variables are same with the property name.

Get Selim Yay’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

The same feature could be used when working with arrays as well.

const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];

let [banana, orange, apple, mango];