Destructuring

As we've found, the easiest way to learn the new ES6 syntax is to see the old way of writing JavaScript.

const expense = {
  type: "Business",
  amount: "$45 USD"
};

const type = expense.type;
const amount = expense.amount;

ugh. So much redundancy! We have const, type, and amount written three times. Using our old object, we can assign type and amount in a better way using curly-brackets.

const {type} = expense;
const {amount} = expense;

Variable names need to be identical to property names.

We can boil this down even a little further.

const { type, amount } = expense; 

We will often times see this syntax when importing specific parts of a file. Look forward to the next section to see examples of this.

Destructuring Arrays

we can make this code:

const vegetables = ["carrit", "tomat", "tomato soup"];

const firstVegetable = vegetables[0];

a lot prettier using square-brackets like this

const [ firstVegetable ] = vegetables

Notice the use of square-brackets vs the curly-brackets we were using before.

ES6 pulls the first item from the vegetables array, and assigns it to the firstVegetable variable. You can assign the first few like so:

const [ firstVegetable, secondVegetable ] = vegetables

Destructuring arrays and objects together

We are going to use two sets of destructuring in the last line of this snippet.

const people = [
  {name: 'Bob', age: 31},
  {name: 'Joe', age: 29},
  {name: 'Ben', age; 42}
];
const [{ name }] = people 

We start on the outside and go in, so name would equal Bob

Practical Examples

There are many times were we need to change our data structures. Destructuring is extremely useful for this.

Let's assume we have a grid of points:

const points = [
  [4, 5],
  [10, 1],
  [0, 40]
]

but we are working with a graphing library that wants an array structured like this:

[
  { x: 4, y: 5 },
  { x: 10, y: 1 },
  { x: 0, y: 40 }
]

To transform our data, we could use a for loop. But let's not risk looking like an ES6 noob. Let's go step by step. Each one of these steps would work, but we'll simplify our code bit by bit. In every step of the way, and this first example especially, try to use destructuring to simplify the code.

points.map(point => {
  const x = point[0];
  const y = point[1];
});

points.map(point => {
  const [ x, y ] = point;
});

points.map(([ x, y ]) => {
  return { x: x, y: y };
});

now, finally:

points.map(([ x, y ]) => {
  return { x, y };
});

One more example

Often we will use this to import specific parts of a package. All three following examples would do the exact same thing:

import { createStore } from "redux";

let { createStore } = require("redux");

let createStore = require("redux").createStore

Don't let import intimidate you, we'll talk about it later.

Practice

This takes a lot of practice. Try each of these examples on your own before looking at the solution.

Use destructuring to simplify this ES5 code:

const profile = {
  title: 'Engineer',
  department: 'Engineering'
};

function isEngineer(profile) {
  const title = profile.title;
  const department = profile.department;
  return title === 'Engineer' && department === 'Engineering';
}

answer in ES6:

const profile = {
  title: 'Engineer',
  department: 'Engineering'
};

const isEngineer = ({title, department}) => title === 'Engineer' && department === 'Engineering';