This course has been updated! We now recommend you take the JavaScript: The Recent Parts course.
Transcript from the "Concise Properties and Methods" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Kyle Simpson: So the next thing that we wanna turn our attention to I've all ready kind of alluded to this a little bit. But I wanna talk to you about a few extensions that have been added to the object literal syntax to give us the ability to do more declarative stuff instead of the more manual imperative stuff that we've been doing all along.
[00:00:20] So we're just gonna talked about a variety of quick little fixes or extensions, if you will to the object literal sometimes. So it used to be the case that if I was making an object and there was some, oops. There was some variable of a name for example, a and I wanted to put that thing into object.
[00:00:43] If I wanted to say a property of the same name with the value of a, I'd have to say it twice and have say a: a, right? We now what are called concise properties which we've already seen which is in the case where the property name and the value it's coming from are the same.
[00:01:00] We can just list it once. So that's a concise property, okay? Nice simple, clear win. In addition to concise properties, we also have what are called concise methods. It use to be the case that if you want to put a function inside of your object literal, you have to say b; and then put some function, okay?
[00:01:21] Now, we have the ability to do what's called a concise method. Which is to take out the word function and just put the name in the parentheses and the curly braces, okay? I use these a lot, but there's something that you should be aware of with concise methods.
[00:01:43] You might be of the impression, since there's a name there, that the extension of that would look like.
>> Kyle Simpson: Where there is not only the property name, but also the name of the function. You might be of that assumption, and unfortunately that assumption is incorrect. Because what actually by spec happens is that b property points to an anonymous function.
[00:02:12] Now, it is an anonymous function that is name inferencing. So that is an anonymous function that will show up in your stack trace called b, but here is where this falls apart. Let's say you have code like this. Cuz I do that regularly, where I have the property name and the variable name.
[00:02:35] And why do I have that variable name? Because there's some crazy condition where I wanna do a recursive call on it. Or it's an event handler and I wanna unbind it, for whatever reason. I need a self reference to the function from inside of itself, okay? So if I want a self reference to the function from inside of itself.
[00:02:54] This is nice and helpful as soon as I come along and do this. B is no longer a lexical identifier, so now my code is gonna stop working, okay? So the caveat, it's a big caveat to concise methods is they don't have a lexical self reference. I think this is dumb.
[00:03:16] I petition very hard for them to not do that, but there is a reason why they didn't do it. And the reason is that it is possible for you to make functions, for you to make property names that can't be lexical identifiers. For example,
>> Kyle Simpson: That can't be an identifier cuz it has a space in it, and it is entirely legal for you to do that.
[00:03:44] So they ask rightly the question, what should the lexical name be in that case? And there is no good answer to that question. So because there are some cases where they can't come up with a good lexical name, they didn't ever put in a lexical name. It's kind of a baby thrown out with the bath water sort of scenario, okay?
[00:04:04] So I find that kind of annoying that these are lexically anonymous functions. By the way, I gave you this admin issue earlier, let me just remind you. This is one of those cases where you're gonna go over to Babel, and you're gonna be like but see it makes a function be there, you must be wrong.
[00:04:27] No, this is a case where Babel is deliberately skirting around that part of the spec. Because that is the quickest and easiest way for them to do named functions. Named functions are kinda hard to do if you don't actually put a name on them, so they take the easy short path.
[00:04:47] If you try to do something like this, look at what they do. A much longer more complex path for getting a named function that preserves the correct behavior. So don't come to me and complain that I don't know what I'm talking about, I do. I've studied it, trust me, concise methods are lexically anonymous.
[00:05:07]
>> Speaker 2: Now if you make that property name hello world like you had, do they not bother to try with the name?
>> Kyle Simpson: They came up with their own. That's not what the specs says.
>> Kyle Simpson: Okay, so concise methods are cool, I use them a lot. But in any case, where I need a lexical self reference I don't use them cuz they're lexically anonymous.
[00:05:33] All right, concise methods, concise properties nice easy wins. Another case that is fairly common actually probably more common than those, is where I have something like this. And what I want, is I want the property name hello to hold some value but the property name is currently in a variable.
[00:05:56] So what I end up doing is saying, obj[c] = to some value. I have to do it outside of an after the object literal. I don't know if anybody else has been in that case by probably five times a day, I run into this case from trying to put something an object literal.
[00:06:13] And I can't [COUGH] cuz the property name needs to be computed. Well now we have computed property names.
>> Kyle Simpson: So you can put the brackets syntax there inside of the object literal. Inside of the brackets, you can put any valid JavaScript expression. Here, I'm putting a variable. We could do something crazy like .toString.
[00:06:40] I mean .toUpperCase for example, any JavaScript expression that you can think of. Computer properties might be in my top five favorite features. [LAUGH] This cuz I don't want it to always be on those under the I use it pretty frequently.
>> Kyle Simpson: All right, so we have concise properties, concise methods.
[00:07:08] We have computed properties, computed properties can also be used for method names. So we could say c+ fn, so now we have hello fn is a concise method, for example.
>> Kyle Simpson: So now there's a function called hello fn on our object.
>> Speaker 3: If you use the concise methods, is that equivalent to the full function body versus like the arrow syntax?
[00:07:39]
>> Kyle Simpson: Yes, concise methods are equivalent to function bodies. There's a couple of differences nuance stuff that we're not gonna talk about today like the way the super keyword and stuff like that behave. But for virtually all cases, the full function is how concise method may be-
>> Speaker 3: Right, so you still have to use the return keyword?
[00:07:59]
>> Kyle Simpson: Yep, exactly, yes.
>> Speaker 4: Drew is asking, why do they even bother naming it?
>> Kyle Simpson: Who's they? Are you talking about Babel maybe?
>> Speaker 2: That was me, yeah.
>> Kyle Simpson: Why is Babel naming it?
>> Speaker 2: Yeah, in that example you had up.
>> Kyle Simpson: I have no idea, but [CROSSTALK]
[00:08:16]
>> Speaker 2: Use it for anything.
>> Kyle Simpson: Are you saying why they're naming it here?
>> Speaker 2: Why they add the second.
>> Kyle Simpson: The reason they add it, I know the answer to that question. The reason they add that is,
>> Kyle Simpson: In this case, when a call stack happens, we want for that b function to be reported as the name b.
[00:08:39] So that's why they add it. What they're doing is they are transpiling ES6 name inferencing.
>> Kyle Simpson: [COUGH] Yes?
>> Speaker 5: Question from me. The last one on line nine, if you wanted to make that, say it was a recursive function. How would you call that, or could you call?
[00:09:10]
>> Kyle Simpson: For a computed property, you'd have to recompute it on the inside. So you could say something like object of c+ fn like that.
>> Kyle Simpson: This is deprecated but you could do arguments.callee.
>> Kyle Simpson: It's not a good idea. There's a proposal I think for a future version of JavaScript where we're gonna get these special meta properties, and I think it's gonna be something like function callee.
[00:09:48] That will be able to use maybe in the future that will be a self reference that doesn't need a lexical name.
>> Speaker 5: Okay. For the whether this is you have to recreate.
>> Kyle Simpson: What's that?
>> Speaker 5: You have to recreate it, right?
>> Kyle Simpson: You have to recreate it, or use arguments.
[00:10:00]
>> Speaker 5: It's not a lexical reference, it could be a different function.
>> Kyle Simpson: Yeah, yeah, exactly, so like I said earlier, if I have any inkling that I'm going to need a self reference for any purpose. I don't use concise methods. We haven't talked about these today, we will later today.
[00:10:25] But there are what are called generators. That's a special kind of function, and you can specify a generator for example, foo generators use the star symbol to a function plus star to signify themselves. There is a concise form of this which is weird, if you use the concise method you take that star and you move it here.
[00:10:58] So this is a concise generator,
>> Kyle Simpson: And we'll talk more about generators later. And finally, there is concise computed generators. So we can,
>> Kyle Simpson: For example do this.
>> Kyle Simpson: So that is a computed concise method that's also a generator, computed concise generator. There a few other object literal extensions that I wanna get into.
[00:11:34] Stuff like proto and super and stuff like that. Those are covered in my book, if you wanna read more about those. But these are the kind of the right parts of places that you'll often find yourself using to improve your usage of object literals. A little bit goes a long way in terms of just constantly having to do the old way versus this new way.
[00:11:54] It saves a lot of saves a lot of work. Anymore questions about our object literals?
>> Speaker 6: If they're planning on working in a syntax for async functions into this kind of?
>> Kyle Simpson: There is,
>> Kyle Simpson: I think async functions are just this, but I have to check the spec on that.
[00:12:24] I don't actually know. That's not yet in the spec, but it's almost there.