Profile picture of Marc Backes (very handsome) Profile picture of Marc Backes (very handsome)
Marc Backes

Beginner's Guide to ES6 Destructuring

June 26, 2019 · by Marc Backes
Profile picture of Marc Backes (very handsome) Profile picture of Marc Backes (very handsome)
Beginner's Guide to ES6 Destructuring Beginner's Guide to ES6 Destructuring

First things first ☝️

In this post, we'll see lots of code that looks like the following:

const { property1, property2 } = object
  • The left-hand side are the variables being assigned
  • The right-hand side is the source where the information comes from

Destructuring objects 📦

Let's assume we have an object movie which contains id, title, year as properties:

const movie = {
  id: 99,
  title: 'The Matrix',
  year: 1999,
}

If we were to extract the properties of this object the old-fashioned way, we'd have to do something like this:

const id = movie.id
const title = movie.title
const year = movie.year

To make your code more readable, you can use the ES6 way:

const { id, title, year } = movie
console.log(id, title, year) // 99 The Matrix 1999

You'll get the same result as in the example with three lines of code. As a result, you have three variables id, title, year, which each contain the respective value from the object movie.

It's crucial to know that the variable name and the object property have to be the same!

Using a different variable name

If you can't or don't want to use the same variable name as property (e.g., if you have already a variable with that name in use), you can add a colon and indicate the desired variable name:

const { originalPropertyName: newPropertyName } = object

// Example 👇
const { title: movieTitle, year: releaseYear } = movie

Defining a default value

If you're in the situation you want to fill in a default value in case a destructed property is undefined; you can add = followed by the default value:

const { title, rating = 3 } = movie

We didn't define a rating property in our movie object, usually undefined. But as we used the default value syntax, the rating variable would have 3 if it's not already.

Use destructing in a function parameter

const printMovie = ({ title, year, rating }) => {
  // Work directly with the destructed properties
  console.log(`The movie ${title} (${title}) has a ${rating} rating`)
  console.log(`⭐️`.repeat(Math.floor(rating)))
}

Extracting from nested objects

If you have nested objects, you can apply the same principle, only ... well nested.

const character = {
  movie: 'The Matrix',
  name: 'Thomas A. Anderson',
  alias: 'Neo',
  actor: {
    firstname: 'Keanu',
    lastname: 'Reeves',
  },
}

If you'd be interested in only the actor of this movie character, you can apply nested destructuring:

const {
  actor: { firstname, lastname },
} = character
console.log(firstname, lastname) // Keanu Reeves

Destructuring arrays ⛓

ES6 also defines some nifty ways of destructuring arrays.

Let's take a look at the old way first:

const food = ['🍕', '🌭', '🍔', '🍍', '🍓']
const pizza = food[0]
const hotdog = food[1]
const burger = food[2]
console.log(pizza, hotdog, burger) // 🍕 🌭 🍔

In ES6, you can get the values as such:

const food = ['🍕', '🌭', '🍔', '🍍', '🍓']
const [pineapple, strawberry] = food
console.log(pineapple, strawberry) // 🍍 🍓

What might be interesting to know:

You can destructure anything that is iterable. That includes String.

const fruitSalad = '🍏🍌🍐🍒🍇'
const [s, a, l, a, d] = fruitSalad
console.log(d, a, l, a, s) // 🍇🍒🍐🍌🍏

Ignoring items in an array

When destructuring an array, you can ignore values that might not be of interest to you. Also: You can skip as many items as you want.

const breakfast = ['🥐', '🍳', '🧀', '🥓', '🥖']

const [croissant, eggs, , bacon] = breakfast
console.log(croissant, eggs, bacon) // 🥐🍳🥓

const [, , cheese, , baguette] = breakfast
console.log(cheese, baguette) // 🧀🥖

Using the rest operator

If you have an array where you want to get certain items in variables and the rest in a separate array, you can use the spread syntax (...rest):

const food = ['🥐', '🥞', '🥦', '🍆', '🍅']
const [croissant, pancakes, ...veggies] = food
console.log(croissant, pancakes) // 🥐🥞
console.log(veggies) // ["🥦", "🍆", "🍅"]

Swapping variables using destructuring

A handy trick for swapping variables is, using destructuring to do so. Let's assume you have variables x and y, having each a value:

let x = 4711
let y = 1337

To swap them, you could do it by using a temporary variable:

let temp = x
x = y
y = temp

But that's not clean or readable. ES6 destructuring gives a great way to swap these numbers:

;[x, y] = [y, x]
console.log(x, y) // 1337 4711

Summary 🙌

As you see in the examples, destructuring is a great way to make your code shorter and better readable. So whenever you find yourself repeating something like

this.value1 = anotherObject.value1
this.value2 = anotherObject.value2
this.value3 = anotherObject.value3
this.value4 = anotherObject.value4

You have an opportunity to apply the principle of destructuring.

So, head on to your latest pet project and check if there is anywhere you can apply this knowledge. 😊