Object Literals; Something Every New JavaScript Dev Needs To Know

JavaScript is a funny thing, it’s extremely powerful in helping us make amazing and interactive websites (especially coupled with the fantastic jQuery library), but it’s really difficult to keep the code tidy and structured. Enter ‘Object Literals’.

Object literals are essentially a list of key:value pairs. Each key can hold anything as a value, even another object.

Here’s an example of passing another object literal as a value to the  born  key.

Note that the last key:value pair in an object doesn’t have a comma after, if you add a comma it will break the script in some browsers (namely IE).

So you’ve learned about the basics of an object literal, but you need to know how they’re actually useful. You can assign an object literal to a variable:

I use variables starting with a capital letter to make it clear in my code what’s an object and what’s not later on. Remember that JavaScript is case-sensitive. Note the semi-colon after the outer closing curly brace, this is required if you don’t want your script to break in (you guessed it) IE.

You can now use this object and access its properties. To do this we use something called dot notation.

To access the inner object literal you keep using dot notation

We can use dot notation to change the value assigned to a key if we need to:

So far you’ve learnt how to create an object literal, how to access the properties and how to change the properties. Object literals can hold another type of value; we can assign functions as a value to a key:

As you can see, to use an object’s function (officially called a method) you still use dot notation, and then call the function like you would with any other function in JavaScript, passing any values you need to inside the brackets. If you’ve used jQuery you’ll see that’s very similar. jQuery uses object literals a lot, take a look at the .animate() method which receives an object literal to define what animations to carry out.

If you love how jQuery chains methods together like this:

Rejoice! You can add chaining to your own code now you’re using object literals by returning the object itself at the end of the method, using the built in self-referencing variable  this :

If an object literal gets passed as an argument to a method you’d access it in exactly the same way within the method:

You’ve witnessed one of the great things about writing JavaScript code within object literals; you can add and remove methods/properties with absolute minimum editing of the rest of the code. Adding the .sayGoodbye()  method didn’t affect the .speak()  method at all. As you become more comfortable writing your code this way you’ll find it becomes more and more useful. Not just that, but it keeps your code much more organised.

Of course, the example I’ve used doesn’t have many great real-world uses. You can use an object literal for anything; say you have a popup on your page:

So, you’ve learnt how to create a basic object literal, how to access and modify the properties, and how to use and chain the methods. There’s one more bit of wisdom I want to impart with you, and that is what to do with jQuery code outside of a method function.

Carrying on with the  Popup  example, say that on the popup you had an “X” symbol which your users can click to close the popup. You’re using jQuery like this:

Great! You’re using the Popup object’s .close() method to close the popup, but where do you put this code? Well, remember how I said an object literal’s keys can hold anything as a value? You can also use an array as a value. You can define an array using square backets [] , and we’re going to use an array to hold all jQuery code related to the Popup object inside a key called  bindActions :

Note how there’s no semi-colon at the end of the jQuery code now, that’s because each item of an array is separated with a comma, not a semi-colon. Thus, to add more than one line of jQuery code you must separate with a comma:

See how there’s now a comma after the first line of jQuery code? As with listing properties and methods of an object literal, the last item must not have a comma after or it will break some browsers.

Now all code relevant to operating the popup on your web page is all contained within one block of code. You can now use this on as many pages as you want that use the popup, and happily know that you can add methods and functionality to it without breaking something on another page.

Object literals will change the way you code JavaScript! If you have any questions feel free to ask in the comments.

Want to learn more about object literals? Check out how to add delegates to objects!

Kane Cheshire

Author: Kane Cheshire

I'm a software developer (and sort of designer) from Hertfordshire. I spend a lot of time learning, travelling and flying my drone. I made MacID. You can check out some of my favourite photographs from travelling at http://kane.codes. I'm also the creator and lover of Twicnic, an annual Twitter picnic event.

Leave a Reply

Your email address will not be published. Required fields are marked *