Skip to content

Instantly share code, notes, and snippets.

@iscott
Last active April 24, 2021 20:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save iscott/65f210efb602cd0012480e6bb47e7cd9 to your computer and use it in GitHub Desktop.
Save iscott/65f210efb602cd0012480e6bb47e7cd9 to your computer and use it in GitHub Desktop.
How ES6+ Destructuring Works

How destructuring works:

Given the JS Object:

const user = { name: "Ira", email: "ira@example.com", favColor: "blue" };

making variables WITHOUT using destructuring:

const name = user.name;
const email = user.email;
const favColor = user.favColor;

making THE SAME variables WITH destructuring:

const {name, email, favColor} = user;

You can also destructure arrays!

Given the Array:

const groceries = ["Eggs", "Milk", "Bread", "Oranges", "Strawberries"];

making variables WITHOUT using destructuring:

const grocery1 = groceries[0];
const grocery2 = groceries[1];

making THE SAME variables WITH destructuring:

const [grocery1, grocery2] = groceries;

Further reading:

MDN Docs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment