ES6 Object Literal Enhancements

ES6 Object Literal Enhancements

Object Literals in ES6 have seen some improvements over their ES5 predecessors. These improvements help developers to solve problems with less typing and less code. In addition to this, many find the new syntax styles to be more concise and easier to understand. In this ES6 tutorial, we’ll take a look at Object Enhancements such as Object Literal Shorthand, Object Method Shorthand, Computed Object Keys, and Object Destructuring. Let’s jump right in.

ES6 Object Literal Shorthand

Objects in JavaScript have always been pretty easy to create using standard object literal syntax. Let’s take a look at putting together an object using ES5. Notice that inside the legoset object, we assign the variables of partnumber and description to object properties of the same name.

ES5 Object Literal

ES6 Object Literal

We can rewrite this object literal here using ES6 syntax. In ES6, if you have variables in the context which have the same name as object properties, you no longer have to type the name twice like in ES5. The object literal here of legoset automatically assumes the values of the corresponding variables in the context, those being partnumber and description. That’s a nice and welcome addition to the language which will have you typing less.

ES5 Returning an Object

Now, we create a function and inside that function are a couple of variables of make and model. We then return an object literal which holds those values. Again, in ES5 we must type out the variable names twice. Let’s redo this in ES6.

ES6 Returning an Object

In ES6 we can return an object literal in a super concise way. Here we have the same function with the same variables. We can return an object containing those values as properties very easily as you see here. The results are the same as above.

ES6 Object Method Shorthand

As we know objects are not just for holding data, they can also hold functions or methods. In ES5 we accomplished this by manually typing out the function keyword and the associated function after a specific property in the object. This works just fine, but is improved upon in ES6 with a cleaner shorthand notation.

ES5 Object Method

ES6 Object Method Shorthand

The updated example for an object method using shorthand is here. The method we are looking at of course here is the buildset() method. We no longer have to manually type of the property then use the function keyword. Just type out your method name followed by parentheses and you’re good to go. Very nice.

ES5 Second Example of an Object Method

This is just another example of an object method in ES5. The race property of the object literal being returned holds a function named race. It works, but ES6 can do better.

ES6 Second Example of Object Method Shorthand

In this iteration of the object method, we again make use of the object method shorthand syntax. We simply type race() with our function code in between curly braces, and all is good. In addition, you can see we make use of the new template literal with string interpolation making use of the backtick character. We now have string interpolation in JavaScript similar to how PHP handles string interpolation.

ES6 Computed Object Keys

In ES5 we understand objects as associative arrays, or hashmaps, with string based keys. So far those keys have been immutable. In ES6, it is now possible to construct object properties, or keys, insde the object using bracket notation on the object key. It’s a little mind bending since it is such a new concept, so let’s look at a few examples. This time around, we’ll look at ES6 first, and then the equivalent code it would take in ES5.

ES6 Computed Object Key

In this example, note that we have brackets surrounding the description key in the legoset object. As a result of this, the string ‘description’ is not the key but rather the value that it holds becomes the key in the object. This is an example of a computed object key in ES6.

Here is the ES5 code required to do the same thing. Not fun.

ES6 Object key expression

In this example, we show that you can even call a method right on the object key itself.

The ES5 version of this is not so easy.

This is a bit of a mind bender right here where we set up an array, and then use that array in different ways as the actual keys of our coolobject. By placing brackets around the key of an object, you are setting up a computed key in ES6.

ES6 Object Destructuring

Taking data out of objects and arrays for use in your program is one of the most common things you’ll need to do when writing JavaScript. ES6 adds some new features to try and make this easier with destructuring. When using a destructuring expression, you take the value on the right of the = sign, and break it apart to assign variables on the left of the = sign. Hopefully it makes sense in this example here.

Object Destructuring Example 1

As we can see here, by simply using an assignment operator we can take the values of an object and extract them into new variables to use in your program. In addition, you can pick and choose the values you want to work with, it doesn’t need to be the whole object. So here we have our student object, but we only want to make use of the email and nextClass keys in our code. By using the expression of let {email, nextClass} = student;, that is exactly what we accomplish.

Object Destructuring Example 2

This example here of object destructuring sets up a purchaseprice object with a sale price of 5, an average price of 10, and a markup price of 15. We then make use of object destructuring to extract those values into variables. We log out the value of markup and we get the correct value of 15.

It’s important to make sure that the properties match up between the object and our new variables. So in our purchaseprice object here we have a sale, average, and markup property. Those match exactly to our new variables that we are using destructuring with.

Destructuring Example 3

Example 3 uses the same object literal as we had in example 2, however we are using a new syntax for destructuring. In the prior examples, we have assumed that our new variables and the keys of the object being destructured are exactly the same. In fact they need to be in order for this to work properly. What about if you want to use new variable names as you destructure? This is also possible and it is exactly what we did here in example 3.

Destructuring Example 4

This is another simple example of object destructuring which makes use of simple string values in the object literal. We then destructure the company object into the variables of name and industry. Logging out those values shows the correct result.

Destructuring Example 5

Again we make use of the company object but add a few keys to the object. The new products key holds an array of values, and the ticker key holds a simple string value. When we destructure we choose to only make use of products and ticker, and this is perfectly fine. You do not need to make use of every single key when destructuring. You can pick and choose what you need for your application.

Destructuring Example 6

This is a pretty cool new feature here where you can use object destructuring as a function argument. Notice how in the function declaration, we can simply pass in an object destructuring expression and we immediately get access to all the values of the object inside the function.

Destructuring Example 7

Let’s look at one final example to understand how object destructuring works. All we have is a simple function that says hello to someone, and mentions their job. We call the function, passing in an object and it works great.

ES6 Object Literal Enhancements Summary

ES6 has a lot of nice new features for working with objects. We covered object literal shorthand notation, which makes it easy to assign variables to an object without having to type the name of the value twice every time. Next up was looking at object method shorthand, which is a nicer way to declare functions or methods inside of your objects. This is another instance where we no longer have to type out the function key word as we also learned with arrow functions. Next up was a quick look at how we can now use computed keys in objects by making use of brackets surrounding the object key. Finally, we had a look at object destructuring in ES6. We saw that object destructuring is a very convenient way to dismantle or extract data out of an object to make use of those values in their own variables, which is another welcome addition to the JavaScript language.