Kyle spends a few minutes demonstrating concise properties and methods which provide a shorthand notation for declaring properties and methods on an object. He also illustrates a few of the pitfalls with the syntax.
(funky music) - So the next thing that we wanna turn our attention to, I've already kind of eluded 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. I'm just gonna talk to you about a variety of quick, little fixes or extensions, if you will, to the object literal syntax. It used to be the case that if I was making an object and there was some variable of a name, for example a, and I wanted to put that thing into object.
If I wanted to say a property of that same name with the value of a, I'd have to say it twice. I'd have to say a colon a. We now have 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, we can just list it once. So that's a concise property. Nice, simple, clear win. In addition to concise properties, we also have what are called concise methods.
It used to be the case that if you wanted to put a function inside of your object literal, you had to say b colon and then put some function. Now we have the ability to do what's called a concise method which is take out the word function and just put the name in the parentheses and the curly braces. I use these a lot. But there's something that you should be aware of with concise methods.
You might be of the impression, since there's a name there, that the extension of that would look like 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. Now, it is an anonymous function that has name referencing so that is an anonymous function that will show up in your stack trace called b.
Here's where this falls apart. Let's say you have code like this, because I do that regularly. Where I have the property name and the variable name. Why do I have that variable name? Because there's some crazy condition where I want to do a recursive call on it or it's an event handler and I want to unbind it. For whatever reason I need a self reference to the function from inside of itself. If I want a self reference to the function from inside of itself, this is nice and helpful.
As soon as I come along and do this. Uh oh, b is no longer a lexical identifier, so now my code's gonna stop working. So the caveat, it's a big caveat. The caveat to concise methods is they don't have a lexical self reference. I think this is dumb. I petitioned very hard for them to not do that. But there is a reason why they didn't do it. 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, that can't be an identifier because it has a space in it and it is entirely legal for you to do that. So they asked, rightly, the question what should the lexical name be in that case and there is no good answer to that question. 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.
I find that kind of annoying that these are lexically anonymous functions. By the way, I gave you this admonition earlier and 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, oh but, see it makes a function b there. You must be wrong. 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 kind of hard to do if you don't actually put a name on them, so they take the easy, short path. 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. 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. - [Male Student 1] Now, if you make that property name hello world, like you had, do they not bother to try with the name? - They came up with their own.
It's not what the spec says. 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 because they're lexically anonymous. Alright, concise methods, concise properties, nice, easy wins. Another case that is fairly common and 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.
So what I end up doing is saying, obj of c is equal to some value. I have to do it outside of and after the object literal. I don't know if anybody else has run into that case, but I've probably, five times a day I run into this case where I'm trying to put something in object literal and I can't because the property name needs to be computed. Well, now we have computed property names. So you can put the bracket syntax there, inside of the object literal.
I use it pretty frequently. Alright, so we have concise properties, concise methods, we have computed properties. Computed properties can also be used for method names. So we could say, c plus fn, so now we have a hello fn, is a concise method, for example.
Now there's a function called hello fn on our object. - [Male Student 1] If you use the concise methods is that equivalent to the full function body versus, like, the error syntax. - 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 key word and stuff like that behave, but for virtually all cases, the full function is how a concise method behaves. - [Male Student] Right, so you still have to use return key words.
- Yep, yep you do. Yes. - [Male Student 2] Drew was asking why do they even bother naming it. - Who's they? Are you talking about Babel maybe? - [Drew] That was me, yeah, um. - Oh, why is Babel naming it? - [Drew] Yeah, in that example you had up. - I have no idea. - [Drew] Because they don't really use it for anything. - Are you saying why are they naming it here? - [Drew] Why are they adding the second. - Oh, the reason they added it, I mean, I know the answer to that question. The reason they add that is in this case, when a call stack happens we want for that b function to be reported as the name b.
So, that's why they add it. What they're doing is they are transpiring es6 name inferrencing. Yes. - [Male Student 3] Question from me, the last one on line nine, if you wanted to make that, say it was already cursive function. How would you call that or could you call that? - For a computed property? You'd have to recompute it on the inside.
That'll be a self reference that doesn't need a lexical name. - [Male Student 3] In other words, you just have to recreate it. - What's that? - [Male Student 3] You have to recreate everything. - You have to reinfuse or use arguments callee. - [Male Student 1] It's not a lexical reference. It could be a different function. - Yep. Yep, exactly. Like I said earlier, if I need any, if I have any inkling that I am 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. 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, function will plus star to signify themselves. There's a concise form of this which is weird if you use the concise method, you take that star and you move it here.
This is a concise generator. We'll talk more about generators later. Finally, there is concise computed generators. We can, for example, do this. That is a computed concise method that's also a generator, computed concise generator.
There are a few other object literal extensions that I wanna get into. 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 kinda the right parts. The 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. It saves a lot of work. Any more questions about our object literals? - [Male Student 1] Do you know if they're planning on working in a syntax for async functions into this kind of.
- There is, I think, async functions are just this, but I'd have to check this back on that. I don't actually know. That's not yet in the spec, but it's almost there.
This course was created by Frontend Masters. It was originally released on 01/10/2017. We're pleased to host this training in our library.
- The arrow function
- Arrow function variations
- Closures and explicit blocks
- Default values
- Using the gather and spread operators
- Dumping variables
- Concise properties and methods
- Symbols, iterators, and generators
- Optimizing codes for the reader