Component-Based Architecture in AngularJS 1.x and ES6 Object Shortcuts
This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Object Shortcuts" Lesson
>> Scott Moss: So object shortcuts. This is probably one of my favorite features and I always like trying to figure out how I can use more of it, just so I can do it because it's so fun. So we can take advantage of method and property shortcuts on object literals and classes.
[00:00:20] So up here you saw me doing something like this. And it's like making a function but not really, that's a method shortcut. So here's some more code because it speaks better than I can. So I say, var enable = true. And then I have this object called config.
[00:00:35] And I have a property called enable, and I immediately put a comma after it. And I had to do a key value pair, and that's because in this same scope, there's a variable with the exact same name. And because of that, I don't have to put it twice.
[00:00:50] I don't have to say enable, colon, enable. It's just that. That's all I have to do. I don't have to do it twice because it's the exact same name, all right? Does that make sense? It has to be the exact same name and it has to be accessible from where I'm defining this thing, right?
[00:01:05] So if I go back here. So if I say, const, and so you can see what the output looks like, val = 2. And then I say const ops = object, right? And then I can just say val. You see what it spits out on the right? It's like, yeah, you want that val, val: val, right?
[00:01:30] That's what it did, it's pretty cool. So this is where that this is where these brackets really get confusing because there's another feature in 6 that used the exact same thing. And it looks just like that, and it won't be the same thing. In fact I'll just show you.
>> Students: [LAUGH]
>> Speaker 3: Did you ever work with the Babel guys?
>> Scott Moss: No, I've never worked with the Babel guys. So if I said that, and then I wanted to do something called destructuring. This is gonna break because I'm using const, but I say const val = ops. It's like the opposite of what's above it, but it's a completely different thing.
[00:02:12] That's called the destructuring. We'll talk about that later. Yeah, so it's really confusing. This is definitely an object and this is not, but it's the exact same thing, so.
>> Speaker 4: So is the key differentiator there between the syntaxes that the destructuring is on the left hand side of an equals sign versus on the- [CROSSTALK]
>> Scott Moss: Exactly, that's the key, yeah. It's on the left hand side, yep.
>> Speaker 4: Okay.
>> Scott Moss: Left hand side is definitely destructuring.
>> Scott Moss: Cool, so that's one shortcut. Same variable name and then accessible scope, you can just bypass the key value pairs but the key followed by comma. Good practice is to put those at the top of your object literal.
[00:02:54] So they just look cleaner that way. And then the next one is the method shortcut. So just like in a class, if we wanted to find a method, we can just say the name of the method followed by parentheses like we were executing the function, and then just make our brackets and then go ahead and define.
[00:03:08] That's all we gotta do. That's it. So the only difference doing, well I'm gonna tell you more about it, but the only different between this method here and this object, and this method here in the class, inside of a class we don't have the comma separate our methods.
[00:03:23] We only need commas underneath them. In an object, it's still an object, you still need commas, so remember that. Always have to put commas after our stuff. So what that looks like is something like this. So now we have val, right, and then we'll put a comma there, and then we'll say, action, and then we'll do that.
[00:03:44] You see it creates a function called action over there. It also keeps the same context. It's like doing function binding. So it'll keep the same this on the outside, inside. It's like doing .bind on this thing, all right? It's the same as this other feature that we're gonna talk about loosely because I kind of want you guys to explore a little bit.
[00:04:09] It's the arrow functions. If you use CoffeeScript, you know about arrow functions, right? So if I say var, later = a function, right? You have a function and you'll do something. Well I could just get rid of that function keyword and I can put this arrow underneath it.
>> Speaker 5: It's a fat arrow?
>> Scott Moss: It's a fat arrow. There are no skinny arrows, yeah. And then it's the same thing. Except it keeps the scope of this.
>> Speaker 6: And so do method shortcuts.
>> Scott Moss: And so do method shortcuts, yes. Cool, so things to remember when using method shortcuts the outside context is kept, just like .bind.
[00:04:57] When using method shortcuts on object literals, you must still, not stull, you must still obey the common rule with objects and you don't have to with classes. So are things to remember. Cool, any questions on this stuff? Yes.
>> Speaker 4: There's a question from Felix L online. What about the scope collision when using this method shortcut?
>> Scott Moss: Scope collision.
>> Speaker 4: I think he means if you already had an action defined in this scope.
>> Scott Moss: This is fine. This is this is an action property on ops, so it's encapsulated. So if I had action.
>> Scott Moss: It's still fine. Yeah, what I meant by keeping the same context, I mean if I were to count on a log.
[00:05:45] Let me get a good example, hold on. So if I had a function. Let's say let. I will use action again. Write a function and it returns an object and it had run. And I'll write console.log this.
>> Scott Moss: Right? What I'm saying is it will keep the outside context.
[00:06:17] Whereas if I didn't do this, it wouldn't. Just like with set timeouts. If I said setTimeout which is a common one that people do. Do setTimeout. And then you'll have, normally you'll do something like this, you'll have your function here
>> Scott Moss: And then you'll come down here and you're like .bind this, and then you'll do some stuff in here, right?
[00:06:45] Well now you don't have to do that. You can just get rid of this and use that. And now this.
>> Scott Moss: Is whatever it was.
>> Speaker 7: Can you show what it was before? Just anonymous function?
>> Scott Moss: Yeah, before it was just an anonymous function.
>> Scott Moss: In this case, and this is undefined, in this environment this repo was nothing here.
[00:07:14] They both will be the window either way because I'm on the global scope but, yeah.
>> Scott Moss: Yes.
>> Scott Moss: When does it create a new this? So there's a lot of rules.
[00:07:30] So what happens to create a new this. One is like, so this is created when a scope is executed, right? So on functional execution, this is created under scope. So that's a this. And then when you use a method, whatever's to the left of the dot is gonna be this, all right?
[00:07:45] So those are the two cases when this is gonna be made. So whenever I make a, so I have a function called action, right? I'm just defining it. I didn't create a scope yet, but as soon as I do this, now there's a new this inside of action.
>> Speaker 8: Gotcha.
>> Students: You see what I mean?
>> Speaker 8: Mm-hm.