ES2015Destructuring
devguides.io / ES2015

Destructuring

The new destructuring syntax lets you extract data from arrays and objects into their own variables.

const name = ['John', 'F', 'Kennedy']
const [first, middle, last] = name

console.log(first)    'John'
console.log(middle)   'F'
console.log(last)     'Kennedy'

This works great for swapping variables! No need for temporary variables.

let [a, b] = [b, a]
Further reading...

What if there's more than 3 items? Next

Spread

You can use ... to clump many arguments into on array.

const countries = ['USA', 'Canada', 'Portugal']
const [usa, ...others] = countries

console.log(usa)      'USA'
console.log(others)   ['Canada', 'Portugal']

This works on the other side of = too! You can use the ... syntax as part of an array literal. In fact, destructuring syntax was made so that they can be used as literals, too.

const people = [leader, ...members]
Further reading...

Let's try them on objects, too. Next

Objects

Destructuring works for objects, too.

const album = {
  artist: 'Miles Davis',
  title: 'Kind of Blue'
}

const { artist, title } = album

console.log(artist)    'Miles Davis'
console.log(album)     'Kind of Blue'

let a, b
({a, b} = {a:1, b:2})

When used outside of let (or var or const), you'll need to wrap them in parentheses.

Why parentheses?

The parentheses prevents {a, b} from being treated as a block statement. This is the same rule that prevents {hi: 'world'}; from being a valid JS statement.

Further reading...

Let's use them outside assignments. Next

Function arguments

Destructuring also works in function arguments. It's not just for assignments!

function greet ({name, greeting}) {
  console.log(`${greeting}, ${name}!`)
}

greet({ greeting: 'Hello', name: 'John' })
'Hello, John!'

What if you want to change the name? Next

Changing names

Your variables don't need to have the same name as the object keys. You can extract a property into a different name.

const name = {
  first: 'Sherlock',
  last: 'Holmes'
}

const { first: firstName } = name
console.log(firstName)   'Sherlock'

Let's learn about default values. Next

Default values

Use the default value syntax to set defaults in case a property doesn't exist.

const song = {
  title: 'Across the Universe',
   artist: 'The Beatles'
}

const { genre = 'Unknown' } = song

console.log(genre)
'Unknown'

What about objects inside objects? Next

Deep objects

You can go down into nested objects with destructuring, too.

const page = {
  uri: { domain: 'devguides.io', path: '/es2015' },
  title: 'ES2015 guides'
}

const { uri: {domain} } = page

console.log(domain)
'devguides.io'

Let's recap what we've learned. Next

Recap

Arrays can be destructured. Spread (...) can be used when destructuring arrays.

const name = ['John', 'F', 'Kennedy'] 
const [first, middle, last] = name
const [first, ...others] = name

Objects can be destructured. You can even assign them to new names.

const name = { first: 'Jon', last: 'Snow' } 
const { first, last } = name
const { first: firstName } = name

Function arguments can also be destructured.

function greet ({name, greeting}) {  console.log(`${greeting}, ${name}!`) } 

Let's learn about import and export. Next chapter