Intro to Destructuring Objects (ES6)

Destructuring is a feature of the ES6 spec that allows you to write less code to “data-proof” your functions. You can simultaneously declare variables while pulling them out of an object. Ultimately, I think it leads to more readable code by removing the repetition of a common pattern.

There are a number of options for destructuring an object. The basic syntax looks like this:


var { name, title, planet } = { 
  name: 'Nic', 
  title: 'software engineer', 
  planet: 'Earth' 
};

// Equivalent to manually declaring the following:
// var name = 'Nic';
// var title = 'software engineer';
// var planet = 'Earth';

var { name, title, planet } = {

title: 'software engineer',

planet: 'Earth'

};

// Equivalent to manually declaring the following:

// var name = 'Nic';

// var title = 'software engineer';

// var planet = 'Earth';

This will automatically create variables as declared in the curly braces on the left. It will also pull out the properties of the object on the right and assign the values to the associated variables on the left.

Though this is the first time we have seen curly braces on the left side of an assignment operator in JavaScript, this is actually valid syntax according to MDN.

It may make more sense in the context of a common example, such as an Ajax or http request, which returns an object of data.

Let’s pretend that the function below called getDeets() is an http request. Rather than pulling apart the data object that is returned and either using copious amounts of dot notation or individually assigning it’s properties to variables, we can clean it up with this syntax. The following two code examples produce the same result.

Traditional Syntax


function getDeets() {
  // do an http request
  return { 
    name: 'Nic', 
    title: 'software engineer', 
    planet: 'Earth' 
  };
}

var data = getDeets();

var name = data.name;
var title = data.title;
var planet = data.planet;

console.log(name, 'is a', title, 'on planet', planet);
// Will log 'Nic is a software engineer on planet Earth'

function getDeets() {

// do an http request

return {

title: 'software engineer',

planet: 'Earth'

};

}

var data = getDeets();

var name = data.name;

var title = data.title;

var planet = data.planet;

console.log(name, 'is a', title, 'on planet', planet);

// Will log 'Nic is a software engineer on planet Earth'

With ES6 Destructuring


function getDeets() {
  // do an http request
  return { 
    name: 'Nic', 
    title: 'software engineer', 
    planet: 'Earth' 
  };
}

var { name, title, planet } = getDeets();

console.log(name, 'is a', title, 'on planet', planet);
// Will log 'Nic is a software engineer on planet Earth'

function getDeets() {

// do an http request

return {

title: 'software engineer',

planet: 'Earth'

};

}

var { name, title, planet } = getDeets();

console.log(name, 'is a', title, 'on planet', planet);

// Will log 'Nic is a software engineer on planet Earth'

Aliasing

Fortunately, you are not bound to property names of the object you are working with. You can assign new variable names to the object you are destructuring. Perhaps you want to create shorter variables. You can assign variable names by providing a value using the syntax show below.


function getDeets() {
  // do an http request
  return { 
    name: 'Nic', 
    title: 'software engineer', 
    planet: 'Earth' 
  };
}

var { name: n, title: t, planet: p } = getDeets();

console.log(n, 'is a', t, 'on planet', p);
// Will log 'Nic is a software engineer on planet Earth'

console.log(name, 'is a', title, 'on planet', planet);
// Will throw an error
// 'name', 'title', and 'planet' were aliased

function getDeets() {

// do an http request

return {

title: 'software engineer',

planet: 'Earth'

};

}

var { name: n, title: t, planet: p } = getDeets();

console.log(n, 'is a', t, 'on planet', p);

// Will log 'Nic is a software engineer on planet Earth'

console.log(name, 'is a', title, 'on planet', planet);

// Will throw an error

// 'name', 'title', and 'planet' were aliased

As Parameters

There is an additional step we can take to make our destructuring even more concise. We can destructure our objects when we declare our functions. If we have an object, we can pass that to a function and tell our function to destructure in the parameters.


var deets = { 
  name: 'Nic', 
  title: 'software engineer', 
  planet: 'Earth' 
};

function logIt({name, title, planet}){
  // Will declare these vars automatically
  console.log(name, 'is a', title, 'on planet', planet);
}

logIt(deets);
// Will log 'Nic is a software engineer on planet Earth'

var deets = {

title: 'software engineer',

planet: 'Earth'

};

function logIt({name, title, planet}){

// Will declare these vars automatically

console.log(name, 'is a', title, 'on planet', planet);

}

logIt(deets);

// Will log 'Nic is a software engineer on planet Earth'

Default Values

We often spend a lot of time in data proofing our functions to do things like this:


function logIt(name, title, planet){
  name = name || 'Nic';
  title = title || 'software engineer';
  planet = planet || 'Earth';
}

function logIt(name, title, planet){

name = name || 'Nic';

title = title || 'software engineer';

planet = planet || 'Earth';

}

Wouldn’t it be cool if we could use destructuring to remove that boilerplate? Yes, it would be cool. So cool, in fact, that ECMA decided that you should be able to do it. So you can declare default values like this:


var deets = { 
  name: 'Nic', 
  title: 'software engineer', 
  planet: 'Earth' 
};

function logIt({name='Sally', title='astronaut', planet='Ride'}){
  // Will declare these vars automatically
  console.log(name, 'is a', title, 'on planet', planet);
}

logIt();
// Will log 'Sally is a astronaut on planet Ride'

logIt(deets);
// Will log 'Nic is a software engineer on planet Earth'

var deets = {

title: 'software engineer',

planet: 'Earth'

};

function logIt({name='Sally', title='astronaut', planet='Ride'}){

// Will declare these vars automatically

console.log(name, 'is a', title, 'on planet', planet);

}

logIt();

// Will log 'Sally is a astronaut on planet Ride'

logIt(deets);

// Will log 'Nic is a software engineer on planet Earth'

Traditional Syntax

With ES6 Destructuring

Aliasing

As Parameters

Default Values

Submit a Comment Cancel reply