5.7 Object Literal Extensions

Hi, folks, in this lesson we're going to look at some cool things we can do when defining object literals. One feature is a shorter syntax for defining object properties that we saw when we looked at objects earlier on in the course. Let's look at that first, instead of specifically setting properties and values, we can simply supply the value. And the key will be created for us automatically. Let's take a look, so let's start out by defining a couple of variables. So later, we might want to create a new object literal which contains these values. In previous versions of JavaScript, we would've had to do something like this. So we've defined an object literal called obj. And we want it to have two properties, one with the key x and one with the key y. And we want to give the x key the value of the x variable, and the y key the value of the y variable. So in this case, it's not too bad, because the key names and variable names are quite short. But there is a lot of duplication there. And if we were adding more variables, and we wanted to use longer key names, and we had different variable names, there could be a lot more repetition. So in the latest version of JavaScript, we can shorten that to just do this instead. When the key name is the same as the variable name, we can just supply that once and JavaScript will figure it out for us. And let's just log it to the console to ensure that it's working in the way that we expect. And we can see that our object has been created, and it has x and y keys. And it has the values of the x and y variables, as we would expect. So we've saved ourselves a bit of repetitive typing, which can be useful. It seems like a small thing, but in regular day to day JavaScript, it can save you a lot of repetition. And that's really why this feature was introduced. Another time saving and repetition saving addition is a new way of defining methods. So, in earlier versions of JavaScript, if we wanted to define a method, which is simply a function attached to the proxy of an object, we would have had to have done something like this. So, in this case, we've defined a new method on our objects. And this method is stored in a property simply called method. And we have to use the whole function keyword. So if we were adding a lot of methods we'd have to repeat that function keyword over and over again. Well, in the latest version of JavaScript, we can get rid of that function keyword all together. And that allows us to do this instead. So we simply add the parenthesis after the method. And we don't have to worry about a function keyword at all. So, again, in this case, it hasn't really saved us much time or effort. But if we were adding lots and lots of methods to this object, it would save us a considerable number of keystrokes. And it just looks a bit nicer, and it's a bit easier to read. One other new feature that we have with objects is having computed property names. So in this case we use square brackets to say that we want the key name to be a combination of the x and the y variables concatenated together. And let's just look at the output in the browser. And we can see that our object now has a key called test42, which is the output of computing x plus y. Again, a small thing, but it can be very useful. Before we finish up for the day, let's just take a quick look at another static method that we can make use of from the built in object constructor that we looked at in the last lesson. This is the assign method, and we can use it to assign the properties of one or more objects to another object, a bit like jQuery's clone method. Again, this is largely provided as a syntactic convenience to avoid having to copy the properties of objects to new objects manually. So let's take a quick recap of what we've done here. We've created a new object called composedObj. And we've used the objects.assign method, this method takes three parameters in this example. This method takes three arguments in this example. The first argument is an empty object. So this is the target object, this is the object that the method will return. The second and third arguments are the objects that we'd like to merge together. So we're merging our obj example objects and then a new object literal that just has a single property called someOtherProp. And let's just log out the value of the composed object to the console. And we can see that this new object is a combination of both our existing example object and the new object literal that we passed as the third argument. If the target object already contains a property that one of the other objects contains, it will be overwritten with a property from the last object that we passed. So in this lesson we looked at some mostly syntactic improvements to object literals which were added in ES2015. Including the shorthand for assignment, where when the key name and the variable that we'd like to add to that key are the same, we can just provide one of those. We don't have to duplicate them. And we looked at computed properties. We finished up by taking a look at the assign method, which can be used to merge two objects together to form a new object. In the next lesson, we're going to move on to look at object instances. Thanks for watching.