Check out a free preview of the full Component-Based Architecture in AngularJS 1.x and ES6 course:
The "Destructuring" Lesson is part of the full, Component-Based Architecture in AngularJS 1.x and ES6 course featured in this preview video. Here's what you'd learn in this lesson:

ES2015 provides developers with a syntax for pulling properties off an object and creating local variables. This technique is called destructuring. While destructuring is most commonly used with objects, Scott demonstrates it can also apply to array values.

Get Unlimited Access Now

Transcript from the "Destructuring" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Scott Moss: Before you get on to the exercise, we're gonna talk about one feature that you'll probably use in this exercise, maybe, maybe not. You've seen it before and I was telling you how ridiculously confusing it was. But we're gonna go into it just a little bit just like we're gonna talk about one-fifth of the actual feature.

[00:00:20] So a common pattern we use in JavaScript or in this program in general is we like to pluck properties off an object and create global variables to make it easy to access them, then we pass them off somewhere else. That's called destructuring. You're mainly doing that. So a common pattern is at the top of a function scope.

[00:00:40] You pass in some object and you're like, let me get that property. Let me get that property right? That’s very common. So there's a feature for that now and you can just do this. It’s the same as above. So what this is doing, it's making a constant called enable, a constant called id.

[00:00:57] And setting it equals to options.enable and options.id. So I'm gonna open up Babel just so we can just play with that a little more so you can see. So if I have a object, and we'll just call it options again.
>> Scott Moss: Right, and then I have an id property on it, and I have like, some nums.

[00:01:22] What I could do is I can say, I can use const, I can use var, I can use let. It doesn't matter as long as we use some type of variable initialization. And then I can use the bracket notation. Again, this is not object literal. They just ran out of characters and they're trying to confuse us.

[00:01:39] If I just place in the same name of the expected property of the object that I'm about to pluck from. So, options.
>> Scott Moss: I get that value. So if I console.log(id), I should get one.
>> Scott Moss: Right.
>> Scott Moss: So everybody see how that works? So if you want multiple values, you would just comma separate it.

[00:02:08] So the trick with this is though that the variable names that you're doing here have to be the exact same property names on the object. But there are some ways to get around this. There's some things you can do so if I said, say, if I get rid of nums, right?

[00:02:28] So now it's there is all nums. I can actually set up default values so I could say, well nums=23, all right? So if I go like this, it’s 23. It's like a set of a default value just in case nums doesn't exist an object on options.
>> Scott Moss: Everybody see that, all right?

[00:02:48] So, another thing is, if you were nested. So nested. Here's some more data. Right, now I want to get the data property from nested. What you could do is you come in here and you say, nested. And you come in here and you want the data.
>> Scott Moss: All right, so you just literally make another object inside the brackets and get the property from that.

[00:03:20]
>> Speaker 2: Is the nested also defines the constant then too?
>> Scott Moss: No, nested is not there. [CROSSTALK] It's not there, good question.
>> Speaker 3: So if you also want it nested, could you do that?
>> Scott Moss: If you wanted the object nested-
>> Speaker 3: Nested and data.
>> Scott Moss: If you want it nested and data-

[00:03:40]
>> Speaker 3: [CROSSTALK] Have to do it in two lines.
>> Scott Moss: Actually, I don’t know. Let's check it out, let's see.
>> Scott Moss: Yeah.
>> Speaker 3: Okay. [LAUGH]
>> Scott Moss: Yeah, so that's how you do that. And then also the other one is if you want to change the names. So this is cool, but what if I don't want id to be id?

[00:04:02] I want to get the id property, but I want to call it other. So now if I go id, it's like id is not defined but other is.
>> Scott Moss: Yeah, so it doesn't stop there. [LAUGH] You can also do this with arrays. So I have an array of 1, 2, and 3.

[00:04:31] I could also say, I want the first and the second equals, oops, I guess I should give this a name, right?
>> Scott Moss: Nums, so first and second from nums. And that will give me the first thing and the second thing in the array.
>> Scott Moss: So if I wanted to skip one though, I just want to get the last thing in the array so I just say comma, comma, and then I'll just call this last.

[00:05:21]
>> Scott Moss: And then I get the last thing.
>> Speaker 4: There's no length or anything?
>> Scott Moss: No, you can’t access, so the thing on the left is gonna be random before what's on the right, right? It's gonna be compiled before the thing on the right. It's not actually gonna be executed because that's not how JavaScript works.

[00:05:40] So yeah, technically I guess you could do it if the interpreter were to work that way. But because of the transpiler, no, you couldn’t.
>> Speaker 4: So you couldn’t assign a whole set of variable but another constant to the length of nums, and then pass that in to the constant that you're trying to get last with?

[00:06:00]
>> Scott Moss: No, cuz these are just variable names, these aren't expressions.
>> Speaker 4: Sure, right.
>> Speaker 5: What if you don't know the length, I guess you're SOL?
>> Scott Moss: Yep, SOL. That's why I don't see too many using this feature. Objects make sense but for arrays, I'm like mm, I don’t know.

[00:06:19] I don't see it happening.
>> Scott Moss: Any questions on that? And the same thing works as far as like nested with this too.
>> Scott Moss: Let's see.
>> Speaker 6: A couple questions from online, Scott.
>> Scott Moss: Yo.
>> Speaker 6: Dominic R is wondering what best practices would you have for updating an application when state change happens in a service.

[00:06:53] So if your service is holding onto some data and multiple different subscribers would be interested in different transformations of that data, I guess.
>> Scott Moss: Yep, mm-hm.
>> Speaker 6: What's going on? Dominic R is saying that he's had approaches where he registers an array of callback functions on the service when a particular bit of state changes, those callback function should be called.

[00:07:18] But he's wondering if there's perhaps a better way.
>> Scott Moss: Yeah, there are better ways. I don't spoil it cuz that is exactly what everybody's about to do.
>> Speaker 6: Okay. [LAUGH]
>> Scott Moss: Just to talk about the ways that you're not gonna do it, then you can figure out the ways that you will do.

[00:07:32] So, Angular has an eventing system built into it so you can do messaging between stuff in Angular. So broadcast and what is the other one?
>> Speaker 6: Emit.
>> Scott Moss: Emit, there you go. I don't know why I drew a blank here. Yeah, broadcast and emit. I don't recommend that one.

[00:07:45] I only use that one. I think the only time I've ever used that one was when I was like using some type of real time system and there was literally no other way for me to communicate. But for 90% of the time, as far as updating stuff, objects are passed by reference.

[00:08:01] So if you just bind everything to an object.
>> Speaker 6: Yeah, that's what I've done in the past as well. It's usually like if I have some array of objects, and I'm showing one of the objects over here and the array over here, I would just bind to the same object.

[00:08:15] When it updates, it updates in every spot.
>> Scott Moss: Yeah, exactly. So if you keep the same reference to the op, that's why it's really nice, the pattern that I showed you guys with the factory. Is that if you just bind to that object, you're fine. And if for some reason you're not getting an update, then you'll see on the solution that I show you how you can force an update and get the stuff that you want.

[00:08:38] So yeah, if you just bind to the object, you should be fine. But if you can't, for some reason that's not working, use the messaging system built into Angular. Just be wary of its performance hindrance.
>> Speaker 6: Use sparingly, kind of.
>> Scott Moss: Yeah.
>> Speaker 6: And the other question was what are Babel's considerations for file size once ES2015 is transpiled?

[00:08:59]
>> Scott Moss: What's the question again?
>> Speaker 6: Sorry, Leif D is wondering what are Babel's considerations for file size once ES6 is transpiled.
>> Scott Moss: That's a good question. I'm not too sure about I know it has a limit. And if you wanna see that limit, if you go into webpack.config and get rid of node modules and run it, it'll tell you the limit in the terminal.

[00:09:25] Here's the limit, this thing was too big. I forgot how big it is but it will say it. I dont know the exact number. So tell him to do that and he'll see.
>> Speaker 7: [INAUDIBLE] Thanks.