Destructuring

Destructuring assignments

Destructuring allows us to extract one or more elements from any object or array and assign it to a new variable. It is another great syntax extension that has been gifted to us with the introduction of ES2015.

Destructuring arrays

Let’s imagine that we want to extract the medalists of a 100m run and write them to a new variable. ES5 allows us to express this in the following way:

const athletes = [
  'Usain Bolt',
  'Andre De Grasse ',
  'Christophe Lemaitre ',
  'Adam Gemili',
  'Churandy Martina',
  'LaShawn Merritt',
  'Alonso Edward',
  'Ramil Guliyev',
];

const gold = athletes[0];
const silver = athletes[1];
const bronze = athletes[2];

Thanks to destructuring, we can simplify this greatly and reduce the expression to a single statement: