Series: ESNext

ES2015 Destructuring

Published on Feb 03, 2016

Destructuring is really cool, can save you code, and you’re probably already using a small portion of its power.

Learn more about this cool new ES2015/ES6 feature, including how to destructure deeply nested objects, how to use it with Ember’s import statement, and how to use it with arrays.

UPDATE: As Seth points out in the comments below, you can get a hash and an item within a hash: let { x, z, z: { a } } = hash.

Note: I know some of you were expecting a screencast on Ember Data Serializers… but we’ve been doing Ember Data stuff for 2 months, and serializers alone will take another month… so we’re taking a break to explore some other topics for a bit.



In ES2015, you can destructure objects:

let {x, z} = {x: 5, y: 4, z: 3}

console.log(x, z) //=> 5, 3

You can destructure objects that are assigned to variables, destructure complex objects, and assign destructured values to new variables:

let hash = {x: 5, y: 4, z: {a: 'hats'}}
let {x, z} = hash //destructure above object, stored in the variable 'hash'
let {a: h} = z //destructure z, assign a to h

console.log(z, h) //=> Object {a: "hats"}, "hats"

You can also destructure arrays:

let array = [5, 4, 3]
let [x,,z] = array

console.log(x, z) //=> 5, 3


Hey. So I know that some of you were expecting this to be a screencast about serializers, but I realized we’ve been doing Ember data for two straight months now and there’s at least another month’s worth just in serializers. So we’re going to take a quick break and talk about some other more general Ember stuff.

This week we’re going to be talking about ES2015 destructuring. It’s a really cool concept that you might already be using, but you just don’t know what it’s called and all the cool advanced stuff you can do with it.

So here is one of the more basic examples. So we have our hash that has ‘x’,’ y’, and ‘z’ values. And then we let this hash be a ‘x’ and ‘y’. And so what that does is now ‘x’ here, this variable is 5, and this variable ‘y’ is 4. So when we console.log it will be 4.

Here’s what it does when it’s transformed into ES5. So it has a private variable, xyz, and then it just calls ‘x’ on it, assigns that to variable ‘x’, and then calls ‘y’ on that and assigns that to variable ‘y’. So this is just a really great shortcut for these three lines.

Now in this case we’re assigning directly from the hash when it’s declared. But you could call something a hash and put in a variable, and then destructure it. So you can carry this hash in another variable and destructure it later.

You can see a version of this in the imports and exports. You may remember this from video 62 where we’re exporting various types of salsa and we’re exporting named variables, and then the default, and then here these two are basically destructuring from where it got stored in the file system in the resolver. So that’s a more advanced version of this. I say more advanced. It’s really the same thing, but with knowledge of how the imports and exports of Ember work.

So this is the basic level of destructuring. You can also go further. Here we have this... now we’re destructuring and ‘z’ is an entire object. But we can also destructure things further.

For example, we could... let’s go ahead and name this something besides ‘x’. So we can take ‘z’ and we can let ‘a’ from ‘z’, so we’ve destructured that further, but we can do this all in the same let statement. So we’re destructuring this completely here. So we’re grabbing ‘a’, and ‘z’ of course is... well, you can’t actually get both ‘z’ and something within ‘z’. Right, because it says ‘z’ is not defined, so we can’t even have it as an undefined logging.

So if we wanted to do this, then we would need to once again do the slow version of destructuring. One other cool feature of destructuring is that you aren’t necessarily stuck with this variable. So it’s ‘a’ here but it doesn’t have to be called ‘a’. You can call it ‘h’. And then it’s working just fine.

So you can change the name of the variable that’s being used, that you’re destructuring it into. The first one is where it’s coming from, and the second one is the variable that you’re destructuring it into. If we’re going over to our ES5 over here, the first variable is what you call on the thing you’re destructuring. And the second one, the value, is the variable you’re putting it in.

In Ember exports and imports, there’s a shortcut for that, or it’s actually longer but it’s more obvious. It’s as. So we’re importing here helper, but we’re going to be calling it makeHelper. So in Ember that syntax is changed a little bit.

It’s also interesting to note that even though you can do complex destructures like we have here, it appears that within the Ember source code, there aren’t any that are that complex. My guess is that this is a conscious decision in order to reduce the complexity by only having a single layer of imports. You can tell that it’s already been broken down. In the old way this would have been import from Ember and then get the helpers, and then get this from the helpers. But in the new system that’s coming soon to an Ember near you, you can import it directly from ember-htmlbars/helper.

So that’s how it integrates with Ember. But that’s not all there is to destructuring. Before we go, let’s take a quick look at arrays, because arrays can destructure as well. So here we’re assigning this array to the variable array, and then we’re destructuring it into ‘x’, ‘y’, and ‘z’. And notice ‘z’ is now a hash still, so we can still destructure it like this. You can see logging it out, it gets us what we would expect.

And a cool thing about this is you don’t actually have to give the same value. You don’t have to give a variable for each part of the array. So you can just leave some blank if you want.

So this has been the ES6 feature, JavaScript destructuring. If you want to learn more, you can go to this link I’ll include in the show notes, and you can go to the ‘Try it out’ to experiment and see what you can do. I’ll see you next time.


Subscribe to our mailing list