Objects are one of the most important and most powerful features of JavaScript and many built-in features use objects natively.
Essentially, an object is a collection of properties, and a property consists of a key and a value. In this sense, objects in JavaScript are akin to associative arrays in PHP but the similarities end there.
This is the second post in our four-part series focusing on JavaScript for WordPress developers. Throughout this series, you’ll learn the basics but I’ll presume you already have a working knowledge of HTML and CSS. If you need help with these building blocks, take a look at our series about WordPress Development for Beginners.
In the last article in this series, we looked at the very basics of JavaScript – how to add to a page and use variables and functions. In this tutorial, we’ll focus on commonly used objects in JavaScript.
Objects
Let’s dive straight in by looking at an example of an object in JavaScript:
.gist table { margin-bottom: 0; }
This is a very simple object with four properties. The first property has the key “name” and the value “Daniel Pataki.” As you can see from the other properties, values may use many different data types.
What makes objects so useful, but also a little confusing, is that property values can also be functions. If you’ve copy-pasted some jQuery code before you may have seen this in action in the form of callback functions, which looks something like this:
.gist table { margin-bottom: 0; }
The code above would send a post request to the given URL. The “complete” property invokes a function, which is run when the request has been completed. To see how this would work let’s quickly write a function of our own:
.gist table { margin-bottom: 0; }
The object contains a name property and a greeting property, which is a function. Once defined we can invoke that function using the dot syntax: me.greeting
. You can even reference properties from within the same object using the this
keyword.
If you’ve worked with PHP objects before the idea is very similar. The simplicity of the syntax throws people sometimes, but there is tremendous power within.
Working With Objects
Let’s take a step back and learn how to create and manipulate objects. An object is always encased in curly braces. Property names can be unquoted but must be quoted if they contain special characters like dashes. Property values can be of multiple types including strings, integers, arrays and other objects.
Let’s create a test object with some useful information we can manipulate:
.gist table { margin-bottom: 0; }
To get the value of a property you can use the dot notation or the square bracket notation. The bracket notation is useful if you want to use a variable property name. Take a look at the example below:
.gist table { margin-bottom: 0; }
And here’s what it looks like in the browser console:

You can use a function contained within an object similarly, just add a parenthesis at the end (and parameters if needed).
.gist table { margin-bottom: 0; }
The function calculates reading time by presuming a reading speed of 2.5 minutes per page. I multiplied the total page count by 2.5 to arrive at the number of minutes required for a complete read through. I then divide by 60 to arrive at the number of hours needed.
In the previous article, we created an example where we listed some tweets using an array, but we can make our example a lot more flexible using objects. Here’s the complete code re-written to use objects:
.gist table { margin-bottom: 0; }
The biggest change you’ll see is that instead an array of tweets and a username given separately, I’ve created an array of tweet objects. Each tweet object contains the tweet and the username. This removes the uncertainty of passing in the username from somewhere else.
The tweet()
function now uses the object’s properties instead of separate arguments and I’ve removed document.write
to make sure it just returns a string, which can then be used anywhere.